@shival99/z-ui 2.1.27 → 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 (69) hide show
  1. package/fesm2022/shival99-z-ui-components-z-select.mjs +1 -1
  2. package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs +0 -1079
  5. package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs.map +0 -1
  6. package/fesm2022/shival99-z-ui-components-z-drawer.mjs +0 -742
  7. package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +0 -1
  8. package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs +0 -58
  9. package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs.map +0 -1
  10. package/fesm2022/shival99-z-ui-components-z-editor.mjs +0 -1750
  11. package/fesm2022/shival99-z-ui-components-z-editor.mjs.map +0 -1
  12. package/fesm2022/shival99-z-ui-components-z-gallery.mjs +0 -2419
  13. package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +0 -1
  14. package/fesm2022/shival99-z-ui-components-z-kanban.mjs +0 -981
  15. package/fesm2022/shival99-z-ui-components-z-kanban.mjs.map +0 -1
  16. package/fesm2022/shival99-z-ui-components-z-marquee.mjs +0 -70
  17. package/fesm2022/shival99-z-ui-components-z-marquee.mjs.map +0 -1
  18. package/fesm2022/shival99-z-ui-components-z-media-player.mjs +0 -668
  19. package/fesm2022/shival99-z-ui-components-z-media-player.mjs.map +0 -1
  20. package/fesm2022/shival99-z-ui-components-z-menu.mjs +0 -843
  21. package/fesm2022/shival99-z-ui-components-z-menu.mjs.map +0 -1
  22. package/fesm2022/shival99-z-ui-components-z-metric-card.mjs +0 -128
  23. package/fesm2022/shival99-z-ui-components-z-metric-card.mjs.map +0 -1
  24. package/fesm2022/shival99-z-ui-components-z-pagination.mjs +0 -158
  25. package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map +0 -1
  26. package/fesm2022/shival99-z-ui-components-z-qrcode.mjs +0 -383
  27. package/fesm2022/shival99-z-ui-components-z-qrcode.mjs.map +0 -1
  28. package/fesm2022/shival99-z-ui-components-z-radio.mjs +0 -167
  29. package/fesm2022/shival99-z-ui-components-z-radio.mjs.map +0 -1
  30. package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs +0 -131
  31. package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs.map +0 -1
  32. package/fesm2022/shival99-z-ui-components-z-show-more.mjs +0 -121
  33. package/fesm2022/shival99-z-ui-components-z-show-more.mjs.map +0 -1
  34. package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs +0 -61
  35. package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs.map +0 -1
  36. package/fesm2022/shival99-z-ui-components-z-steps.mjs +0 -396
  37. package/fesm2022/shival99-z-ui-components-z-steps.mjs.map +0 -1
  38. package/fesm2022/shival99-z-ui-components-z-table.mjs +0 -10508
  39. package/fesm2022/shival99-z-ui-components-z-table.mjs.map +0 -1
  40. package/fesm2022/shival99-z-ui-components-z-tabs.mjs +0 -507
  41. package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +0 -1
  42. package/fesm2022/shival99-z-ui-components-z-tags.mjs +0 -349
  43. package/fesm2022/shival99-z-ui-components-z-tags.mjs.map +0 -1
  44. package/fesm2022/shival99-z-ui-components-z-timeline.mjs +0 -237
  45. package/fesm2022/shival99-z-ui-components-z-timeline.mjs.map +0 -1
  46. package/fesm2022/shival99-z-ui-components-z-upload.mjs +0 -523
  47. package/fesm2022/shival99-z-ui-components-z-upload.mjs.map +0 -1
  48. package/types/shival99-z-ui-components-z-autocomplete.d.ts +0 -290
  49. package/types/shival99-z-ui-components-z-drawer.d.ts +0 -266
  50. package/types/shival99-z-ui-components-z-dropdown-menu.d.ts +0 -54
  51. package/types/shival99-z-ui-components-z-editor.d.ts +0 -337
  52. package/types/shival99-z-ui-components-z-gallery.d.ts +0 -402
  53. package/types/shival99-z-ui-components-z-kanban.d.ts +0 -237
  54. package/types/shival99-z-ui-components-z-marquee.d.ts +0 -35
  55. package/types/shival99-z-ui-components-z-media-player.d.ts +0 -124
  56. package/types/shival99-z-ui-components-z-menu.d.ts +0 -222
  57. package/types/shival99-z-ui-components-z-metric-card.d.ts +0 -67
  58. package/types/shival99-z-ui-components-z-pagination.d.ts +0 -55
  59. package/types/shival99-z-ui-components-z-qrcode.d.ts +0 -76
  60. package/types/shival99-z-ui-components-z-radio.d.ts +0 -69
  61. package/types/shival99-z-ui-components-z-scrollarea.d.ts +0 -46
  62. package/types/shival99-z-ui-components-z-show-more.d.ts +0 -36
  63. package/types/shival99-z-ui-components-z-skeleton-auto.d.ts +0 -35
  64. package/types/shival99-z-ui-components-z-steps.d.ts +0 -106
  65. package/types/shival99-z-ui-components-z-table.d.ts +0 -1924
  66. package/types/shival99-z-ui-components-z-tabs.d.ts +0 -92
  67. package/types/shival99-z-ui-components-z-tags.d.ts +0 -128
  68. package/types/shival99-z-ui-components-z-timeline.d.ts +0 -71
  69. 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":"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"}