@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.
- package/package.json +1 -1
- package/types/shival99-z-ui-components-z-select.d.ts +1 -1
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs +0 -1079
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +0 -742
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs +0 -58
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-editor.mjs +0 -1750
- package/fesm2022/shival99-z-ui-components-z-editor.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs +0 -2419
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs +0 -981
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-marquee.mjs +0 -70
- package/fesm2022/shival99-z-ui-components-z-marquee.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs +0 -668
- package/fesm2022/shival99-z-ui-components-z-media-player.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-menu.mjs +0 -843
- package/fesm2022/shival99-z-ui-components-z-menu.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-metric-card.mjs +0 -128
- package/fesm2022/shival99-z-ui-components-z-metric-card.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs +0 -158
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-qrcode.mjs +0 -383
- package/fesm2022/shival99-z-ui-components-z-qrcode.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-radio.mjs +0 -167
- package/fesm2022/shival99-z-ui-components-z-radio.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs +0 -131
- package/fesm2022/shival99-z-ui-components-z-scrollarea.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-show-more.mjs +0 -121
- package/fesm2022/shival99-z-ui-components-z-show-more.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs +0 -61
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-steps.mjs +0 -396
- package/fesm2022/shival99-z-ui-components-z-steps.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-table.mjs +0 -10508
- package/fesm2022/shival99-z-ui-components-z-table.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs +0 -507
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-tags.mjs +0 -349
- package/fesm2022/shival99-z-ui-components-z-tags.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs +0 -237
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs.map +0 -1
- package/fesm2022/shival99-z-ui-components-z-upload.mjs +0 -523
- package/fesm2022/shival99-z-ui-components-z-upload.mjs.map +0 -1
- package/types/shival99-z-ui-components-z-autocomplete.d.ts +0 -290
- package/types/shival99-z-ui-components-z-drawer.d.ts +0 -266
- package/types/shival99-z-ui-components-z-dropdown-menu.d.ts +0 -54
- package/types/shival99-z-ui-components-z-editor.d.ts +0 -337
- package/types/shival99-z-ui-components-z-gallery.d.ts +0 -402
- package/types/shival99-z-ui-components-z-kanban.d.ts +0 -237
- package/types/shival99-z-ui-components-z-marquee.d.ts +0 -35
- package/types/shival99-z-ui-components-z-media-player.d.ts +0 -124
- package/types/shival99-z-ui-components-z-menu.d.ts +0 -222
- package/types/shival99-z-ui-components-z-metric-card.d.ts +0 -67
- package/types/shival99-z-ui-components-z-pagination.d.ts +0 -55
- package/types/shival99-z-ui-components-z-qrcode.d.ts +0 -76
- package/types/shival99-z-ui-components-z-radio.d.ts +0 -69
- package/types/shival99-z-ui-components-z-scrollarea.d.ts +0 -46
- package/types/shival99-z-ui-components-z-show-more.d.ts +0 -36
- package/types/shival99-z-ui-components-z-skeleton-auto.d.ts +0 -35
- package/types/shival99-z-ui-components-z-steps.d.ts +0 -106
- package/types/shival99-z-ui-components-z-table.d.ts +0 -1924
- package/types/shival99-z-ui-components-z-tabs.d.ts +0 -92
- package/types/shival99-z-ui-components-z-tags.d.ts +0 -128
- package/types/shival99-z-ui-components-z-timeline.d.ts +0 -71
- 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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"}
|