@shival99/z-ui 2.1.28 → 2.1.29

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.
Files changed (68) hide show
  1. package/package.json +1 -1
  2. package/types/shival99-z-ui-components-z-select.d.ts +1 -1
  3. package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs +0 -1079
  4. package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs.map +0 -1
  5. package/fesm2022/shival99-z-ui-components-z-drawer.mjs +0 -742
  6. package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +0 -1
  7. package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs +0 -58
  8. package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs.map +0 -1
  9. package/fesm2022/shival99-z-ui-components-z-editor.mjs +0 -1750
  10. package/fesm2022/shival99-z-ui-components-z-editor.mjs.map +0 -1
  11. package/fesm2022/shival99-z-ui-components-z-gallery.mjs +0 -2419
  12. package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +0 -1
  13. package/fesm2022/shival99-z-ui-components-z-kanban.mjs +0 -981
  14. package/fesm2022/shival99-z-ui-components-z-kanban.mjs.map +0 -1
  15. package/fesm2022/shival99-z-ui-components-z-marquee.mjs +0 -70
  16. package/fesm2022/shival99-z-ui-components-z-marquee.mjs.map +0 -1
  17. package/fesm2022/shival99-z-ui-components-z-media-player.mjs +0 -668
  18. package/fesm2022/shival99-z-ui-components-z-media-player.mjs.map +0 -1
  19. package/fesm2022/shival99-z-ui-components-z-menu.mjs +0 -843
  20. package/fesm2022/shival99-z-ui-components-z-menu.mjs.map +0 -1
  21. package/fesm2022/shival99-z-ui-components-z-metric-card.mjs +0 -128
  22. package/fesm2022/shival99-z-ui-components-z-metric-card.mjs.map +0 -1
  23. package/fesm2022/shival99-z-ui-components-z-pagination.mjs +0 -158
  24. package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map +0 -1
  25. package/fesm2022/shival99-z-ui-components-z-qrcode.mjs +0 -383
  26. package/fesm2022/shival99-z-ui-components-z-qrcode.mjs.map +0 -1
  27. package/fesm2022/shival99-z-ui-components-z-radio.mjs +0 -167
  28. package/fesm2022/shival99-z-ui-components-z-radio.mjs.map +0 -1
  29. package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs +0 -131
  30. package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs.map +0 -1
  31. package/fesm2022/shival99-z-ui-components-z-show-more.mjs +0 -121
  32. package/fesm2022/shival99-z-ui-components-z-show-more.mjs.map +0 -1
  33. package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs +0 -61
  34. package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs.map +0 -1
  35. package/fesm2022/shival99-z-ui-components-z-steps.mjs +0 -396
  36. package/fesm2022/shival99-z-ui-components-z-steps.mjs.map +0 -1
  37. package/fesm2022/shival99-z-ui-components-z-table.mjs +0 -10508
  38. package/fesm2022/shival99-z-ui-components-z-table.mjs.map +0 -1
  39. package/fesm2022/shival99-z-ui-components-z-tabs.mjs +0 -507
  40. package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +0 -1
  41. package/fesm2022/shival99-z-ui-components-z-tags.mjs +0 -349
  42. package/fesm2022/shival99-z-ui-components-z-tags.mjs.map +0 -1
  43. package/fesm2022/shival99-z-ui-components-z-timeline.mjs +0 -237
  44. package/fesm2022/shival99-z-ui-components-z-timeline.mjs.map +0 -1
  45. package/fesm2022/shival99-z-ui-components-z-upload.mjs +0 -523
  46. package/fesm2022/shival99-z-ui-components-z-upload.mjs.map +0 -1
  47. package/types/shival99-z-ui-components-z-autocomplete.d.ts +0 -290
  48. package/types/shival99-z-ui-components-z-drawer.d.ts +0 -266
  49. package/types/shival99-z-ui-components-z-dropdown-menu.d.ts +0 -54
  50. package/types/shival99-z-ui-components-z-editor.d.ts +0 -337
  51. package/types/shival99-z-ui-components-z-gallery.d.ts +0 -402
  52. package/types/shival99-z-ui-components-z-kanban.d.ts +0 -237
  53. package/types/shival99-z-ui-components-z-marquee.d.ts +0 -35
  54. package/types/shival99-z-ui-components-z-media-player.d.ts +0 -124
  55. package/types/shival99-z-ui-components-z-menu.d.ts +0 -222
  56. package/types/shival99-z-ui-components-z-metric-card.d.ts +0 -67
  57. package/types/shival99-z-ui-components-z-pagination.d.ts +0 -55
  58. package/types/shival99-z-ui-components-z-qrcode.d.ts +0 -76
  59. package/types/shival99-z-ui-components-z-radio.d.ts +0 -69
  60. package/types/shival99-z-ui-components-z-scrollarea.d.ts +0 -46
  61. package/types/shival99-z-ui-components-z-show-more.d.ts +0 -36
  62. package/types/shival99-z-ui-components-z-skeleton-auto.d.ts +0 -35
  63. package/types/shival99-z-ui-components-z-steps.d.ts +0 -106
  64. package/types/shival99-z-ui-components-z-table.d.ts +0 -1924
  65. package/types/shival99-z-ui-components-z-tabs.d.ts +0 -92
  66. package/types/shival99-z-ui-components-z-tags.d.ts +0 -128
  67. package/types/shival99-z-ui-components-z-timeline.d.ts +0 -71
  68. package/types/shival99-z-ui-components-z-upload.d.ts +0 -153
@@ -1,121 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, DestroyRef, input, output, viewChild, signal, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
3
- import { TranslatePipe } from '@ngx-translate/core';
4
- import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
5
- import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
6
- import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
7
-
8
- class ZShowMoreComponent {
9
- _destroyRef = inject(DestroyRef);
10
- // Inputs
11
- class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
12
- zMaxHeight = input(150, ...(ngDevMode ? [{ debugName: "zMaxHeight" }] : []));
13
- zShowMoreLabel = input(undefined, ...(ngDevMode ? [{ debugName: "zShowMoreLabel" }] : []));
14
- zShowLessLabel = input(undefined, ...(ngDevMode ? [{ debugName: "zShowLessLabel" }] : []));
15
- zShowLessButton = input(true, ...(ngDevMode ? [{ debugName: "zShowLessButton" }] : []));
16
- zButtonType = input('ghost-primary', ...(ngDevMode ? [{ debugName: "zButtonType" }] : []));
17
- zButtonSize = input('sm', ...(ngDevMode ? [{ debugName: "zButtonSize" }] : []));
18
- zWave = input(false, { ...(ngDevMode ? { debugName: "zWave" } : {}), transform: zTransform });
19
- zBlurHeight = input(64, ...(ngDevMode ? [{ debugName: "zBlurHeight" }] : []));
20
- zBlurColor = input(undefined, ...(ngDevMode ? [{ debugName: "zBlurColor" }] : []));
21
- // Outputs
22
- zExpandChange = output();
23
- // Queries
24
- _contentContainer = viewChild('contentContainer', ...(ngDevMode ? [{ debugName: "_contentContainer" }] : []));
25
- _contentInner = viewChild('contentInner', ...(ngDevMode ? [{ debugName: "_contentInner" }] : []));
26
- // State
27
- _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
28
- _isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "_isOverflowing" }] : []));
29
- _scrollHeight = signal(0, ...(ngDevMode ? [{ debugName: "_scrollHeight" }] : []));
30
- // Readonly bindings for template
31
- isExpanded = this._isExpanded.asReadonly();
32
- isOverflowing = this._isOverflowing.asReadonly();
33
- zClasses = computed(() => zMergeClasses('block w-full', this.class()), ...(ngDevMode ? [{ debugName: "zClasses" }] : []));
34
- computedMaxHeight = computed(() => {
35
- if (!this._isOverflowing()) {
36
- return 'none';
37
- }
38
- if (this._isExpanded()) {
39
- return `${this._scrollHeight()}px`;
40
- }
41
- const maxH = this.zMaxHeight();
42
- return typeof maxH === 'number' ? `${maxH}px` : maxH;
43
- }, ...(ngDevMode ? [{ debugName: "computedMaxHeight" }] : []));
44
- // Tạo linear gradient mờ dần xuống nền (card/page)
45
- blurGradientStyle = computed(() => {
46
- const bg = this.zBlurColor() || 'var(--card, var(--background, #fff))';
47
- return {
48
- 'background-image': `linear-gradient(to top, ${bg} 0%, transparent 100%)`,
49
- height: `${this.zBlurHeight()}px`,
50
- };
51
- }, ...(ngDevMode ? [{ debugName: "blurGradientStyle" }] : []));
52
- constructor() {
53
- afterNextRender(() => {
54
- const innerEl = this._contentInner()?.nativeElement;
55
- if (!innerEl) {
56
- return;
57
- }
58
- // Kiểm tra chiều cao nội dung thực tế so với chiều cao tối đa giới hạn
59
- const checkOverflow = () => {
60
- const { scrollHeight } = innerEl;
61
- this._scrollHeight.set(scrollHeight);
62
- const maxH = this.zMaxHeight();
63
- if (typeof maxH === 'number') {
64
- this._isOverflowing.set(scrollHeight > maxH);
65
- return;
66
- }
67
- // Nếu zMaxHeight là string (ví dụ: '100%', 'calc(100% - 40px)')
68
- const contentEl = this._contentContainer()?.nativeElement;
69
- if (!contentEl) {
70
- return;
71
- }
72
- // Tạm thời tắt transition để đo chiều cao chính xác mà không bị ảnh hưởng bởi chuyển động
73
- const originalTransition = contentEl.style.transition;
74
- const originalMaxHeight = contentEl.style.maxHeight;
75
- contentEl.style.transition = 'none';
76
- contentEl.style.maxHeight = maxH;
77
- // Force reflow để trình duyệt tính toán lại layout
78
- const collapsedClientHeight = contentEl.clientHeight;
79
- // Khôi phục lại trạng thái ban đầu
80
- contentEl.style.maxHeight = originalMaxHeight;
81
- // Force reflow để tránh giật lag khi phục hồi transition
82
- void contentEl.offsetHeight;
83
- contentEl.style.transition = originalTransition;
84
- // Nếu phần tử đang ẩn (display: none) thì bỏ qua
85
- if (collapsedClientHeight === 0 && contentEl.offsetWidth === 0) {
86
- return;
87
- }
88
- this._isOverflowing.set(scrollHeight > collapsedClientHeight);
89
- };
90
- checkOverflow();
91
- // Sử dụng ResizeObserver để lắng nghe thay đổi kích thước của phần tử nội dung bên trong
92
- const resizeObserver = new ResizeObserver(() => {
93
- checkOverflow();
94
- });
95
- resizeObserver.observe(innerEl);
96
- this._destroyRef.onDestroy(() => {
97
- resizeObserver.disconnect();
98
- });
99
- });
100
- }
101
- toggle() {
102
- const nextState = !this._isExpanded();
103
- this._isExpanded.set(nextState);
104
- this.zExpandChange.emit(nextState);
105
- }
106
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZShowMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
107
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZShowMoreComponent, isStandalone: true, selector: "z-show-more", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMaxHeight: { classPropertyName: "zMaxHeight", publicName: "zMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zShowMoreLabel: { classPropertyName: "zShowMoreLabel", publicName: "zShowMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, zShowLessLabel: { classPropertyName: "zShowLessLabel", publicName: "zShowLessLabel", isSignal: true, isRequired: false, transformFunction: null }, zShowLessButton: { classPropertyName: "zShowLessButton", publicName: "zShowLessButton", isSignal: true, isRequired: false, transformFunction: null }, zButtonType: { classPropertyName: "zButtonType", publicName: "zButtonType", isSignal: true, isRequired: false, transformFunction: null }, zButtonSize: { classPropertyName: "zButtonSize", publicName: "zButtonSize", isSignal: true, isRequired: false, transformFunction: null }, zWave: { classPropertyName: "zWave", publicName: "zWave", isSignal: true, isRequired: false, transformFunction: null }, zBlurHeight: { classPropertyName: "zBlurHeight", publicName: "zBlurHeight", isSignal: true, isRequired: false, transformFunction: null }, zBlurColor: { classPropertyName: "zBlurColor", publicName: "zBlurColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zExpandChange: "zExpandChange" }, host: { properties: { "class": "zClasses()" } }, viewQueries: [{ propertyName: "_contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }, { propertyName: "_contentInner", first: true, predicate: ["contentInner"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"z-show-more flex h-full min-h-0 w-full flex-col\">\n <div\n #contentContainer\n class=\"z-show-more-content relative min-h-0 flex-1 overflow-hidden transition-[max-height] duration-300 ease-out\"\n [style.max-height]=\"computedMaxHeight()\">\n <div #contentInner>\n <ng-content />\n </div>\n\n @if (!isExpanded() && isOverflowing()) {\n <div\n class=\"pointer-events-none absolute right-0 bottom-0 left-0 transition-opacity duration-300\"\n [style]=\"blurGradientStyle()\"></div>\n }\n </div>\n\n @if (isOverflowing() && (zShowLessButton() || !isExpanded())) {\n <div class=\"z-show-more-actions mt-2 flex justify-center\">\n <button z-button [zType]=\"zButtonType()\" [zSize]=\"zButtonSize()\" [zWave]=\"zWave()\" (click)=\"toggle()\">\n <span>\n {{\n isExpanded()\n ? zShowLessLabel() || ('i18n_z_ui_show_more_collapse' | translate)\n : zShowMoreLabel() || ('i18n_z_ui_show_more_expand' | translate)\n }}\n </span>\n <z-icon [zType]=\"isExpanded() ? 'lucideChevronUp' : 'lucideChevronDown'\" zSize=\"16\" class=\"ml-1\" />\n </button>\n </div>\n }\n</div>\n", styles: [".z-show-more-content{will-change:max-height}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
108
- }
109
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZShowMoreComponent, decorators: [{
110
- type: Component,
111
- args: [{ selector: 'z-show-more', imports: [ZButtonComponent, ZIconComponent, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
112
- '[class]': 'zClasses()',
113
- }, template: "<div class=\"z-show-more flex h-full min-h-0 w-full flex-col\">\n <div\n #contentContainer\n class=\"z-show-more-content relative min-h-0 flex-1 overflow-hidden transition-[max-height] duration-300 ease-out\"\n [style.max-height]=\"computedMaxHeight()\">\n <div #contentInner>\n <ng-content />\n </div>\n\n @if (!isExpanded() && isOverflowing()) {\n <div\n class=\"pointer-events-none absolute right-0 bottom-0 left-0 transition-opacity duration-300\"\n [style]=\"blurGradientStyle()\"></div>\n }\n </div>\n\n @if (isOverflowing() && (zShowLessButton() || !isExpanded())) {\n <div class=\"z-show-more-actions mt-2 flex justify-center\">\n <button z-button [zType]=\"zButtonType()\" [zSize]=\"zButtonSize()\" [zWave]=\"zWave()\" (click)=\"toggle()\">\n <span>\n {{\n isExpanded()\n ? zShowLessLabel() || ('i18n_z_ui_show_more_collapse' | translate)\n : zShowMoreLabel() || ('i18n_z_ui_show_more_expand' | translate)\n }}\n </span>\n <z-icon [zType]=\"isExpanded() ? 'lucideChevronUp' : 'lucideChevronDown'\" zSize=\"16\" class=\"ml-1\" />\n </button>\n </div>\n }\n</div>\n", styles: [".z-show-more-content{will-change:max-height}\n"] }]
114
- }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxHeight", required: false }] }], zShowMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowMoreLabel", required: false }] }], zShowLessLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowLessLabel", required: false }] }], zShowLessButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowLessButton", required: false }] }], zButtonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zButtonType", required: false }] }], zButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zButtonSize", required: false }] }], zWave: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWave", required: false }] }], zBlurHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBlurHeight", required: false }] }], zBlurColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBlurColor", required: false }] }], zExpandChange: [{ type: i0.Output, args: ["zExpandChange"] }], _contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { isSignal: true }] }], _contentInner: [{ type: i0.ViewChild, args: ['contentInner', { isSignal: true }] }] } });
115
-
116
- /**
117
- * Generated bundle index. Do not edit.
118
- */
119
-
120
- export { ZShowMoreComponent };
121
- //# sourceMappingURL=shival99-z-ui-components-z-show-more.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"shival99-z-ui-components-z-show-more.mjs","sources":["../../../../libs/core-ui/components/z-show-more/z-show-more.component.ts","../../../../libs/core-ui/components/z-show-more/z-show-more.component.html","../../../../libs/core-ui/components/z-show-more/shival99-z-ui-components-z-show-more.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n signal,\n viewChild,\n afterNextRender,\n ViewEncapsulation,\n output,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent, type ZButtonVariants } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n selector: 'z-show-more',\n imports: [ZButtonComponent, ZIconComponent, TranslatePipe],\n standalone: true,\n templateUrl: './z-show-more.component.html',\n styleUrl: './z-show-more.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n },\n})\nexport class ZShowMoreComponent {\n private readonly _destroyRef = inject(DestroyRef);\n\n // Inputs\n public readonly class = input<ClassValue>('');\n public readonly zMaxHeight = input<number | string>(150);\n public readonly zShowMoreLabel = input<string | undefined>(undefined);\n public readonly zShowLessLabel = input<string | undefined>(undefined);\n public readonly zShowLessButton = input<boolean>(true);\n public readonly zButtonType = input<ZButtonVariants['zType']>('ghost-primary');\n public readonly zButtonSize = input<ZButtonVariants['zSize']>('sm');\n public readonly zWave = input(false, { transform: zTransform });\n public readonly zBlurHeight = input<number>(64);\n public readonly zBlurColor = input<string | undefined>(undefined);\n\n // Outputs\n public readonly zExpandChange = output<boolean>();\n\n // Queries\n private readonly _contentContainer = viewChild<ElementRef<HTMLElement>>('contentContainer');\n private readonly _contentInner = viewChild<ElementRef<HTMLElement>>('contentInner');\n\n // State\n private readonly _isExpanded = signal(false);\n private readonly _isOverflowing = signal(false);\n private readonly _scrollHeight = signal(0);\n\n // Readonly bindings for template\n protected readonly isExpanded = this._isExpanded.asReadonly();\n protected readonly isOverflowing = this._isOverflowing.asReadonly();\n\n protected readonly zClasses = computed(() => zMergeClasses('block w-full', this.class()));\n\n protected readonly computedMaxHeight = computed(() => {\n if (!this._isOverflowing()) {\n return 'none';\n }\n if (this._isExpanded()) {\n return `${this._scrollHeight()}px`;\n }\n const maxH = this.zMaxHeight();\n return typeof maxH === 'number' ? `${maxH}px` : maxH;\n });\n\n // Tạo linear gradient mờ dần xuống nền (card/page)\n protected readonly blurGradientStyle = computed(() => {\n const bg = this.zBlurColor() || 'var(--card, var(--background, #fff))';\n return {\n 'background-image': `linear-gradient(to top, ${bg} 0%, transparent 100%)`,\n height: `${this.zBlurHeight()}px`,\n };\n });\n\n constructor() {\n afterNextRender(() => {\n const innerEl = this._contentInner()?.nativeElement;\n if (!innerEl) {\n return;\n }\n\n // Kiểm tra chiều cao nội dung thực tế so với chiều cao tối đa giới hạn\n const checkOverflow = () => {\n const { scrollHeight } = innerEl;\n this._scrollHeight.set(scrollHeight);\n\n const maxH = this.zMaxHeight();\n if (typeof maxH === 'number') {\n this._isOverflowing.set(scrollHeight > maxH);\n return;\n }\n\n // Nếu zMaxHeight là string (ví dụ: '100%', 'calc(100% - 40px)')\n const contentEl = this._contentContainer()?.nativeElement;\n if (!contentEl) {\n return;\n }\n\n // Tạm thời tắt transition để đo chiều cao chính xác mà không bị ảnh hưởng bởi chuyển động\n const originalTransition = contentEl.style.transition;\n const originalMaxHeight = contentEl.style.maxHeight;\n\n contentEl.style.transition = 'none';\n contentEl.style.maxHeight = maxH;\n\n // Force reflow để trình duyệt tính toán lại layout\n const collapsedClientHeight = contentEl.clientHeight;\n\n // Khôi phục lại trạng thái ban đầu\n contentEl.style.maxHeight = originalMaxHeight;\n // Force reflow để tránh giật lag khi phục hồi transition\n void contentEl.offsetHeight;\n contentEl.style.transition = originalTransition;\n\n // Nếu phần tử đang ẩn (display: none) thì bỏ qua\n if (collapsedClientHeight === 0 && contentEl.offsetWidth === 0) {\n return;\n }\n\n this._isOverflowing.set(scrollHeight > collapsedClientHeight);\n };\n\n checkOverflow();\n\n // Sử dụng ResizeObserver để lắng nghe thay đổi kích thước của phần tử nội dung bên trong\n const resizeObserver = new ResizeObserver(() => {\n checkOverflow();\n });\n\n resizeObserver.observe(innerEl);\n\n this._destroyRef.onDestroy(() => {\n resizeObserver.disconnect();\n });\n });\n }\n\n protected toggle(): void {\n const nextState = !this._isExpanded();\n this._isExpanded.set(nextState);\n this.zExpandChange.emit(nextState);\n }\n}\n","<div class=\"z-show-more flex h-full min-h-0 w-full flex-col\">\n <div\n #contentContainer\n class=\"z-show-more-content relative min-h-0 flex-1 overflow-hidden transition-[max-height] duration-300 ease-out\"\n [style.max-height]=\"computedMaxHeight()\">\n <div #contentInner>\n <ng-content />\n </div>\n\n @if (!isExpanded() && isOverflowing()) {\n <div\n class=\"pointer-events-none absolute right-0 bottom-0 left-0 transition-opacity duration-300\"\n [style]=\"blurGradientStyle()\"></div>\n }\n </div>\n\n @if (isOverflowing() && (zShowLessButton() || !isExpanded())) {\n <div class=\"z-show-more-actions mt-2 flex justify-center\">\n <button z-button [zType]=\"zButtonType()\" [zSize]=\"zButtonSize()\" [zWave]=\"zWave()\" (click)=\"toggle()\">\n <span>\n {{\n isExpanded()\n ? zShowLessLabel() || ('i18n_z_ui_show_more_collapse' | translate)\n : zShowMoreLabel() || ('i18n_z_ui_show_more_expand' | translate)\n }}\n </span>\n <z-icon [zType]=\"isExpanded() ? 'lucideChevronUp' : 'lucideChevronDown'\" zSize=\"16\" class=\"ml-1\" />\n </button>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -1,61 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
3
- import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
4
- import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
5
- import { SkeletonComponent } from 'boneyard-js/angular';
6
-
7
- class ZSkeletonAutoComponent {
8
- class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
9
- zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
10
- zName = input('z-skeleton-auto', ...(ngDevMode ? [{ debugName: "zName" }] : []));
11
- zColor = input('#e0e0e0', ...(ngDevMode ? [{ debugName: "zColor" }] : []));
12
- zDarkColor = input('#374151', ...(ngDevMode ? [{ debugName: "zDarkColor" }] : []));
13
- zAnimate = input('shimmer', ...(ngDevMode ? [{ debugName: "zAnimate" }] : []));
14
- zWavePreset = input('legacy-strong', ...(ngDevMode ? [{ debugName: "zWavePreset" }] : []));
15
- zWaveDuration = input(1.5, ...(ngDevMode ? [{ debugName: "zWaveDuration" }] : []));
16
- zInitialBones = input(undefined, ...(ngDevMode ? [{ debugName: "zInitialBones" }] : []));
17
- zStagger = input(false, ...(ngDevMode ? [{ debugName: "zStagger" }] : []));
18
- zTransition = input(false, ...(ngDevMode ? [{ debugName: "zTransition" }] : []));
19
- zBoneClass = input('', ...(ngDevMode ? [{ debugName: "zBoneClass" }] : []));
20
- zFallbackRows = input(3, ...(ngDevMode ? [{ debugName: "zFallbackRows" }] : []));
21
- zFallbackGap = input(8, ...(ngDevMode ? [{ debugName: "zFallbackGap" }] : []));
22
- zFallbackRowHeight = input('12px', ...(ngDevMode ? [{ debugName: "zFallbackRowHeight" }] : []));
23
- zFallbackRadius = input('4px', ...(ngDevMode ? [{ debugName: "zFallbackRadius" }] : []));
24
- containerClass = computed(() => zMergeClasses('block w-full', this.class()), ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
25
- effectiveAnimate = computed(() => {
26
- if (this.zWavePreset() === 'legacy-strong') {
27
- return false;
28
- }
29
- return this.zAnimate();
30
- }, ...(ngDevMode ? [{ debugName: "effectiveAnimate" }] : []));
31
- waveDurationStyle = computed(() => {
32
- const seconds = this.zWaveDuration();
33
- if (seconds <= 0) {
34
- return '1.5s';
35
- }
36
- return `${seconds}s`;
37
- }, ...(ngDevMode ? [{ debugName: "waveDurationStyle" }] : []));
38
- resolvedBoneClass = computed(() => {
39
- const presetClass = this.zWavePreset() === 'legacy-strong' ? 'z-skeleton-auto-bone-legacy' : '';
40
- const merged = zMergeClasses(presetClass, this.zBoneClass());
41
- if (!merged) {
42
- return undefined;
43
- }
44
- return merged;
45
- }, ...(ngDevMode ? [{ debugName: "resolvedBoneClass" }] : []));
46
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonAutoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
47
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ZSkeletonAutoComponent, isStandalone: true, selector: "z-skeleton-auto", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zName: { classPropertyName: "zName", publicName: "zName", isSignal: true, isRequired: false, transformFunction: null }, zColor: { classPropertyName: "zColor", publicName: "zColor", isSignal: true, isRequired: false, transformFunction: null }, zDarkColor: { classPropertyName: "zDarkColor", publicName: "zDarkColor", isSignal: true, isRequired: false, transformFunction: null }, zAnimate: { classPropertyName: "zAnimate", publicName: "zAnimate", isSignal: true, isRequired: false, transformFunction: null }, zWavePreset: { classPropertyName: "zWavePreset", publicName: "zWavePreset", isSignal: true, isRequired: false, transformFunction: null }, zWaveDuration: { classPropertyName: "zWaveDuration", publicName: "zWaveDuration", isSignal: true, isRequired: false, transformFunction: null }, zInitialBones: { classPropertyName: "zInitialBones", publicName: "zInitialBones", isSignal: true, isRequired: false, transformFunction: null }, zStagger: { classPropertyName: "zStagger", publicName: "zStagger", isSignal: true, isRequired: false, transformFunction: null }, zTransition: { classPropertyName: "zTransition", publicName: "zTransition", isSignal: true, isRequired: false, transformFunction: null }, zBoneClass: { classPropertyName: "zBoneClass", publicName: "zBoneClass", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRows: { classPropertyName: "zFallbackRows", publicName: "zFallbackRows", isSignal: true, isRequired: false, transformFunction: null }, zFallbackGap: { classPropertyName: "zFallbackGap", publicName: "zFallbackGap", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRowHeight: { classPropertyName: "zFallbackRowHeight", publicName: "zFallbackRowHeight", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRadius: { classPropertyName: "zFallbackRadius", publicName: "zFallbackRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--z-skeleton-auto-wave-duration": "waveDurationStyle()" } }, ngImport: i0, template: "<boneyard-skeleton\n [loading]=\"zLoading()\"\n [name]=\"zName()\"\n [initialBones]=\"zInitialBones()\"\n [color]=\"zColor()\"\n [darkColor]=\"zDarkColor()\"\n [animate]=\"effectiveAnimate()\"\n [stagger]=\"zStagger()\"\n [transition]=\"zTransition()\"\n [boneClass]=\"resolvedBoneClass()\"\n [cssClass]=\"containerClass()\">\n <ng-content />\n\n <div fallback class=\"w-full\">\n <z-skeleton\n zType=\"text\"\n class=\"w-full\"\n [zRows]=\"zFallbackRows()\"\n [zGap]=\"zFallbackGap()\"\n [zHeight]=\"zFallbackRowHeight()\"\n [zRadius]=\"zFallbackRadius()\" />\n </div>\n</boneyard-skeleton>\n", styles: [":host{display:block}:host ::ng-deep .z-skeleton-auto-bone-legacy{position:relative;overflow:hidden}:host ::ng-deep .z-skeleton-auto-bone-legacy:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);animation:z-skeleton-auto-legacy-wave var(--z-skeleton-auto-wave-duration, 1.5s) infinite}:host-context(.dark) ::ng-deep .z-skeleton-auto-bone-legacy:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.24) 50%,transparent 100%)}@keyframes z-skeleton-auto-legacy-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "boneyard-skeleton", inputs: ["loading", "name", "initialBones", "color", "darkColor", "animate", "stagger", "transition", "boneClass", "cssClass", "snapshotConfig"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
48
- }
49
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonAutoComponent, decorators: [{
50
- type: Component,
51
- args: [{ selector: 'z-skeleton-auto', imports: [SkeletonComponent, ZSkeletonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
52
- '[style.--z-skeleton-auto-wave-duration]': 'waveDurationStyle()',
53
- }, template: "<boneyard-skeleton\n [loading]=\"zLoading()\"\n [name]=\"zName()\"\n [initialBones]=\"zInitialBones()\"\n [color]=\"zColor()\"\n [darkColor]=\"zDarkColor()\"\n [animate]=\"effectiveAnimate()\"\n [stagger]=\"zStagger()\"\n [transition]=\"zTransition()\"\n [boneClass]=\"resolvedBoneClass()\"\n [cssClass]=\"containerClass()\">\n <ng-content />\n\n <div fallback class=\"w-full\">\n <z-skeleton\n zType=\"text\"\n class=\"w-full\"\n [zRows]=\"zFallbackRows()\"\n [zGap]=\"zFallbackGap()\"\n [zHeight]=\"zFallbackRowHeight()\"\n [zRadius]=\"zFallbackRadius()\" />\n </div>\n</boneyard-skeleton>\n", styles: [":host{display:block}:host ::ng-deep .z-skeleton-auto-bone-legacy{position:relative;overflow:hidden}:host ::ng-deep .z-skeleton-auto-bone-legacy:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);animation:z-skeleton-auto-legacy-wave var(--z-skeleton-auto-wave-duration, 1.5s) infinite}:host-context(.dark) ::ng-deep .z-skeleton-auto-bone-legacy:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.24) 50%,transparent 100%)}@keyframes z-skeleton-auto-legacy-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
54
- }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zName: [{ type: i0.Input, args: [{ isSignal: true, alias: "zName", required: false }] }], zColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColor", required: false }] }], zDarkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDarkColor", required: false }] }], zAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimate", required: false }] }], zWavePreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWavePreset", required: false }] }], zWaveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWaveDuration", required: false }] }], zInitialBones: [{ type: i0.Input, args: [{ isSignal: true, alias: "zInitialBones", required: false }] }], zStagger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStagger", required: false }] }], zTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTransition", required: false }] }], zBoneClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBoneClass", required: false }] }], zFallbackRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRows", required: false }] }], zFallbackGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackGap", required: false }] }], zFallbackRowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRowHeight", required: false }] }], zFallbackRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRadius", required: false }] }] } });
55
-
56
- /**
57
- * Generated bundle index. Do not edit.
58
- */
59
-
60
- export { ZSkeletonAutoComponent };
61
- //# sourceMappingURL=shival99-z-ui-components-z-skeleton-auto.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"shival99-z-ui-components-z-skeleton-auto.mjs","sources":["../../../../libs/core-ui/components/z-skeleton-auto/z-skeleton-auto.component.ts","../../../../libs/core-ui/components/z-skeleton-auto/z-skeleton-auto.component.html","../../../../libs/core-ui/components/z-skeleton-auto/shival99-z-ui-components-z-skeleton-auto.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport { SkeletonComponent as BoneyardSkeletonComponent } from 'boneyard-js/angular';\nimport type { ClassValue } from 'clsx';\nimport type { ZSkeletonAutoAnimate, ZSkeletonAutoBones } from './z-skeleton-auto.types';\n\n@Component({\n selector: 'z-skeleton-auto',\n imports: [BoneyardSkeletonComponent, ZSkeletonComponent],\n standalone: true,\n templateUrl: './z-skeleton-auto.component.html',\n styleUrl: './z-skeleton-auto.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.--z-skeleton-auto-wave-duration]': 'waveDurationStyle()',\n },\n})\nexport class ZSkeletonAutoComponent {\n public readonly class = input<ClassValue>('');\n public readonly zLoading = input(false, { transform: zTransform });\n public readonly zName = input<string>('z-skeleton-auto');\n\n public readonly zColor = input<string | undefined>('#e0e0e0');\n public readonly zDarkColor = input<string | undefined>('#374151');\n public readonly zAnimate = input<ZSkeletonAutoAnimate>('shimmer');\n public readonly zWavePreset = input<'boneyard' | 'legacy-strong'>('legacy-strong');\n public readonly zWaveDuration = input<number>(1.5);\n public readonly zInitialBones = input<ZSkeletonAutoBones | undefined>(undefined);\n public readonly zStagger = input<number | boolean>(false);\n public readonly zTransition = input<number | boolean>(false);\n public readonly zBoneClass = input<string>('');\n\n public readonly zFallbackRows = input<number>(3);\n public readonly zFallbackGap = input<number>(8);\n public readonly zFallbackRowHeight = input<string>('12px');\n public readonly zFallbackRadius = input<string>('4px');\n\n protected readonly containerClass = computed(() => zMergeClasses('block w-full', this.class()));\n protected readonly effectiveAnimate = computed<ZSkeletonAutoAnimate>(() => {\n if (this.zWavePreset() === 'legacy-strong') {\n return false;\n }\n\n return this.zAnimate();\n });\n\n protected readonly waveDurationStyle = computed(() => {\n const seconds = this.zWaveDuration();\n if (seconds <= 0) {\n return '1.5s';\n }\n\n return `${seconds}s`;\n });\n\n protected readonly resolvedBoneClass = computed(() => {\n const presetClass = this.zWavePreset() === 'legacy-strong' ? 'z-skeleton-auto-bone-legacy' : '';\n const merged = zMergeClasses(presetClass, this.zBoneClass());\n if (!merged) {\n return undefined;\n }\n\n return merged;\n });\n}\n","<boneyard-skeleton\n [loading]=\"zLoading()\"\n [name]=\"zName()\"\n [initialBones]=\"zInitialBones()\"\n [color]=\"zColor()\"\n [darkColor]=\"zDarkColor()\"\n [animate]=\"effectiveAnimate()\"\n [stagger]=\"zStagger()\"\n [transition]=\"zTransition()\"\n [boneClass]=\"resolvedBoneClass()\"\n [cssClass]=\"containerClass()\">\n <ng-content />\n\n <div fallback class=\"w-full\">\n <z-skeleton\n zType=\"text\"\n class=\"w-full\"\n [zRows]=\"zFallbackRows()\"\n [zGap]=\"zFallbackGap()\"\n [zHeight]=\"zFallbackRowHeight()\"\n [zRadius]=\"zFallbackRadius()\" />\n </div>\n</boneyard-skeleton>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["BoneyardSkeletonComponent"],"mappings":";;;;;;MAkBa,sBAAsB,CAAA;AACjB,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC;IAC7B,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AAClD,IAAA,KAAK,GAAG,KAAK,CAAS,iBAAiB,iDAAC;AAExC,IAAA,MAAM,GAAG,KAAK,CAAqB,SAAS,kDAAC;AAC7C,IAAA,UAAU,GAAG,KAAK,CAAqB,SAAS,sDAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAuB,SAAS,oDAAC;AACjD,IAAA,WAAW,GAAG,KAAK,CAA+B,eAAe,uDAAC;AAClE,IAAA,aAAa,GAAG,KAAK,CAAS,GAAG,yDAAC;AAClC,IAAA,aAAa,GAAG,KAAK,CAAiC,SAAS,yDAAC;AAChE,IAAA,QAAQ,GAAG,KAAK,CAAmB,KAAK,oDAAC;AACzC,IAAA,WAAW,GAAG,KAAK,CAAmB,KAAK,uDAAC;AAC5C,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,sDAAC;AAE9B,IAAA,aAAa,GAAG,KAAK,CAAS,CAAC,yDAAC;AAChC,IAAA,YAAY,GAAG,KAAK,CAAS,CAAC,wDAAC;AAC/B,IAAA,kBAAkB,GAAG,KAAK,CAAS,MAAM,8DAAC;AAC1C,IAAA,eAAe,GAAG,KAAK,CAAS,KAAK,2DAAC;AAEnC,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,0DAAC;AAC5E,IAAA,gBAAgB,GAAG,QAAQ,CAAuB,MAAK;AACxE,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,eAAe,EAAE;AAC1C,YAAA,OAAO,KAAK;QACd;AAEA,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE;AACxB,IAAA,CAAC,4DAAC;AAEiB,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;AACnD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE;AACpC,QAAA,IAAI,OAAO,IAAI,CAAC,EAAE;AAChB,YAAA,OAAO,MAAM;QACf;QAEA,OAAO,CAAA,EAAG,OAAO,CAAA,CAAA,CAAG;AACtB,IAAA,CAAC,6DAAC;AAEiB,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAK;AACnD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,eAAe,GAAG,6BAA6B,GAAG,EAAE;QAC/F,MAAM,MAAM,GAAG,aAAa,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;QAC5D,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,OAAO,SAAS;QAClB;AAEA,QAAA,OAAO,MAAM;AACf,IAAA,CAAC,6DAAC;uGA9CS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uCAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBnC,ioBAuBA,EAAA,MAAA,EAAA,CAAA,wnBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDdYA,iBAAyB,gNAAE,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,OAAA,EAAA,MAAA,EAAA,WAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAS5C,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAXlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,OAAA,EAClB,CAACA,iBAAyB,EAAE,kBAAkB,CAAC,EAAA,UAAA,EAC5C,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,yCAAyC,EAAE,qBAAqB;AACjE,qBAAA,EAAA,QAAA,EAAA,ioBAAA,EAAA,MAAA,EAAA,CAAA,wnBAAA,CAAA,EAAA;;;AEhBH;;AAEG;;;;"}