@shival99/z-ui 1.7.21 → 1.7.22
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/fesm2022/shival99-z-ui-components-z-button.mjs +0 -1
- package/fesm2022/shival99-z-ui-components-z-button.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-modal.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-modal.mjs.map +1 -1
- package/package.json +1 -1
- package/types/shival99-z-ui-components-z-calendar.d.ts +4 -4
- package/types/shival99-z-ui-components-z-editor.d.ts +1 -1
- package/types/shival99-z-ui-components-z-select.d.ts +1 -1
- package/types/shival99-z-ui-components-z-upload.d.ts +3 -3
|
@@ -134,7 +134,6 @@ class ZButtonComponent {
|
|
|
134
134
|
const waveEl = document.createElement('span');
|
|
135
135
|
waveEl.className = 'z-animate-wave';
|
|
136
136
|
el.appendChild(waveEl);
|
|
137
|
-
// Raise z-index temporarily so wave effect shows above adjacent buttons in group
|
|
138
137
|
el.classList.add('z-wave-active');
|
|
139
138
|
waveEl.addEventListener('animationend', () => {
|
|
140
139
|
waveEl.remove();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-button.mjs","sources":["../../../../libs/core-ui/components/z-button/z-button.variants.ts","../../../../libs/core-ui/components/z-button/z-button.component.ts","../../../../libs/core-ui/components/z-button/z-button.component.html","../../../../libs/core-ui/components/z-button/shival99-z-ui-components-z-button.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zButtonVariants = cva(\n \"cursor-pointer relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[6px] text-sm font-[450] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n zType: {\n default:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n primary:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 [--z-wave-color:var(--color-secondary-foreground)]',\n destructive:\n 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 [--z-wave-color:var(--color-destructive)]',\n success:\n 'bg-green-600 text-white shadow-xs hover:bg-green-700 focus-visible:ring-green-500/20 dark:bg-green-600 dark:hover:bg-green-700 [--z-wave-color:var(--color-green-600)]',\n info: 'bg-blue-600 text-white shadow-xs hover:bg-blue-700 focus-visible:ring-blue-500/20 dark:bg-blue-600 dark:hover:bg-blue-700 [--z-wave-color:var(--color-blue-600)]',\n warning:\n 'bg-amber-500 text-white shadow-xs hover:bg-amber-600 focus-visible:ring-amber-500/20 dark:bg-amber-500 dark:hover:bg-amber-600 [--z-wave-color:var(--color-amber-500)]',\n error:\n 'bg-red-600 text-white shadow-xs hover:bg-red-700 focus-visible:ring-red-500/20 dark:bg-red-600 dark:hover:bg-red-700 [--z-wave-color:var(--color-red-600)]',\n\n outline:\n 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 [--z-wave-color:var(--color-foreground)]',\n 'outline-primary':\n 'border border-primary text-primary bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground focus-visible:ring-primary/20 [--z-wave-color:var(--color-primary)]',\n 'outline-secondary':\n 'border border-secondary-foreground/20 text-secondary-foreground bg-transparent shadow-xs hover:bg-secondary hover:text-secondary-foreground focus-visible:ring-secondary/20 [--z-wave-color:var(--color-secondary-foreground)]',\n 'outline-success':\n 'border border-green-600 text-green-600 bg-transparent shadow-xs hover:bg-green-600 hover:text-white focus-visible:ring-green-500/20 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 [--z-wave-color:var(--color-green-600)]',\n 'outline-info':\n 'border border-blue-600 text-blue-600 bg-transparent shadow-xs hover:bg-blue-600 hover:text-white focus-visible:ring-blue-500/20 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-600 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning':\n 'border border-amber-500 text-amber-600 bg-transparent shadow-xs hover:bg-amber-500 hover:text-white focus-visible:ring-amber-500/20 dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-500 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error':\n 'border border-red-600 text-red-600 bg-transparent shadow-xs hover:bg-red-600 hover:text-white focus-visible:ring-red-500/20 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-600 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive':\n 'border border-destructive text-destructive bg-transparent shadow-xs hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 [--z-wave-color:var(--color-destructive)]',\n 'outline-success-secondary':\n 'border bg-background shadow-xs hover:bg-green-600/10 hover:text-green-600 hover:border-green-600 dark:bg-input/30 dark:border-input dark:hover:bg-green-500/20 dark:hover:text-green-500 dark:hover:border-green-500 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-secondary':\n 'border bg-background shadow-xs hover:bg-blue-600/10 hover:text-blue-600 hover:border-blue-600 dark:bg-input/30 dark:border-input dark:hover:bg-blue-500/20 dark:hover:text-blue-500 dark:hover:border-blue-500 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-secondary':\n 'border bg-background shadow-xs hover:bg-amber-500/10 hover:text-amber-600 hover:border-amber-500 dark:bg-input/30 dark:border-input dark:hover:bg-amber-400/20 dark:hover:text-amber-400 dark:hover:border-amber-400 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-secondary':\n 'border bg-background shadow-xs hover:bg-red-600/10 hover:text-red-600 hover:border-red-600 dark:bg-input/30 dark:border-input dark:hover:bg-red-500/20 dark:hover:text-red-500 dark:hover:border-red-500 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-secondary':\n 'border bg-background shadow-xs hover:bg-destructive/10 hover:text-destructive hover:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-destructive/20 dark:hover:border-destructive [--z-wave-color:var(--color-destructive)]',\n 'outline-primary-secondary':\n 'border bg-background shadow-xs hover:bg-primary/10 hover:text-primary hover:border-primary dark:bg-input/30 dark:border-input dark:hover:bg-primary/20 dark:hover:border-primary [--z-wave-color:var(--color-primary)]',\n\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 [--z-wave-color:var(--color-foreground)]',\n 'ghost-primary':\n 'text-primary hover:bg-primary/10 dark:hover:bg-primary/20 [--z-wave-color:var(--color-primary)]',\n 'ghost-success':\n 'text-green-600 hover:bg-green-600/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'ghost-info':\n 'text-blue-600 hover:bg-blue-600/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'ghost-warning':\n 'text-amber-600 hover:bg-amber-500/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'ghost-error':\n 'text-red-600 hover:bg-red-600/10 dark:text-red-500 dark:hover:bg-red-500/20 [--z-wave-color:var(--color-red-600)]',\n 'ghost-destructive':\n 'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 [--z-wave-color:var(--color-destructive)]',\n\n subtle:\n 'bg-accent text-accent-foreground hover:bg-accent/80 dark:bg-accent/50 dark:hover:bg-accent/70 [--z-wave-color:var(--color-foreground)]',\n\n link: 'text-primary underline-offset-4 hover:underline',\n },\n zSize: {\n default: 'h-9 px-3 py-2 [&[z-icon-only]]:size-9 [&[z-icon-only]]:p-0',\n xs: 'h-7 px-3 py-1 [&[z-icon-only]]:size-7 [&[z-icon-only]]:p-0',\n sm: 'h-8 rounded-[6px] gap-1.5 px-3 [&[z-icon-only]]:size-8 [&[z-icon-only]]:p-0',\n lg: 'h-10 rounded-[6px] px-6 [&[z-icon-only]]:size-10 [&[z-icon-only]]:p-0',\n xl: 'h-12 rounded-lg px-8 text-base [&[z-icon-only]]:size-12 [&[z-icon-only]]:p-0',\n },\n zShape: {\n default: 'rounded-[6px]',\n circle: 'rounded-full',\n square: 'rounded-none',\n },\n zLoading: {\n true: 'opacity-50 pointer-events-none',\n },\n zDisabled: {\n true: 'opacity-50 pointer-events-none',\n },\n },\n defaultVariants: {\n zType: 'default',\n zSize: 'default',\n zShape: 'default',\n },\n }\n);\nexport type ZButtonVariants = VariantProps<typeof zButtonVariants>;\n","import {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n signal,\n ViewEncapsulation,\n type OnDestroy,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { type ZIconVariants, type ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { zButtonVariants, type ZButtonVariants } from './z-button.variants';\n\n@Component({\n selector: 'z-button, button[z-button], a[z-button]',\n imports: [ZIconComponent, TranslatePipe],\n standalone: true,\n templateUrl: './z-button.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n '[attr.z-icon-only]': 'zIconOnly() || null',\n '(click)': 'onWaveClick()',\n },\n exportAs: 'zButton',\n})\nexport class ZButtonComponent implements OnDestroy {\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZButtonVariants['zType']>('default');\n public readonly zSize = input<ZButtonVariants['zSize']>('default');\n public readonly zShape = input<ZButtonVariants['zShape']>('default');\n public readonly zLabel = input<string>('');\n public readonly zLoading = input(false, { transform: zTransform });\n public readonly zDisabled = input(false);\n public readonly zTypeIcon = input<ZIcon | undefined>(undefined);\n public readonly zSizeIcon = input<ZIconVariants['zSize']>('20');\n public readonly zStrokeWidthIcon = input<number>(2);\n public readonly zWave = input(true, { transform: zTransform });\n\n private readonly _zIconOnlyState = signal(false);\n private _mutationObserver: MutationObserver | null = null;\n\n protected readonly zIconOnly = this._zIconOnlyState.asReadonly();\n protected readonly zClasses = computed(() =>\n zMergeClasses(\n zButtonVariants({\n zType: this.zType(),\n zSize: this.zSize(),\n zShape: this.zShape(),\n zLoading: this.zLoading(),\n zDisabled: this.zDisabled(),\n }),\n this.class()\n )\n );\n\n constructor() {\n afterNextRender(() => {\n const check = () => {\n const el = this._elementRef.nativeElement;\n const hasIcon = el.querySelector('z-icon, [z-icon]') !== null;\n const children = Array.from<Node>(el.childNodes);\n const hasText = children.some(node => {\n if (node.nodeType === 3) {\n return node.textContent?.trim() !== '';\n }\n\n if (node.nodeType === 1) {\n const element = node as HTMLElement;\n if (element.matches('z-icon, [z-icon]')) {\n return false;\n }\n\n return element.textContent?.trim() !== '';\n }\n\n return false;\n });\n\n this._zIconOnlyState.set(hasIcon && !hasText);\n };\n\n check();\n this._mutationObserver = new MutationObserver(check);\n this._mutationObserver.observe(this._elementRef.nativeElement, {\n childList: true,\n characterData: true,\n subtree: true,\n });\n });\n }\n\n ngOnDestroy(): void {\n if (this._mutationObserver) {\n this._mutationObserver.disconnect();\n this._mutationObserver = null;\n }\n }\n\n protected onWaveClick(): void {\n const type = this.zType();\n if (!this.zWave() || this.zLoading() || type === 'link') {\n return;\n }\n\n const el = this._elementRef.nativeElement;\n const waveEl = document.createElement('span');\n waveEl.className = 'z-animate-wave';\n el.appendChild(waveEl);\n\n // Raise z-index temporarily so wave effect shows above adjacent buttons in group\n el.classList.add('z-wave-active');\n\n waveEl.addEventListener(\n 'animationend',\n () => {\n waveEl.remove();\n el.classList.remove('z-wave-active');\n },\n { once: true }\n );\n }\n}\n","@if (zTypeIcon() && !zLoading()) {\n <i z-icon [zType]=\"zTypeIcon() || 'lucideLoader'\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span>{{ zLabel() | translate }}</span>\n} @else {\n <ng-content />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shival99-z-ui-components-z-button.mjs","sources":["../../../../libs/core-ui/components/z-button/z-button.variants.ts","../../../../libs/core-ui/components/z-button/z-button.component.ts","../../../../libs/core-ui/components/z-button/z-button.component.html","../../../../libs/core-ui/components/z-button/shival99-z-ui-components-z-button.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zButtonVariants = cva(\n \"cursor-pointer relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[6px] text-sm font-[450] select-none transition-[background-color,border-color,color,box-shadow,opacity] duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n zType: {\n default:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n primary:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 [--z-wave-color:var(--color-primary)]',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 [--z-wave-color:var(--color-secondary-foreground)]',\n destructive:\n 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 [--z-wave-color:var(--color-destructive)]',\n success:\n 'bg-green-600 text-white shadow-xs hover:bg-green-700 focus-visible:ring-green-500/20 dark:bg-green-600 dark:hover:bg-green-700 [--z-wave-color:var(--color-green-600)]',\n info: 'bg-blue-600 text-white shadow-xs hover:bg-blue-700 focus-visible:ring-blue-500/20 dark:bg-blue-600 dark:hover:bg-blue-700 [--z-wave-color:var(--color-blue-600)]',\n warning:\n 'bg-amber-500 text-white shadow-xs hover:bg-amber-600 focus-visible:ring-amber-500/20 dark:bg-amber-500 dark:hover:bg-amber-600 [--z-wave-color:var(--color-amber-500)]',\n error:\n 'bg-red-600 text-white shadow-xs hover:bg-red-700 focus-visible:ring-red-500/20 dark:bg-red-600 dark:hover:bg-red-700 [--z-wave-color:var(--color-red-600)]',\n\n outline:\n 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 [--z-wave-color:var(--color-foreground)]',\n 'outline-primary':\n 'border border-primary text-primary bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground focus-visible:ring-primary/20 [--z-wave-color:var(--color-primary)]',\n 'outline-secondary':\n 'border border-secondary-foreground/20 text-secondary-foreground bg-transparent shadow-xs hover:bg-secondary hover:text-secondary-foreground focus-visible:ring-secondary/20 [--z-wave-color:var(--color-secondary-foreground)]',\n 'outline-success':\n 'border border-green-600 text-green-600 bg-transparent shadow-xs hover:bg-green-600 hover:text-white focus-visible:ring-green-500/20 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-600 [--z-wave-color:var(--color-green-600)]',\n 'outline-info':\n 'border border-blue-600 text-blue-600 bg-transparent shadow-xs hover:bg-blue-600 hover:text-white focus-visible:ring-blue-500/20 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-600 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning':\n 'border border-amber-500 text-amber-600 bg-transparent shadow-xs hover:bg-amber-500 hover:text-white focus-visible:ring-amber-500/20 dark:border-amber-400 dark:text-amber-400 dark:hover:bg-amber-500 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error':\n 'border border-red-600 text-red-600 bg-transparent shadow-xs hover:bg-red-600 hover:text-white focus-visible:ring-red-500/20 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-600 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive':\n 'border border-destructive text-destructive bg-transparent shadow-xs hover:bg-destructive hover:text-white focus-visible:ring-destructive/20 [--z-wave-color:var(--color-destructive)]',\n 'outline-success-secondary':\n 'border bg-background shadow-xs hover:bg-green-600/10 hover:text-green-600 hover:border-green-600 dark:bg-input/30 dark:border-input dark:hover:bg-green-500/20 dark:hover:text-green-500 dark:hover:border-green-500 [--z-wave-color:var(--color-green-600)]',\n 'outline-info-secondary':\n 'border bg-background shadow-xs hover:bg-blue-600/10 hover:text-blue-600 hover:border-blue-600 dark:bg-input/30 dark:border-input dark:hover:bg-blue-500/20 dark:hover:text-blue-500 dark:hover:border-blue-500 [--z-wave-color:var(--color-blue-600)]',\n 'outline-warning-secondary':\n 'border bg-background shadow-xs hover:bg-amber-500/10 hover:text-amber-600 hover:border-amber-500 dark:bg-input/30 dark:border-input dark:hover:bg-amber-400/20 dark:hover:text-amber-400 dark:hover:border-amber-400 [--z-wave-color:var(--color-amber-500)]',\n 'outline-error-secondary':\n 'border bg-background shadow-xs hover:bg-red-600/10 hover:text-red-600 hover:border-red-600 dark:bg-input/30 dark:border-input dark:hover:bg-red-500/20 dark:hover:text-red-500 dark:hover:border-red-500 [--z-wave-color:var(--color-red-600)]',\n 'outline-destructive-secondary':\n 'border bg-background shadow-xs hover:bg-destructive/10 hover:text-destructive hover:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-destructive/20 dark:hover:border-destructive [--z-wave-color:var(--color-destructive)]',\n 'outline-primary-secondary':\n 'border bg-background shadow-xs hover:bg-primary/10 hover:text-primary hover:border-primary dark:bg-input/30 dark:border-input dark:hover:bg-primary/20 dark:hover:border-primary [--z-wave-color:var(--color-primary)]',\n\n ghost:\n 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 [--z-wave-color:var(--color-foreground)]',\n 'ghost-primary':\n 'text-primary hover:bg-primary/10 dark:hover:bg-primary/20 [--z-wave-color:var(--color-primary)]',\n 'ghost-success':\n 'text-green-600 hover:bg-green-600/10 dark:text-green-500 dark:hover:bg-green-500/20 [--z-wave-color:var(--color-green-600)]',\n 'ghost-info':\n 'text-blue-600 hover:bg-blue-600/10 dark:text-blue-500 dark:hover:bg-blue-500/20 [--z-wave-color:var(--color-blue-600)]',\n 'ghost-warning':\n 'text-amber-600 hover:bg-amber-500/10 dark:text-amber-400 dark:hover:bg-amber-400/20 [--z-wave-color:var(--color-amber-500)]',\n 'ghost-error':\n 'text-red-600 hover:bg-red-600/10 dark:text-red-500 dark:hover:bg-red-500/20 [--z-wave-color:var(--color-red-600)]',\n 'ghost-destructive':\n 'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 [--z-wave-color:var(--color-destructive)]',\n\n subtle:\n 'bg-accent text-accent-foreground hover:bg-accent/80 dark:bg-accent/50 dark:hover:bg-accent/70 [--z-wave-color:var(--color-foreground)]',\n\n link: 'text-primary underline-offset-4 hover:underline',\n },\n zSize: {\n default: 'h-9 px-3 py-2 [&[z-icon-only]]:size-9 [&[z-icon-only]]:p-0',\n xs: 'h-7 px-3 py-1 [&[z-icon-only]]:size-7 [&[z-icon-only]]:p-0',\n sm: 'h-8 rounded-[6px] gap-1.5 px-3 [&[z-icon-only]]:size-8 [&[z-icon-only]]:p-0',\n lg: 'h-10 rounded-[6px] px-6 [&[z-icon-only]]:size-10 [&[z-icon-only]]:p-0',\n xl: 'h-12 rounded-lg px-8 text-base [&[z-icon-only]]:size-12 [&[z-icon-only]]:p-0',\n },\n zShape: {\n default: 'rounded-[6px]',\n circle: 'rounded-full',\n square: 'rounded-none',\n },\n zLoading: {\n true: 'opacity-50 pointer-events-none',\n },\n zDisabled: {\n true: 'opacity-50 pointer-events-none',\n },\n },\n defaultVariants: {\n zType: 'default',\n zSize: 'default',\n zShape: 'default',\n },\n }\n);\nexport type ZButtonVariants = VariantProps<typeof zButtonVariants>;\n","import {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n signal,\n ViewEncapsulation,\n type OnDestroy,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { type ZIconVariants, type ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { zButtonVariants, type ZButtonVariants } from './z-button.variants';\n\n@Component({\n selector: 'z-button, button[z-button], a[z-button]',\n imports: [ZIconComponent, TranslatePipe],\n standalone: true,\n templateUrl: './z-button.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n '[attr.z-icon-only]': 'zIconOnly() || null',\n '(click)': 'onWaveClick()',\n },\n exportAs: 'zButton',\n})\nexport class ZButtonComponent implements OnDestroy {\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZButtonVariants['zType']>('default');\n public readonly zSize = input<ZButtonVariants['zSize']>('default');\n public readonly zShape = input<ZButtonVariants['zShape']>('default');\n public readonly zLabel = input<string>('');\n public readonly zLoading = input(false, { transform: zTransform });\n public readonly zDisabled = input(false);\n public readonly zTypeIcon = input<ZIcon | undefined>(undefined);\n public readonly zSizeIcon = input<ZIconVariants['zSize']>('20');\n public readonly zStrokeWidthIcon = input<number>(2);\n public readonly zWave = input(true, { transform: zTransform });\n\n private readonly _zIconOnlyState = signal(false);\n private _mutationObserver: MutationObserver | null = null;\n\n protected readonly zIconOnly = this._zIconOnlyState.asReadonly();\n protected readonly zClasses = computed(() =>\n zMergeClasses(\n zButtonVariants({\n zType: this.zType(),\n zSize: this.zSize(),\n zShape: this.zShape(),\n zLoading: this.zLoading(),\n zDisabled: this.zDisabled(),\n }),\n this.class()\n )\n );\n\n constructor() {\n afterNextRender(() => {\n const check = () => {\n const el = this._elementRef.nativeElement;\n const hasIcon = el.querySelector('z-icon, [z-icon]') !== null;\n const children = Array.from<Node>(el.childNodes);\n const hasText = children.some(node => {\n if (node.nodeType === 3) {\n return node.textContent?.trim() !== '';\n }\n\n if (node.nodeType === 1) {\n const element = node as HTMLElement;\n if (element.matches('z-icon, [z-icon]')) {\n return false;\n }\n\n return element.textContent?.trim() !== '';\n }\n\n return false;\n });\n\n this._zIconOnlyState.set(hasIcon && !hasText);\n };\n\n check();\n this._mutationObserver = new MutationObserver(check);\n this._mutationObserver.observe(this._elementRef.nativeElement, {\n childList: true,\n characterData: true,\n subtree: true,\n });\n });\n }\n\n ngOnDestroy(): void {\n if (this._mutationObserver) {\n this._mutationObserver.disconnect();\n this._mutationObserver = null;\n }\n }\n\n protected onWaveClick(): void {\n const type = this.zType();\n if (!this.zWave() || this.zLoading() || type === 'link') {\n return;\n }\n\n const el = this._elementRef.nativeElement;\n const waveEl = document.createElement('span');\n waveEl.className = 'z-animate-wave';\n el.appendChild(waveEl);\n el.classList.add('z-wave-active');\n waveEl.addEventListener(\n 'animationend',\n () => {\n waveEl.remove();\n el.classList.remove('z-wave-active');\n },\n { once: true }\n );\n }\n}\n","@if (zTypeIcon() && !zLoading()) {\n <i z-icon [zType]=\"zTypeIcon() || 'lucideLoader'\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"zStrokeWidthIcon()\"></i>\n}\n@if (zLoading()) {\n <i z-icon zType=\"lucideLoader\" class=\"z-animate-spin\" [zSize]=\"zSizeIcon()\" [zStrokeWidth]=\"2.8\"></i>\n}\n@if (zLabel()) {\n <span>{{ zLabel() | translate }}</span>\n} @else {\n <ng-content />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -477,7 +477,7 @@ class ZDrawerComponent extends BasePortalOutlet {
|
|
|
477
477
|
}
|
|
478
478
|
}
|
|
479
479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
480
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZDrawerComponent, isStandalone: true, selector: "z-drawer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zPlacement: { classPropertyName: "zPlacement", publicName: "zPlacement", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zShadow: { classPropertyName: "zShadow", publicName: "zShadow", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnOk: "zOnOk", zOnCancel: "zOnCancel", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()", "style.height": "effectiveHeight()", "attr.data-placement": "effectivePlacement()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZDrawerHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZDrawerContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZDrawerFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zDrawer"], usesInheritance: true, ngImport: i0, template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n @defer (when !effectiveContentLoading()) {\n @if (customHeader(); as headerDir) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex items-start justify-between px-4\">\n <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n </div>\n </header>\n } @else if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\">\n {{ title }}\n </h4>\n }\n }\n }\n @if (effectiveDescription(); as description) {\n @switch (description | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(description)\" />\n }\n @case ('html') {\n <p\n data-testid=\"z-drawer-description\"\n class=\"text-muted-foreground m-0 mt-1 text-sm\"\n [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n }\n @default {\n <p data-testid=\"z-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n {{ $any(description) | translate }}\n </p>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n class=\"-mt-1 -mr-2 shrink-0\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n @if (customContent(); as contentDir) {\n <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n } @else {\n <ng-content />\n }\n </main>\n </ng-scrollbar>\n\n @if (customFooter(); as footerDir) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n </div>\n </footer>\n } @else if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n @defer (when !effectiveContentLoading()) {\n @if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"$any(title) | translate\">\n {{ $any(title) | translate }}\n </h4>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n <ng-template cdkPortalOutlet />\n\n @if (isStringContent()) {\n <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n }\n </main>\n </ng-scrollbar>\n\n @if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n @if (config.zCancelIcon) {\n <z-icon [zType]=\"config.zCancelIcon\" />\n }\n {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n @if (config.zOkIcon && !effectiveLoading()) {\n <z-icon [zType]=\"config.zOkIcon\" />\n }\n {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe], () => [i1.CdkPortalOutlet, NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe]] });
|
|
480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZDrawerComponent, isStandalone: true, selector: "z-drawer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zPlacement: { classPropertyName: "zPlacement", publicName: "zPlacement", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zShadow: { classPropertyName: "zShadow", publicName: "zShadow", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnOk: "zOnOk", zOnCancel: "zOnCancel", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()", "style.height": "effectiveHeight()", "attr.data-placement": "effectivePlacement()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZDrawerHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZDrawerContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZDrawerFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zDrawer"], usesInheritance: true, ngImport: i0, template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n @defer (when !effectiveContentLoading()) {\n @if (customHeader(); as headerDir) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex items-start justify-between px-4\">\n <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n </div>\n </header>\n } @else if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"$any(title) | translate\">\n {{ $any(title) | translate }}\n </h4>\n }\n }\n }\n @if (effectiveDescription(); as description) {\n @switch (description | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(description)\" />\n }\n @case ('html') {\n <p\n data-testid=\"z-drawer-description\"\n class=\"text-muted-foreground m-0 mt-1 text-sm\"\n [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n }\n @default {\n <p data-testid=\"z-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n {{ $any(description) | translate }}\n </p>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n class=\"-mt-1 -mr-2 shrink-0\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n @if (customContent(); as contentDir) {\n <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n } @else {\n <ng-content />\n }\n </main>\n </ng-scrollbar>\n\n @if (customFooter(); as footerDir) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n </div>\n </footer>\n } @else if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n @defer (when !effectiveContentLoading()) {\n @if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"$any(title) | translate\">\n {{ $any(title) | translate }}\n </h4>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n <ng-template cdkPortalOutlet />\n\n @if (isStringContent()) {\n <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n }\n </main>\n </ng-scrollbar>\n\n @if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n @if (config.zCancelIcon) {\n <z-icon [zType]=\"config.zCancelIcon\" />\n }\n {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n @if (config.zOkIcon && !effectiveLoading()) {\n <z-icon [zType]=\"config.zOkIcon\" />\n }\n {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe], () => [i1.CdkPortalOutlet, NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe]] });
|
|
481
481
|
}
|
|
482
482
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ngImport: i0, type: ZDrawerComponent, resolveDeferredDeps: () => [import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe)], resolveMetadata: (ZButtonComponent, ZIconComponent, ZTooltipDirective, NgScrollbar, CdkScrollable, ZContentTypePipe, ZSafeHtmlPipe) => ({ decorators: [{
|
|
483
483
|
type: Component,
|
|
@@ -498,7 +498,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ng
|
|
|
498
498
|
'[style.width]': 'effectiveWidth()',
|
|
499
499
|
'[style.height]': 'effectiveHeight()',
|
|
500
500
|
'[attr.data-placement]': 'effectivePlacement()',
|
|
501
|
-
}, exportAs: 'zDrawer', template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n @defer (when !effectiveContentLoading()) {\n @if (customHeader(); as headerDir) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex items-start justify-between px-4\">\n <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n </div>\n </header>\n } @else if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\">\n {{ title }}\n </h4>\n }\n }\n }\n @if (effectiveDescription(); as description) {\n @switch (description | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(description)\" />\n }\n @case ('html') {\n <p\n data-testid=\"z-drawer-description\"\n class=\"text-muted-foreground m-0 mt-1 text-sm\"\n [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n }\n @default {\n <p data-testid=\"z-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n {{ $any(description) | translate }}\n </p>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n class=\"-mt-1 -mr-2 shrink-0\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n @if (customContent(); as contentDir) {\n <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n } @else {\n <ng-content />\n }\n </main>\n </ng-scrollbar>\n\n @if (customFooter(); as footerDir) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n </div>\n </footer>\n } @else if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n @defer (when !effectiveContentLoading()) {\n @if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"$any(title) | translate\">\n {{ $any(title) | translate }}\n </h4>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n <ng-template cdkPortalOutlet />\n\n @if (isStringContent()) {\n <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n }\n </main>\n </ng-scrollbar>\n\n @if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n @if (config.zCancelIcon) {\n <z-icon [zType]=\"config.zCancelIcon\" />\n }\n {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n @if (config.zOkIcon && !effectiveLoading()) {\n <z-icon [zType]=\"config.zOkIcon\" />\n }\n {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"] }]
|
|
501
|
+
}, exportAs: 'zDrawer', template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n @defer (when !effectiveContentLoading()) {\n @if (customHeader(); as headerDir) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex items-start justify-between px-4\">\n <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n </div>\n </header>\n } @else if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"$any(title) | translate\">\n {{ $any(title) | translate }}\n </h4>\n }\n }\n }\n @if (effectiveDescription(); as description) {\n @switch (description | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(description)\" />\n }\n @case ('html') {\n <p\n data-testid=\"z-drawer-description\"\n class=\"text-muted-foreground m-0 mt-1 text-sm\"\n [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n }\n @default {\n <p data-testid=\"z-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n {{ $any(description) | translate }}\n </p>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n class=\"-mt-1 -mr-2 shrink-0\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n @if (customContent(); as contentDir) {\n <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n } @else {\n <ng-content />\n }\n </main>\n </ng-scrollbar>\n\n @if (customFooter(); as footerDir) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n </div>\n </footer>\n } @else if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n @defer (when !effectiveContentLoading()) {\n @if (effectiveTitle()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n @if (effectiveTitle(); as title) {\n @switch (title | zContentType) {\n @case ('template') {\n <ng-container *ngTemplateOutlet=\"$any(title)\" />\n }\n @case ('html') {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"title\"\n [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n }\n @default {\n <h4\n data-testid=\"z-drawer-title\"\n class=\"m-0 truncate text-base leading-snug font-semibold\"\n z-tooltip\n [zContent]=\"$any(title) | translate\">\n {{ $any(title) | translate }}\n </h4>\n }\n }\n }\n </div>\n @if (effectiveClosable()) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n }\n </div>\n </header>\n } @else if (effectiveClosable()) {\n <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n <div class=\"flex justify-end px-4\">\n <button\n type=\"button\"\n data-testid=\"z-drawer-close-header-button\"\n z-button\n zType=\"subtle\"\n zSize=\"xs\"\n [zWave]=\"false\"\n (click)=\"onCloseClick()\">\n <z-icon zType=\"lucideX\" />\n </button>\n </div>\n </header>\n }\n\n <ng-scrollbar\n class=\"z-drawer-scrollbar flex-1\"\n #mainContent\n track=\"vertical\"\n cdkScrollable\n (scroll)=\"onContentScroll($event)\">\n <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n <ng-template cdkPortalOutlet />\n\n @if (isStringContent()) {\n <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n }\n </main>\n </ng-scrollbar>\n\n @if (!effectiveHideFooter()) {\n <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\n <div class=\"flex flex-row justify-end gap-2 px-4\">\n @if (effectiveCancelText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-cancel-button\"\n z-button\n zType=\"outline\"\n (click)=\"onCloseClick()\">\n @if (config.zCancelIcon) {\n <z-icon [zType]=\"config.zCancelIcon\" />\n }\n {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n </button>\n }\n\n @if (effectiveOkText() !== null) {\n <button\n type=\"button\"\n data-testid=\"z-drawer-ok-button\"\n z-button\n [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n [zLoading]=\"effectiveLoading()\"\n (click)=\"onOkClick()\">\n @if (config.zOkIcon && !effectiveLoading()) {\n <z-icon [zType]=\"config.zOkIcon\" />\n }\n {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n </button>\n }\n </div>\n </footer>\n }\n } @placeholder {\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\n <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n </div>\n }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"] }]
|
|
502
502
|
}], ctorParameters: () => [], propDecorators: { zOnOk: [{ type: i0.Output, args: ["zOnOk"] }], zOnCancel: [{ type: i0.Output, args: ["zOnCancel"] }], zScrollbar: [{ type: i0.Output, args: ["zScrollbar"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisible", required: false }] }, { type: i0.Output, args: ["zVisibleChange"] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDescription", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeight", required: false }] }], zPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlacement", required: false }] }], zClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClosable", required: false }] }], zMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaskClosable", required: false }] }], zHideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideFooter", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zOkDestructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDestructive", required: false }] }], zOkDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], zShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShadow", required: false }] }], zShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShape", required: false }] }], zContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerHeaderDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerContentDirective), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerFooterDirective), { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], dummyTemplateRef: [{ type: i0.ViewChild, args: ['dummyTemplate', { isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } }) });
|
|
503
503
|
|
|
504
504
|
let ZDrawerRef = class ZDrawerRef {
|