@shival99/z-ui 2.3.5 → 2.3.6
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-tabs.mjs +102 -22
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +1 -1
- package/package.json +1 -1
- package/types/shival99-z-ui-components-z-autocomplete.d.ts +1 -1
- 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-table.d.ts +1 -1
- package/types/shival99-z-ui-components-z-tabs.d.ts +24 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, inject, TemplateRef, Directive, contentChildren, viewChild, viewChildren, model, output, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { input, inject, TemplateRef, Directive, contentChildren, viewChild, viewChildren, model, output, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { TranslatePipe } from '@ngx-translate/core';
|
|
5
5
|
import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
|
|
6
6
|
import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
|
|
@@ -40,6 +40,26 @@ const zTabsInstanceIds = (() => {
|
|
|
40
40
|
let counter = 0;
|
|
41
41
|
return { next: () => ++counter };
|
|
42
42
|
})();
|
|
43
|
+
/** Queues low-priority panel work on idle time, falling back to a timer where `requestIdleCallback` is missing. */
|
|
44
|
+
function zTabsRequestIdle(task, timeout = 200) {
|
|
45
|
+
if (typeof window === 'undefined') {
|
|
46
|
+
return 0;
|
|
47
|
+
}
|
|
48
|
+
const idle = window.requestIdleCallback;
|
|
49
|
+
return idle ? idle(() => task(), { timeout }) : window.setTimeout(task, 0);
|
|
50
|
+
}
|
|
51
|
+
/** Cancels a handle returned by `zTabsRequestIdle`, regardless of which scheduler produced it. */
|
|
52
|
+
function zTabsCancelIdle(handle) {
|
|
53
|
+
if (!handle || typeof window === 'undefined') {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
const cancel = window.cancelIdleCallback;
|
|
57
|
+
if (cancel) {
|
|
58
|
+
cancel(handle);
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
window.clearTimeout(handle);
|
|
62
|
+
}
|
|
43
63
|
|
|
44
64
|
const zTabsVariants = cva('z-tabs flex min-w-0', {
|
|
45
65
|
variants: {
|
|
@@ -267,6 +287,8 @@ class ZTabsComponent {
|
|
|
267
287
|
...(ngDevMode ? [{ debugName: "zContentFit" }] : /* istanbul ignore next */ []));
|
|
268
288
|
zLazy = input(false, /* @ts-ignore */
|
|
269
289
|
...(ngDevMode ? [{ debugName: "zLazy" }] : /* istanbul ignore next */ []));
|
|
290
|
+
zPreload = input('hover', /* @ts-ignore */
|
|
291
|
+
...(ngDevMode ? [{ debugName: "zPreload" }] : /* istanbul ignore next */ []));
|
|
270
292
|
zDestroyInactive = input(false, /* @ts-ignore */
|
|
271
293
|
...(ngDevMode ? [{ debugName: "zDestroyInactive" }] : /* istanbul ignore next */ []));
|
|
272
294
|
zTabsOnly = input(false, /* @ts-ignore */
|
|
@@ -290,8 +312,10 @@ class ZTabsComponent {
|
|
|
290
312
|
activeTab = model('', /* @ts-ignore */
|
|
291
313
|
...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
|
|
292
314
|
zTabChange = output();
|
|
293
|
-
|
|
294
|
-
...(ngDevMode ? [{ debugName: "
|
|
315
|
+
mountedTabs = signal(new Set(), /* @ts-ignore */
|
|
316
|
+
...(ngDevMode ? [{ debugName: "mountedTabs" }] : /* istanbul ignore next */ []));
|
|
317
|
+
renderedTab = signal('', /* @ts-ignore */
|
|
318
|
+
...(ngDevMode ? [{ debugName: "renderedTab" }] : /* istanbul ignore next */ []));
|
|
295
319
|
canScrollLeft = signal(false, /* @ts-ignore */
|
|
296
320
|
...(ngDevMode ? [{ debugName: "canScrollLeft" }] : /* istanbul ignore next */ []));
|
|
297
321
|
canScrollRight = signal(false, /* @ts-ignore */
|
|
@@ -304,18 +328,24 @@ class ZTabsComponent {
|
|
|
304
328
|
...(ngDevMode ? [{ debugName: "glideStyle" }] : /* istanbul ignore next */ []));
|
|
305
329
|
glideReady = signal(false, /* @ts-ignore */
|
|
306
330
|
...(ngDevMode ? [{ debugName: "glideReady" }] : /* istanbul ignore next */ []));
|
|
331
|
+
/** With `zDestroyInactive` the single rendered panel is the visible one, so it never collapses mid-swap. */
|
|
332
|
+
visiblePanel = computed(() => (this.zDestroyInactive() ? this.renderedTab() : this.activeTab()), /* @ts-ignore */
|
|
333
|
+
...(ngDevMode ? [{ debugName: "visiblePanel" }] : /* istanbul ignore next */ []));
|
|
307
334
|
panelRenderStates = computed(() => new Map(this.tabPanels().map(panel => {
|
|
308
335
|
const tabValue = panel.zTabPanel();
|
|
309
336
|
if (this.zDestroyInactive()) {
|
|
310
|
-
return [tabValue, this.
|
|
337
|
+
return [tabValue, this.renderedTab() === tabValue];
|
|
311
338
|
}
|
|
312
339
|
if (!this.zLazy()) {
|
|
313
340
|
return [tabValue, true];
|
|
314
341
|
}
|
|
315
|
-
return [tabValue, this.
|
|
342
|
+
return [tabValue, this.mountedTabs().has(tabValue)];
|
|
316
343
|
})), /* @ts-ignore */
|
|
317
344
|
...(ngDevMode ? [{ debugName: "panelRenderStates" }] : /* istanbul ignore next */ []));
|
|
318
345
|
_resizeObserver;
|
|
346
|
+
_mountFrame;
|
|
347
|
+
_idleHandle;
|
|
348
|
+
_viewReady = false;
|
|
319
349
|
_cacheInstanceId = zTabsInstanceIds.next();
|
|
320
350
|
constructor() {
|
|
321
351
|
effect(() => {
|
|
@@ -328,17 +358,27 @@ class ZTabsComponent {
|
|
|
328
358
|
this.isGlideType();
|
|
329
359
|
requestAnimationFrame(() => this._updateGlideIndicator());
|
|
330
360
|
});
|
|
361
|
+
effect(() => {
|
|
362
|
+
const active = this.activeTab();
|
|
363
|
+
untracked(() => this._scheduleCommit(active));
|
|
364
|
+
});
|
|
331
365
|
}
|
|
332
366
|
ngOnInit() {
|
|
333
367
|
this._restoreActiveTabFromCache();
|
|
334
368
|
}
|
|
335
369
|
ngAfterViewInit() {
|
|
370
|
+
this._viewReady = true;
|
|
336
371
|
this.checkScroll();
|
|
337
372
|
this._setupResizeObserver();
|
|
338
373
|
requestAnimationFrame(() => this._updateGlideIndicator());
|
|
374
|
+
this._preloadNextIdlePanel();
|
|
339
375
|
}
|
|
340
376
|
ngOnDestroy() {
|
|
341
377
|
this._resizeObserver?.disconnect();
|
|
378
|
+
zTabsCancelIdle(this._idleHandle);
|
|
379
|
+
if (this._mountFrame !== undefined) {
|
|
380
|
+
cancelAnimationFrame(this._mountFrame);
|
|
381
|
+
}
|
|
342
382
|
}
|
|
343
383
|
tabsClasses = computed(() => zMergeClasses(zTabsVariants({
|
|
344
384
|
zType: this.zType(),
|
|
@@ -417,13 +457,6 @@ class ZTabsComponent {
|
|
|
417
457
|
if (!isAlreadyActive || this.zEmitOnActiveClick()) {
|
|
418
458
|
this.zTabChange.emit(tab.value);
|
|
419
459
|
}
|
|
420
|
-
if (this.zLazy()) {
|
|
421
|
-
this.loadedTabs.update(tabs => {
|
|
422
|
-
const newTabs = new Set(tabs);
|
|
423
|
-
newTabs.add(tab.value);
|
|
424
|
-
return newTabs;
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
460
|
if (scrollToView && this.zOrientation() === 'horizontal') {
|
|
428
461
|
requestAnimationFrame(() => {
|
|
429
462
|
const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);
|
|
@@ -452,6 +485,13 @@ class ZTabsComponent {
|
|
|
452
485
|
});
|
|
453
486
|
}
|
|
454
487
|
}
|
|
488
|
+
/** Mounts a panel ahead of its click so the tab transition never pays for the first render. */
|
|
489
|
+
preloadTab(tab) {
|
|
490
|
+
if (this.zPreload() === 'none' || tab.disabled) {
|
|
491
|
+
return;
|
|
492
|
+
}
|
|
493
|
+
zTabsRequestIdle(() => this._mountPanel(tab.value));
|
|
494
|
+
}
|
|
455
495
|
isTabActive(tab) {
|
|
456
496
|
return this.activeTab() === tab.value;
|
|
457
497
|
}
|
|
@@ -523,6 +563,53 @@ class ZTabsComponent {
|
|
|
523
563
|
onTabsScroll() {
|
|
524
564
|
this.checkScroll();
|
|
525
565
|
}
|
|
566
|
+
/**
|
|
567
|
+
* Lets the browser paint the tab-strip transition before the panel subtree is committed, so the
|
|
568
|
+
* swap lands after the animation has started instead of blocking its opening frames.
|
|
569
|
+
*/
|
|
570
|
+
_scheduleCommit(value) {
|
|
571
|
+
if (!value) {
|
|
572
|
+
return;
|
|
573
|
+
}
|
|
574
|
+
if (!this._viewReady || typeof requestAnimationFrame === 'undefined') {
|
|
575
|
+
this._commitPanel(value);
|
|
576
|
+
return;
|
|
577
|
+
}
|
|
578
|
+
this._mountFrame = requestAnimationFrame(() => {
|
|
579
|
+
this._mountFrame = requestAnimationFrame(() => this._commitPanel(value));
|
|
580
|
+
});
|
|
581
|
+
}
|
|
582
|
+
_commitPanel(value) {
|
|
583
|
+
if (this.activeTab() !== value) {
|
|
584
|
+
return;
|
|
585
|
+
}
|
|
586
|
+
this.renderedTab.set(value);
|
|
587
|
+
this._mountPanel(value);
|
|
588
|
+
this._preloadNextIdlePanel();
|
|
589
|
+
}
|
|
590
|
+
_mountPanel(value) {
|
|
591
|
+
if (!this._canMount(value)) {
|
|
592
|
+
return;
|
|
593
|
+
}
|
|
594
|
+
this.mountedTabs.update(tabs => new Set(tabs).add(value));
|
|
595
|
+
this._preloadNextIdlePanel();
|
|
596
|
+
}
|
|
597
|
+
/** Tracked even while `zDestroyInactive` is on, so flipping that input back keeps the visited panels. */
|
|
598
|
+
_canMount(value) {
|
|
599
|
+
return Boolean(value) && this.zLazy() && !this.mountedTabs().has(value);
|
|
600
|
+
}
|
|
601
|
+
/** Warms remaining panels one idle slot at a time so preloading never stalls a single frame. */
|
|
602
|
+
_preloadNextIdlePanel() {
|
|
603
|
+
if (this.zPreload() !== 'idle' || !this.zLazy() || this.zDestroyInactive()) {
|
|
604
|
+
return;
|
|
605
|
+
}
|
|
606
|
+
const next = this.zTabs().find(tab => !tab.disabled && !this.mountedTabs().has(tab.value));
|
|
607
|
+
if (!next) {
|
|
608
|
+
return;
|
|
609
|
+
}
|
|
610
|
+
zTabsCancelIdle(this._idleHandle);
|
|
611
|
+
this._idleHandle = zTabsRequestIdle(() => this._mountPanel(next.value));
|
|
612
|
+
}
|
|
526
613
|
_updateGlideIndicator() {
|
|
527
614
|
if (!this.isGlideType()) {
|
|
528
615
|
this.glideStyle.set(null);
|
|
@@ -568,13 +655,6 @@ class ZTabsComponent {
|
|
|
568
655
|
return;
|
|
569
656
|
}
|
|
570
657
|
this.activeTab.set(tab.value);
|
|
571
|
-
if (this.zLazy()) {
|
|
572
|
-
this.loadedTabs.update(tabs => {
|
|
573
|
-
const newTabs = new Set(tabs);
|
|
574
|
-
newTabs.add(tab.value);
|
|
575
|
-
return newTabs;
|
|
576
|
-
});
|
|
577
|
-
}
|
|
578
658
|
}
|
|
579
659
|
_saveActiveTabToCache(value) {
|
|
580
660
|
if (!this.zCache()) {
|
|
@@ -614,7 +694,7 @@ class ZTabsComponent {
|
|
|
614
694
|
}, 150);
|
|
615
695
|
}
|
|
616
696
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZTabsComponent, isStandalone: true, selector: "z-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTabs: { classPropertyName: "zTabs", publicName: "zTabs", isSignal: true, isRequired: true, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zContentFit: { classPropertyName: "zContentFit", publicName: "zContentFit", isSignal: true, isRequired: false, transformFunction: null }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zDestroyInactive: { classPropertyName: "zDestroyInactive", publicName: "zDestroyInactive", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zShowNavWrapper: { classPropertyName: "zShowNavWrapper", publicName: "zShowNavWrapper", isSignal: true, isRequired: false, transformFunction: null }, zNavFullWidth: { classPropertyName: "zNavFullWidth", publicName: "zNavFullWidth", isSignal: true, isRequired: false, transformFunction: null }, zClassContent: { classPropertyName: "zClassContent", publicName: "zClassContent", isSignal: true, isRequired: false, transformFunction: null }, zShowContentWrapper: { classPropertyName: "zShowContentWrapper", publicName: "zShowContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", isSignal: true, isRequired: false, transformFunction: null }, zEmitOnActiveClick: { classPropertyName: "zEmitOnActiveClick", publicName: "zEmitOnActiveClick", isSignal: true, isRequired: false, transformFunction: null }, zCache: { classPropertyName: "zCache", publicName: "zCache", isSignal: true, isRequired: false, transformFunction: null }, zCacheKey: { classPropertyName: "zCacheKey", publicName: "zCacheKey", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", zTabChange: "zTabChange" }, host: { classAttribute: "z-tabs-wrapper block" }, queries: [{ propertyName: "tabPanels", predicate: ZTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabsListContainer", first: true, predicate: ["tabsListContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"z-tabs-container flex gap-1\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-content-fit]=\"zContentFit()\"\n [class.flex-col]=\"!zTabsOnly()\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div\n [class]=\"navClasses()\"\n [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.w-auto]=\"zOrientation() === 'vertical'\"\n [class.shrink-0]=\"zOrientation() === 'vertical'\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div\n class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n [attr.data-type]=\"zType()\">\n @if (zOrientation() === 'vertical') {\n <ng-scrollbar\n class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </ng-scrollbar>\n } @else {\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n (scroll)=\"onTabsScroll()\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <ng-template #tabsListTpl>\n <!-- Tab List -->\n <div\n [class]=\"tabsClasses()\"\n [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"zOrientation()\"\n [attr.data-type]=\"zType()\">\n @if (isGlideType() && glideStyle(); as style) {\n <div\n class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n [class.z-tabs-glide-indicator-ready]=\"glideReady()\"\n [attr.data-type]=\"zType()\"\n [style.transform]=\"style.transform\"\n [style.width]=\"style.width\"\n [style.height]=\"style.height\"\n aria-hidden=\"true\"></div>\n }\n @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-last]=\"last\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n z-tooltip\n [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon\n [zType]=\"tab.icon\"\n zSize=\"16\"\n class=\"shrink-0\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n }\n <span\n class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n [class.bg-primary]=\"zType() !== 'badge'\"\n [class.text-primary-foreground]=\"zType() !== 'badge'\"\n [class.bg-primary!]=\"zType() === 'badge'\"\n [class.text-primary-foreground!]=\"zType() === 'badge'\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </ng-template>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div\n class=\"z-tabs-panels min-h-0\"\n [class.flex-1]=\"zOrientation() === 'vertical'\"\n [class.shadow-xs]=\"contentWrapperFramed()\"\n [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (panelRenderStates().get(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div\n class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;will-change:transform,width,height}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:transform .48s cubic-bezier(.22,1,.36,1),width .48s cubic-bezier(.22,1,.36,1),height .48s cubic-bezier(.22,1,.36,1)}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel]{animation:none!important}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:none!important}.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-.2rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { 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: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZTabsComponent, isStandalone: true, selector: "z-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTabs: { classPropertyName: "zTabs", publicName: "zTabs", isSignal: true, isRequired: true, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zContentFit: { classPropertyName: "zContentFit", publicName: "zContentFit", isSignal: true, isRequired: false, transformFunction: null }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zPreload: { classPropertyName: "zPreload", publicName: "zPreload", isSignal: true, isRequired: false, transformFunction: null }, zDestroyInactive: { classPropertyName: "zDestroyInactive", publicName: "zDestroyInactive", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zShowNavWrapper: { classPropertyName: "zShowNavWrapper", publicName: "zShowNavWrapper", isSignal: true, isRequired: false, transformFunction: null }, zNavFullWidth: { classPropertyName: "zNavFullWidth", publicName: "zNavFullWidth", isSignal: true, isRequired: false, transformFunction: null }, zClassContent: { classPropertyName: "zClassContent", publicName: "zClassContent", isSignal: true, isRequired: false, transformFunction: null }, zShowContentWrapper: { classPropertyName: "zShowContentWrapper", publicName: "zShowContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", isSignal: true, isRequired: false, transformFunction: null }, zEmitOnActiveClick: { classPropertyName: "zEmitOnActiveClick", publicName: "zEmitOnActiveClick", isSignal: true, isRequired: false, transformFunction: null }, zCache: { classPropertyName: "zCache", publicName: "zCache", isSignal: true, isRequired: false, transformFunction: null }, zCacheKey: { classPropertyName: "zCacheKey", publicName: "zCacheKey", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", zTabChange: "zTabChange" }, host: { classAttribute: "z-tabs-wrapper block" }, queries: [{ propertyName: "tabPanels", predicate: ZTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabsListContainer", first: true, predicate: ["tabsListContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"z-tabs-container flex gap-1\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-content-fit]=\"zContentFit()\"\n [class.flex-col]=\"!zTabsOnly()\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div\n [class]=\"navClasses()\"\n [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.w-auto]=\"zOrientation() === 'vertical'\"\n [class.shrink-0]=\"zOrientation() === 'vertical'\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div\n class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n [attr.data-type]=\"zType()\">\n @if (zOrientation() === 'vertical') {\n <ng-scrollbar\n class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </ng-scrollbar>\n } @else {\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n (scroll)=\"onTabsScroll()\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <ng-template #tabsListTpl>\n <!-- Tab List -->\n <div\n [class]=\"tabsClasses()\"\n [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"zOrientation()\"\n [attr.data-type]=\"zType()\">\n @if (isGlideType() && glideStyle(); as style) {\n <div\n class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n [class.z-tabs-glide-indicator-ready]=\"glideReady()\"\n [attr.data-type]=\"zType()\"\n [style.transform]=\"style.transform\"\n [style.width]=\"style.width\"\n [style.height]=\"style.height\"\n aria-hidden=\"true\"></div>\n }\n @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-last]=\"last\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n z-tooltip\n [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n (click)=\"selectTab(tab)\"\n (pointerenter)=\"preloadTab(tab)\"\n (focus)=\"preloadTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon\n [zType]=\"tab.icon\"\n zSize=\"16\"\n class=\"shrink-0\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n }\n <span\n class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n [class.bg-primary]=\"zType() !== 'badge'\"\n [class.text-primary-foreground]=\"zType() !== 'badge'\"\n [class.bg-primary!]=\"zType() === 'badge'\"\n [class.text-primary-foreground!]=\"zType() === 'badge'\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </ng-template>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div\n class=\"z-tabs-panels min-h-0\"\n [class.flex-1]=\"zOrientation() === 'vertical'\"\n [class.shadow-xs]=\"contentWrapperFramed()\"\n [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (panelRenderStates().get(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [attr.data-state]=\"visiblePanel() === panel.zTabPanel() ? 'active' : 'inactive'\"\n [attr.inert]=\"visiblePanel() === panel.zTabPanel() ? null : ''\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div\n class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (pointerenter)=\"preloadTab(tab)\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=active]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;will-change:transform,width,height}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:transform .48s cubic-bezier(.22,1,.36,1),width .48s cubic-bezier(.22,1,.36,1),height .48s cubic-bezier(.22,1,.36,1)}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel][data-state=active]{animation:none!important}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:none!important}.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-.2rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { 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: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
618
698
|
}
|
|
619
699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTabsComponent, decorators: [{
|
|
620
700
|
type: Component,
|
|
@@ -628,8 +708,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
628
708
|
NgScrollbar,
|
|
629
709
|
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
630
710
|
class: 'z-tabs-wrapper block',
|
|
631
|
-
}, template: "<div\n class=\"z-tabs-container flex gap-1\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-content-fit]=\"zContentFit()\"\n [class.flex-col]=\"!zTabsOnly()\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div\n [class]=\"navClasses()\"\n [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.w-auto]=\"zOrientation() === 'vertical'\"\n [class.shrink-0]=\"zOrientation() === 'vertical'\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div\n class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n [attr.data-type]=\"zType()\">\n @if (zOrientation() === 'vertical') {\n <ng-scrollbar\n class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </ng-scrollbar>\n } @else {\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n (scroll)=\"onTabsScroll()\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <ng-template #tabsListTpl>\n <!-- Tab List -->\n <div\n [class]=\"tabsClasses()\"\n [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"zOrientation()\"\n [attr.data-type]=\"zType()\">\n @if (isGlideType() && glideStyle(); as style) {\n <div\n class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n [class.z-tabs-glide-indicator-ready]=\"glideReady()\"\n [attr.data-type]=\"zType()\"\n [style.transform]=\"style.transform\"\n [style.width]=\"style.width\"\n [style.height]=\"style.height\"\n aria-hidden=\"true\"></div>\n }\n @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-last]=\"last\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n z-tooltip\n [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon\n [zType]=\"tab.icon\"\n zSize=\"16\"\n class=\"shrink-0\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n }\n <span\n class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n [class.bg-primary]=\"zType() !== 'badge'\"\n [class.text-primary-foreground]=\"zType() !== 'badge'\"\n [class.bg-primary!]=\"zType() === 'badge'\"\n [class.text-primary-foreground!]=\"zType() === 'badge'\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </ng-template>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div\n class=\"z-tabs-panels min-h-0\"\n [class.flex-1]=\"zOrientation() === 'vertical'\"\n [class.shadow-xs]=\"contentWrapperFramed()\"\n [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (panelRenderStates().get(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div\n class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;will-change:transform,width,height}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:transform .48s cubic-bezier(.22,1,.36,1),width .48s cubic-bezier(.22,1,.36,1),height .48s cubic-bezier(.22,1,.36,1)}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel]{animation:none!important}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:none!important}.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-.2rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
632
|
-
}], ctorParameters: () => [], propDecorators: { tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ZTabPanelDirective), { isSignal: true }] }], tabsListContainer: [{ type: i0.ViewChild, args: ['tabsListContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabs", required: true }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zContentFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentFit", required: false }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], zDestroyInactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDestroyInactive", required: false }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", required: false }] }], zShowNavWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowNavWrapper", required: false }] }], zNavFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNavFullWidth", required: false }] }], zClassContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClassContent", required: false }] }], zShowContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowContentWrapper", required: false }] }], zReloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReloadable", required: false }] }], zEmitOnActiveClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmitOnActiveClick", required: false }] }], zCache: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCache", required: false }] }], zCacheKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCacheKey", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
|
|
711
|
+
}, template: "<div\n class=\"z-tabs-container flex gap-1\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-content-fit]=\"zContentFit()\"\n [class.flex-col]=\"!zTabsOnly()\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div\n [class]=\"navClasses()\"\n [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.w-auto]=\"zOrientation() === 'vertical'\"\n [class.shrink-0]=\"zOrientation() === 'vertical'\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div\n class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n [attr.data-type]=\"zType()\">\n @if (zOrientation() === 'vertical') {\n <ng-scrollbar\n class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </ng-scrollbar>\n } @else {\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n (scroll)=\"onTabsScroll()\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <ng-template #tabsListTpl>\n <!-- Tab List -->\n <div\n [class]=\"tabsClasses()\"\n [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"zOrientation()\"\n [attr.data-type]=\"zType()\">\n @if (isGlideType() && glideStyle(); as style) {\n <div\n class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n [class.z-tabs-glide-indicator-ready]=\"glideReady()\"\n [attr.data-type]=\"zType()\"\n [style.transform]=\"style.transform\"\n [style.width]=\"style.width\"\n [style.height]=\"style.height\"\n aria-hidden=\"true\"></div>\n }\n @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-last]=\"last\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n z-tooltip\n [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n (click)=\"selectTab(tab)\"\n (pointerenter)=\"preloadTab(tab)\"\n (focus)=\"preloadTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon\n [zType]=\"tab.icon\"\n zSize=\"16\"\n class=\"shrink-0\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n }\n <span\n class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n [class.bg-primary]=\"zType() !== 'badge'\"\n [class.text-primary-foreground]=\"zType() !== 'badge'\"\n [class.bg-primary!]=\"zType() === 'badge'\"\n [class.text-primary-foreground!]=\"zType() === 'badge'\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </ng-template>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div\n class=\"z-tabs-panels min-h-0\"\n [class.flex-1]=\"zOrientation() === 'vertical'\"\n [class.shadow-xs]=\"contentWrapperFramed()\"\n [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (panelRenderStates().get(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [attr.data-state]=\"visiblePanel() === panel.zTabPanel() ? 'active' : 'inactive'\"\n [attr.inert]=\"visiblePanel() === panel.zTabPanel() ? null : ''\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div\n class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (pointerenter)=\"preloadTab(tab)\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:clip;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid]) .z-tabs-scroll-container-surface{border-radius:.5rem;overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border));border-radius:.5rem;padding:.125rem;box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-nav-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=active]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur]) .z-tabs{align-items:center}.z-tabs-glide-indicator{transition:none;will-change:transform,width,height}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:.3125rem;overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:transform .48s cubic-bezier(.22,1,.36,1),width .48s cubic-bezier(.22,1,.36,1),height .48s cubic-bezier(.22,1,.36,1)}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel][data-state=active]{animation:none!important}.z-tabs-glide-indicator.z-tabs-glide-indicator-ready{transition:none!important}.z-tab-icon-bounce{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-.2rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
712
|
+
}], ctorParameters: () => [], propDecorators: { tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ZTabPanelDirective), { isSignal: true }] }], tabsListContainer: [{ type: i0.ViewChild, args: ['tabsListContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabs", required: true }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zContentFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentFit", required: false }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], zPreload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPreload", required: false }] }], zDestroyInactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDestroyInactive", required: false }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", required: false }] }], zShowNavWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowNavWrapper", required: false }] }], zNavFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNavFullWidth", required: false }] }], zClassContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClassContent", required: false }] }], zShowContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowContentWrapper", required: false }] }], zReloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReloadable", required: false }] }], zEmitOnActiveClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmitOnActiveClick", required: false }] }], zCache: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCache", required: false }] }], zCacheKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCacheKey", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
|
|
633
713
|
|
|
634
714
|
/**
|
|
635
715
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-tabs.mjs","sources":["../../../../libs/core-ui/components/z-tabs/directives/z-tab-panel.directive.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.define.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.util.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.variants.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.html","../../../../libs/core-ui/components/z-tabs/shival99-z-ui-components-z-tabs.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[z-tab-panel], [zTabPanel]',\n standalone: true,\n exportAs: 'zTabPanel',\n})\nexport class ZTabPanelDirective {\n public readonly zTabPanel = input.required<string>();\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import type { ZTabsType } from './z-tabs.types';\n\n/** Minimum scroll-position delta (px) before the fade/scroll-button state is toggled. */\nexport const Z_TABS_SCROLL_TOLERANCE = 4;\n\n/**\n * Types that render a shared pill behind the active tab and glide it into place instead of\n * swapping each item's own background.\n */\nexport const Z_TABS_GLIDE_TYPES: ZTabsType[] = ['segment', 'segment-solid', 'pill-solid', 'pill-blur'];\n","/** Hands out a fresh, monotonically increasing id for scoping each `z-tabs` instance's cache key. */\nexport const zTabsInstanceIds = (() => {\n let counter = 0;\n return { next: (): number => ++counter };\n})();\n","import { cva } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex min-w-0', {\n variants: {\n zType: {\n line: 'gap-0',\n soft: 'gap-1 bg-background p-0 dark:bg-transparent',\n segment: 'relative gap-1 rounded-lg bg-muted/60 p-1 dark:bg-muted/35',\n 'segment-solid': 'relative gap-1 rounded-lg bg-muted/60 p-1 dark:bg-muted/35',\n 'pill-solid': 'relative gap-1 rounded-full bg-muted/60 p-1 dark:bg-muted/35',\n 'pill-blur': 'relative gap-1 rounded-full bg-muted/40 p-1 backdrop-blur-md dark:bg-muted/20',\n folder: 'isolate gap-0 bg-background p-0 dark:bg-transparent',\n 'folder-soft': 'isolate gap-0 bg-background p-0 dark:bg-transparent',\n 'folder-solid': 'isolate gap-0 bg-background p-0 dark:bg-transparent',\n underline: 'gap-0',\n underlined: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n badge: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n sharp: 'gap-1 rounded-none bg-background p-0 dark:bg-transparent',\n 'sharp-line': 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n 'sharp-line-filled': 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n square: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n 'vertical-sharp': 'gap-1 rounded-none bg-background p-0 dark:bg-transparent',\n 'code-line': 'h-10 w-full justify-start gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n },\n zOrientation: {\n horizontal: 'w-max flex-row items-center',\n vertical: 'w-full flex-col items-stretch gap-1 border-b-0',\n },\n },\n defaultVariants: {\n zType: 'line',\n zOrientation: 'horizontal',\n },\n compoundVariants: [\n {\n zType: 'vertical-sharp',\n zOrientation: 'vertical',\n class: 'border-r-0 pr-0',\n },\n {\n zType: 'sharp-line',\n zOrientation: 'vertical',\n class: 'gap-0',\n },\n {\n zType: 'sharp-line-filled',\n zOrientation: 'vertical',\n class: 'gap-0',\n },\n ],\n});\n\nexport const zTabItemVariants = cva(\n 'z-tab-item relative inline-flex min-h-10 select-none items-center justify-center gap-2 whitespace-nowrap font-medium text-sm leading-none text-muted-foreground transition-[color,background-color,border-color,box-shadow,transform] duration-200 outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed',\n {\n variants: {\n zType: {\n line: 'rounded-none border-0 hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-1px] after:h-1 after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n soft: 'rounded-md border-0 text-muted-foreground hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-xs! dark:data-[active=true]:bg-primary/15',\n segment: 'z-10 rounded-md border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',\n 'segment-solid':\n 'z-10 rounded-md border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary-foreground',\n 'pill-solid':\n 'z-10 rounded-full border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',\n 'pill-blur':\n 'z-10 rounded-full border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',\n folder:\n 'rounded-t-md border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-background data-[active=true]:text-primary data-[active=true]:shadow-[inset_1px_0_0_var(--border),inset_-1px_0_0_var(--border),inset_0_1px_0_var(--border)]',\n 'folder-soft':\n 'rounded-t-md border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-[inset_1px_0_0_var(--border),inset_-1px_0_0_var(--border),inset_0_1px_0_var(--border)] dark:data-[active=true]:bg-primary/15',\n 'folder-solid':\n 'rounded-t-md border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-[inset_1px_0_0_var(--primary),inset_-1px_0_0_var(--primary),inset_0_1px_0_var(--primary)]',\n underline:\n 'hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-1 after:bottom-[-1px] after:h-[0.1875rem] after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n underlined:\n 'rounded-none border-0 border-b-2 border-b-transparent! bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-b-primary! data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-sm!',\n badge:\n 'rounded-none border-0 border-b-2 border-b-transparent! bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-b-primary! data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-none',\n sharp:\n 'rounded-none border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:text-primary',\n 'sharp-line':\n 'rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:text-primary',\n 'sharp-line-filled':\n 'rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/30 data-[active=true]:text-primary',\n square:\n 'rounded-none border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/15 data-[active=true]:text-primary',\n 'vertical-sharp':\n 'rounded-none border border-transparent border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-none',\n 'code-line':\n 'relative inline-flex h-full min-h-8 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-2 bg-background px-4 py-1.5 font-medium text-foreground/60 transition-all hover:text-foreground data-[active=true]:relative data-[active=true]:z-[1] data-[active=true]:-mb-px data-[active=true]:border-x-primary/70! data-[active=true]:border-t-primary/70! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/30 data-[active=true]:text-primary data-[active=true]:shadow-none [&_span.z-tab-item-label]:font-mono [&_span.z-tab-item-label]:text-[13px]',\n },\n zSize: {\n xs: 'min-h-8 px-2.5 py-1 text-xs',\n sm: 'min-h-9 px-3 py-1.5 text-sm',\n default: 'min-h-10 px-4 py-2 text-sm',\n lg: 'min-h-[2.625rem] px-4.5 py-2.25 text-sm',\n },\n zOrientation: {\n horizontal: '',\n vertical: 'justify-start px-3 py-2',\n },\n },\n compoundVariants: [\n {\n zType: 'line',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'soft',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-md data-[active=true]:bg-primary/10 data-[active=true]:shadow-xs dark:data-[active=true]:bg-primary/15',\n },\n {\n zType: 'segment',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-md data-[active=true]:bg-background data-[active=true]:shadow-xs dark:data-[active=true]:border-border!',\n },\n {\n zType: 'segment-solid',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-md data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-xs',\n },\n {\n zType: 'pill-solid',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-full data-[active=true]:bg-background data-[active=true]:shadow-sm dark:data-[active=true]:border-border!',\n },\n {\n zType: 'pill-blur',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-full backdrop-blur-md data-[active=true]:bg-background/70 data-[active=true]:shadow-sm',\n },\n {\n zType: 'folder',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'folder-soft',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'folder-solid',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'underline',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n\n {\n zType: 'underlined',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'badge',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'sharp',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'sharp-line',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'sharp-line-filled',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'square',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'vertical-sharp',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-none border border-transparent border-b-[3px] px-3 py-1.5 data-[active=true]:border-primary data-[active=true]:shadow-xs',\n },\n {\n zType: 'code-line',\n zSize: 'xs',\n zOrientation: 'horizontal',\n class: 'min-h-7 px-3 py-1 text-xs [&_span.z-tab-item-label]:text-xs',\n },\n {\n zType: 'code-line',\n zSize: 'sm',\n zOrientation: 'horizontal',\n class: 'min-h-8 px-3.5 py-1.5 text-sm',\n },\n {\n zType: 'code-line',\n zSize: 'default',\n zOrientation: 'horizontal',\n class: 'min-h-8 px-4 py-1.5 text-sm',\n },\n {\n zType: 'code-line',\n zSize: 'lg',\n zOrientation: 'horizontal',\n class: 'min-h-9 px-4.5 py-2 text-sm',\n },\n {\n zType: 'code-line',\n zOrientation: 'vertical',\n class: 'h-auto w-full flex-none justify-start rounded-none px-3 py-2 data-[active=true]:shadow-xs',\n },\n ],\n defaultVariants: {\n zType: 'line',\n zSize: 'default',\n zOrientation: 'horizontal',\n },\n }\n);\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n effect,\n ElementRef,\n input,\n model,\n output,\n signal,\n viewChild,\n viewChildren,\n ViewEncapsulation,\n OnDestroy,\n OnInit,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { ZCacheService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport { Z_TABS_GLIDE_TYPES, Z_TABS_SCROLL_TOLERANCE } from './z-tabs.define';\nimport type { ZTab, ZTabsContentFit, ZTabsOrientation, ZTabsSize, ZTabsType } from './z-tabs.types';\nimport { zTabsInstanceIds } from './z-tabs.util';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n selector: 'z-tabs',\n imports: [\n ZIconComponent,\n ZButtonComponent,\n ZTooltipDirective,\n NgTemplateOutlet,\n ZPopoverDirective,\n TranslatePipe,\n NgScrollbar,\n ],\n standalone: true,\n templateUrl: './z-tabs.component.html',\n styleUrl: './z-tabs.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-tabs-wrapper block',\n },\n})\nexport class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {\n public readonly tabPanels = contentChildren(ZTabPanelDirective);\n public readonly tabsListContainer = viewChild<ElementRef<HTMLDivElement>>('tabsListContainer');\n public readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n public readonly class = input<ClassValue>('');\n public readonly zTabs = input.required<ZTab[]>();\n public readonly zType = input<ZTabsType>('line');\n public readonly zSize = input<ZTabsSize>('default');\n public readonly zOrientation = input<ZTabsOrientation>('horizontal');\n public readonly zContentFit = input<ZTabsContentFit>('none');\n public readonly zLazy = input(false);\n public readonly zDestroyInactive = input(false);\n public readonly zTabsOnly = input(false);\n public readonly zShowNavWrapper = input(false);\n public readonly zNavFullWidth = input(false);\n public readonly zClassContent = input<ClassValue>('');\n public readonly zShowContentWrapper = input(true);\n public readonly zReloadable = input(true);\n public readonly zEmitOnActiveClick = input(true);\n public readonly zCache = input(true);\n public readonly zCacheKey = input('');\n\n public readonly activeTab = model<string>('');\n public readonly zTabChange = output<string>();\n\n protected readonly loadedTabs = signal<Set<string>>(new Set());\n protected readonly canScrollLeft = signal(false);\n protected readonly canScrollRight = signal(false);\n protected readonly bouncingTab = signal<string | null>(null);\n\n protected readonly isGlideType = computed(\n () => Z_TABS_GLIDE_TYPES.includes(this.zType()) && this.zOrientation() === 'horizontal'\n );\n\n protected readonly glideStyle = signal<{ transform: string; width: string; height: string } | null>(null);\n protected readonly glideReady = signal(false);\n\n protected readonly panelRenderStates = computed(\n () =>\n new Map(\n this.tabPanels().map(panel => {\n const tabValue = panel.zTabPanel();\n\n if (this.zDestroyInactive()) {\n return [tabValue, this.activeTab() === tabValue] as const;\n }\n\n if (!this.zLazy()) {\n return [tabValue, true] as const;\n }\n\n return [tabValue, this.loadedTabs().has(tabValue) || this.activeTab() === tabValue] as const;\n })\n )\n );\n\n private _resizeObserver?: ResizeObserver;\n private readonly _cacheInstanceId = zTabsInstanceIds.next();\n\n constructor() {\n effect(() => {\n this.zTabs();\n requestAnimationFrame(() => this.checkScroll());\n });\n\n effect(() => {\n this.activeTab();\n this.zTabs();\n this.isGlideType();\n requestAnimationFrame(() => this._updateGlideIndicator());\n });\n }\n\n ngOnInit(): void {\n this._restoreActiveTabFromCache();\n }\n\n ngAfterViewInit(): void {\n this.checkScroll();\n this._setupResizeObserver();\n requestAnimationFrame(() => this._updateGlideIndicator());\n }\n\n ngOnDestroy(): void {\n this._resizeObserver?.disconnect();\n }\n\n protected readonly tabsClasses = computed(() =>\n zMergeClasses(\n zTabsVariants({\n zType: this.zType(),\n zOrientation: this.zOrientation(),\n }),\n this.zNavFullWidth() ? 'w-full' : '',\n this.class()\n )\n );\n\n protected readonly contentWrapperFramed = computed(() => {\n if (!this.zShowContentWrapper()) {\n return false;\n }\n\n if (this.zOrientation() === 'vertical') {\n return false;\n }\n\n const type = this.zType();\n return (\n type === 'folder' ||\n type === 'folder-soft' ||\n type === 'folder-solid' ||\n type === 'sharp' ||\n type === 'sharp-line' ||\n type === 'sharp-line-filled' ||\n type === 'square' ||\n type === 'code-line'\n );\n });\n\n protected readonly tabsListHasBottomPadding = computed(() => {\n if (this.zOrientation() !== 'horizontal') {\n return false;\n }\n\n const type = this.zType();\n return (\n type !== 'folder' &&\n type !== 'folder-soft' &&\n type !== 'folder-solid' &&\n type !== 'segment' &&\n type !== 'segment-solid' &&\n type !== 'pill-solid' &&\n type !== 'pill-blur' &&\n type !== 'sharp' &&\n type !== 'sharp-line' &&\n type !== 'sharp-line-filled' &&\n type !== 'square' &&\n type !== 'code-line'\n );\n });\n\n protected readonly verticalTabsScrollable = computed(\n () => this.zOrientation() === 'vertical' && this.zTabs().length > 8\n );\n\n protected readonly navClasses = computed(() =>\n zMergeClasses('z-tabs-nav flex items-center gap-1.5', this.zClassContent())\n );\n\n protected getTabItemClasses(_tab: ZTab): string {\n return zMergeClasses(\n zTabItemVariants({\n zType: this.zType(),\n zSize: this.zSize(),\n zOrientation: this.zOrientation(),\n })\n );\n }\n\n protected selectTab(tab: ZTab, scrollToView = true): void {\n if (tab.disabled) {\n return;\n }\n\n const isAlreadyActive = this.activeTab() === tab.value;\n if (isAlreadyActive && !this.zReloadable()) {\n return;\n }\n\n this.activeTab.set(tab.value);\n this._saveActiveTabToCache(tab.value);\n\n if (this.isGlideType()) {\n requestAnimationFrame(() => this._updateGlideIndicator());\n }\n\n if (this.isGlideType()) {\n this.bouncingTab.set(tab.value);\n setTimeout(() => {\n if (this.bouncingTab() === tab.value) {\n this.bouncingTab.set(null);\n }\n }, 320);\n }\n\n if (!isAlreadyActive || this.zEmitOnActiveClick()) {\n this.zTabChange.emit(tab.value);\n }\n\n if (this.zLazy()) {\n this.loadedTabs.update(tabs => {\n const newTabs = new Set(tabs);\n newTabs.add(tab.value);\n return newTabs;\n });\n }\n\n if (scrollToView && this.zOrientation() === 'horizontal') {\n requestAnimationFrame(() => {\n const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);\n const tabButtonsList = this.tabButtons();\n const tabButton = tabButtonsList[tabIndex];\n if (tabButton) {\n const alignTabInViewport = () => {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n const containerRect = container.getBoundingClientRect();\n const tabRect = tabButton.nativeElement.getBoundingClientRect();\n const centeredScrollLeft =\n container.scrollLeft + tabRect.left - containerRect.left - (container.clientWidth - tabRect.width) / 2;\n const maxScrollLeft = container.scrollWidth - container.clientWidth;\n\n container.scrollTo({\n left: Math.max(0, Math.min(centeredScrollLeft, maxScrollLeft)),\n behavior: 'smooth',\n });\n };\n\n alignTabInViewport();\n setTimeout(() => {\n alignTabInViewport();\n }, 320);\n }\n });\n }\n }\n\n protected isTabActive(tab: ZTab): boolean {\n return this.activeTab() === tab.value;\n }\n\n protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void {\n const tabs = this.zTabs().filter(t => !t.disabled);\n const currentTab = tabs[currentIndex];\n\n if (!currentTab) {\n return;\n }\n\n const isHorizontal = this.zOrientation() === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = (currentIndex + 1) % tabs.length;\n this.selectTab(tabs[nextIndex]);\n return;\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n this.selectTab(tabs[prevIndex]);\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n this.selectTab(tabs[0]);\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n this.selectTab(tabs[tabs.length - 1]);\n }\n }\n\n protected checkScroll(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container || this.zOrientation() !== 'horizontal') {\n this.canScrollLeft.set(false);\n this.canScrollRight.set(false);\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = container;\n const maxScrollLeft = scrollWidth - clientWidth;\n\n if (maxScrollLeft <= Z_TABS_SCROLL_TOLERANCE) {\n container.scrollLeft = 0;\n this.canScrollLeft.set(false);\n this.canScrollRight.set(false);\n return;\n }\n\n this.canScrollLeft.set(scrollLeft > Z_TABS_SCROLL_TOLERANCE);\n this.canScrollRight.set(maxScrollLeft - scrollLeft > Z_TABS_SCROLL_TOLERANCE);\n }\n\n protected scrollLeft(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: -200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected scrollRight(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: 200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected onTabsScroll(): void {\n this.checkScroll();\n }\n\n private _updateGlideIndicator(): void {\n if (!this.isGlideType()) {\n this.glideStyle.set(null);\n this.glideReady.set(false);\n return;\n }\n\n const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n const button = this.tabButtons()[activeIndex]?.nativeElement;\n if (!button) {\n return;\n }\n\n this.glideStyle.set({\n transform: `translate(${button.offsetLeft}px, ${button.offsetTop}px)`,\n width: `${button.offsetWidth}px`,\n height: `${button.offsetHeight}px`,\n });\n\n if (!this.glideReady()) {\n requestAnimationFrame(() => this.glideReady.set(true));\n }\n }\n\n private _setupResizeObserver(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n this._resizeObserver = new ResizeObserver(() => {\n this.checkScroll();\n this._updateGlideIndicator();\n });\n\n this._resizeObserver.observe(container);\n }\n\n private _restoreActiveTabFromCache(): void {\n if (!this.zCache()) {\n return;\n }\n\n const cacheKey = this._getCacheKey();\n const cachedTab = ZCacheService.get<string>(cacheKey);\n if (!cachedTab) {\n return;\n }\n\n const tab = this.zTabs().find(item => item.value === cachedTab && !item.disabled);\n if (!tab) {\n return;\n }\n\n this.activeTab.set(tab.value);\n\n if (this.zLazy()) {\n this.loadedTabs.update(tabs => {\n const newTabs = new Set(tabs);\n newTabs.add(tab.value);\n return newTabs;\n });\n }\n }\n\n private _saveActiveTabToCache(value: string): void {\n if (!this.zCache()) {\n return;\n }\n\n ZCacheService.set(this._getCacheKey(), value);\n }\n\n private _getCacheKey(): string {\n const customKey = this.zCacheKey().trim();\n if (customKey) {\n return customKey;\n }\n\n const path = typeof window === 'undefined' ? 'ssr' : window.location.pathname;\n return `z-tabs:${path}:${this._cacheInstanceId}`;\n }\n\n protected scrollToActiveDropdownItem(): void {\n setTimeout(() => {\n const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n if (activeIndex === -1) {\n return;\n }\n\n const dropdownMenu = document.querySelector('.z-tabs-dropdown-menu') as HTMLElement;\n if (!dropdownMenu) {\n return;\n }\n\n const dropdownItems = Array.from(dropdownMenu.querySelectorAll('button'));\n const activeItem = dropdownItems[activeIndex];\n\n if (activeItem && dropdownMenu) {\n const menuRect = dropdownMenu.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n const scrollTop = activeItem.offsetTop - menuRect.height / 2 + itemRect.height / 2;\n\n dropdownMenu.scrollTo({\n top: scrollTop,\n behavior: 'smooth',\n });\n }\n }, 150);\n }\n}\n","<div\n class=\"z-tabs-container flex gap-1\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-content-fit]=\"zContentFit()\"\n [class.flex-col]=\"!zTabsOnly()\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div\n [class]=\"navClasses()\"\n [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.w-auto]=\"zOrientation() === 'vertical'\"\n [class.shrink-0]=\"zOrientation() === 'vertical'\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div\n class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n [attr.data-type]=\"zType()\">\n @if (zOrientation() === 'vertical') {\n <ng-scrollbar\n class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </ng-scrollbar>\n } @else {\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n (scroll)=\"onTabsScroll()\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <ng-template #tabsListTpl>\n <!-- Tab List -->\n <div\n [class]=\"tabsClasses()\"\n [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"zOrientation()\"\n [attr.data-type]=\"zType()\">\n @if (isGlideType() && glideStyle(); as style) {\n <div\n class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n [class.z-tabs-glide-indicator-ready]=\"glideReady()\"\n [attr.data-type]=\"zType()\"\n [style.transform]=\"style.transform\"\n [style.width]=\"style.width\"\n [style.height]=\"style.height\"\n aria-hidden=\"true\"></div>\n }\n @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-last]=\"last\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n z-tooltip\n [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon\n [zType]=\"tab.icon\"\n zSize=\"16\"\n class=\"shrink-0\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n }\n <span\n class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n [class.bg-primary]=\"zType() !== 'badge'\"\n [class.text-primary-foreground]=\"zType() !== 'badge'\"\n [class.bg-primary!]=\"zType() === 'badge'\"\n [class.text-primary-foreground!]=\"zType() === 'badge'\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </ng-template>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div\n class=\"z-tabs-panels min-h-0\"\n [class.flex-1]=\"zOrientation() === 'vertical'\"\n [class.shadow-xs]=\"contentWrapperFramed()\"\n [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (panelRenderStates().get(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [hidden]=\"activeTab() !== panel.zTabPanel()\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div\n class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\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-tabs.mjs","sources":["../../../../libs/core-ui/components/z-tabs/directives/z-tab-panel.directive.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.define.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.util.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.variants.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.html","../../../../libs/core-ui/components/z-tabs/shival99-z-ui-components-z-tabs.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n selector: '[z-tab-panel], [zTabPanel]',\n standalone: true,\n exportAs: 'zTabPanel',\n})\nexport class ZTabPanelDirective {\n public readonly zTabPanel = input.required<string>();\n public readonly template = inject(TemplateRef<unknown>);\n}\n","import type { ZTabsType } from './z-tabs.types';\n\n/** Minimum scroll-position delta (px) before the fade/scroll-button state is toggled. */\nexport const Z_TABS_SCROLL_TOLERANCE = 4;\n\n/**\n * Types that render a shared pill behind the active tab and glide it into place instead of\n * swapping each item's own background.\n */\nexport const Z_TABS_GLIDE_TYPES: ZTabsType[] = ['segment', 'segment-solid', 'pill-solid', 'pill-blur'];\n","/** Hands out a fresh, monotonically increasing id for scoping each `z-tabs` instance's cache key. */\nexport const zTabsInstanceIds = (() => {\n let counter = 0;\n return { next: (): number => ++counter };\n})();\n\n/** Queues low-priority panel work on idle time, falling back to a timer where `requestIdleCallback` is missing. */\nexport function zTabsRequestIdle(task: () => void, timeout = 200): number {\n if (typeof window === 'undefined') {\n return 0;\n }\n\n const idle = window.requestIdleCallback;\n return idle ? idle(() => task(), { timeout }) : window.setTimeout(task, 0);\n}\n\n/** Cancels a handle returned by `zTabsRequestIdle`, regardless of which scheduler produced it. */\nexport function zTabsCancelIdle(handle: number | undefined): void {\n if (!handle || typeof window === 'undefined') {\n return;\n }\n\n const cancel = window.cancelIdleCallback;\n if (cancel) {\n cancel(handle);\n return;\n }\n\n window.clearTimeout(handle);\n}\n","import { cva } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex min-w-0', {\n variants: {\n zType: {\n line: 'gap-0',\n soft: 'gap-1 bg-background p-0 dark:bg-transparent',\n segment: 'relative gap-1 rounded-lg bg-muted/60 p-1 dark:bg-muted/35',\n 'segment-solid': 'relative gap-1 rounded-lg bg-muted/60 p-1 dark:bg-muted/35',\n 'pill-solid': 'relative gap-1 rounded-full bg-muted/60 p-1 dark:bg-muted/35',\n 'pill-blur': 'relative gap-1 rounded-full bg-muted/40 p-1 backdrop-blur-md dark:bg-muted/20',\n folder: 'isolate gap-0 bg-background p-0 dark:bg-transparent',\n 'folder-soft': 'isolate gap-0 bg-background p-0 dark:bg-transparent',\n 'folder-solid': 'isolate gap-0 bg-background p-0 dark:bg-transparent',\n underline: 'gap-0',\n underlined: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n badge: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n sharp: 'gap-1 rounded-none bg-background p-0 dark:bg-transparent',\n 'sharp-line': 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n 'sharp-line-filled': 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n square: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n 'vertical-sharp': 'gap-1 rounded-none bg-background p-0 dark:bg-transparent',\n 'code-line': 'h-10 w-full justify-start gap-0 rounded-none bg-background p-0 dark:bg-transparent',\n },\n zOrientation: {\n horizontal: 'w-max flex-row items-center',\n vertical: 'w-full flex-col items-stretch gap-1 border-b-0',\n },\n },\n defaultVariants: {\n zType: 'line',\n zOrientation: 'horizontal',\n },\n compoundVariants: [\n {\n zType: 'vertical-sharp',\n zOrientation: 'vertical',\n class: 'border-r-0 pr-0',\n },\n {\n zType: 'sharp-line',\n zOrientation: 'vertical',\n class: 'gap-0',\n },\n {\n zType: 'sharp-line-filled',\n zOrientation: 'vertical',\n class: 'gap-0',\n },\n ],\n});\n\nexport const zTabItemVariants = cva(\n 'z-tab-item relative inline-flex min-h-10 select-none items-center justify-center gap-2 whitespace-nowrap font-medium text-sm leading-none text-muted-foreground transition-[color,background-color,border-color,box-shadow,transform] duration-200 outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed',\n {\n variants: {\n zType: {\n line: 'rounded-none border-0 hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-1px] after:h-1 after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n soft: 'rounded-md border-0 text-muted-foreground hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-xs! dark:data-[active=true]:bg-primary/15',\n segment: 'z-10 rounded-md border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',\n 'segment-solid':\n 'z-10 rounded-md border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary-foreground',\n 'pill-solid':\n 'z-10 rounded-full border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',\n 'pill-blur':\n 'z-10 rounded-full border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',\n folder:\n 'rounded-t-md border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-background data-[active=true]:text-primary data-[active=true]:shadow-[inset_1px_0_0_var(--border),inset_-1px_0_0_var(--border),inset_0_1px_0_var(--border)]',\n 'folder-soft':\n 'rounded-t-md border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-[inset_1px_0_0_var(--border),inset_-1px_0_0_var(--border),inset_0_1px_0_var(--border)] dark:data-[active=true]:bg-primary/15',\n 'folder-solid':\n 'rounded-t-md border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-[inset_1px_0_0_var(--primary),inset_-1px_0_0_var(--primary),inset_0_1px_0_var(--primary)]',\n underline:\n 'hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-1 after:bottom-[-1px] after:h-[0.1875rem] after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n underlined:\n 'rounded-none border-0 border-b-2 border-b-transparent! bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-b-primary! data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-sm!',\n badge:\n 'rounded-none border-0 border-b-2 border-b-transparent! bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-b-primary! data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-none',\n sharp:\n 'rounded-none border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:text-primary',\n 'sharp-line':\n 'rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:text-primary',\n 'sharp-line-filled':\n 'rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/30 data-[active=true]:text-primary',\n square:\n 'rounded-none border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/15 data-[active=true]:text-primary',\n 'vertical-sharp':\n 'rounded-none border border-transparent border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-none',\n 'code-line':\n 'relative inline-flex h-full min-h-8 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-2 bg-background px-4 py-1.5 font-medium text-foreground/60 transition-all hover:text-foreground data-[active=true]:relative data-[active=true]:z-[1] data-[active=true]:-mb-px data-[active=true]:border-x-primary/70! data-[active=true]:border-t-primary/70! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/30 data-[active=true]:text-primary data-[active=true]:shadow-none [&_span.z-tab-item-label]:font-mono [&_span.z-tab-item-label]:text-[13px]',\n },\n zSize: {\n xs: 'min-h-8 px-2.5 py-1 text-xs',\n sm: 'min-h-9 px-3 py-1.5 text-sm',\n default: 'min-h-10 px-4 py-2 text-sm',\n lg: 'min-h-[2.625rem] px-4.5 py-2.25 text-sm',\n },\n zOrientation: {\n horizontal: '',\n vertical: 'justify-start px-3 py-2',\n },\n },\n compoundVariants: [\n {\n zType: 'line',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'soft',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-md data-[active=true]:bg-primary/10 data-[active=true]:shadow-xs dark:data-[active=true]:bg-primary/15',\n },\n {\n zType: 'segment',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-md data-[active=true]:bg-background data-[active=true]:shadow-xs dark:data-[active=true]:border-border!',\n },\n {\n zType: 'segment-solid',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-md data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-xs',\n },\n {\n zType: 'pill-solid',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-full data-[active=true]:bg-background data-[active=true]:shadow-sm dark:data-[active=true]:border-border!',\n },\n {\n zType: 'pill-blur',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-full backdrop-blur-md data-[active=true]:bg-background/70 data-[active=true]:shadow-sm',\n },\n {\n zType: 'folder',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'folder-soft',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'folder-solid',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n {\n zType: 'underline',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',\n },\n\n {\n zType: 'underlined',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'badge',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'sharp',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'sharp-line',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'sharp-line-filled',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'square',\n zOrientation: 'vertical',\n class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',\n },\n {\n zType: 'vertical-sharp',\n zOrientation: 'vertical',\n class:\n 'w-full justify-start rounded-none border border-transparent border-b-[3px] px-3 py-1.5 data-[active=true]:border-primary data-[active=true]:shadow-xs',\n },\n {\n zType: 'code-line',\n zSize: 'xs',\n zOrientation: 'horizontal',\n class: 'min-h-7 px-3 py-1 text-xs [&_span.z-tab-item-label]:text-xs',\n },\n {\n zType: 'code-line',\n zSize: 'sm',\n zOrientation: 'horizontal',\n class: 'min-h-8 px-3.5 py-1.5 text-sm',\n },\n {\n zType: 'code-line',\n zSize: 'default',\n zOrientation: 'horizontal',\n class: 'min-h-8 px-4 py-1.5 text-sm',\n },\n {\n zType: 'code-line',\n zSize: 'lg',\n zOrientation: 'horizontal',\n class: 'min-h-9 px-4.5 py-2 text-sm',\n },\n {\n zType: 'code-line',\n zOrientation: 'vertical',\n class: 'h-auto w-full flex-none justify-start rounded-none px-3 py-2 data-[active=true]:shadow-xs',\n },\n ],\n defaultVariants: {\n zType: 'line',\n zSize: 'default',\n zOrientation: 'horizontal',\n },\n }\n);\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n effect,\n ElementRef,\n input,\n model,\n output,\n signal,\n viewChild,\n untracked,\n viewChildren,\n ViewEncapsulation,\n OnDestroy,\n OnInit,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { ZCacheService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport { Z_TABS_GLIDE_TYPES, Z_TABS_SCROLL_TOLERANCE } from './z-tabs.define';\nimport type { ZTab, ZTabsContentFit, ZTabsOrientation, ZTabsPreload, ZTabsSize, ZTabsType } from './z-tabs.types';\nimport { zTabsCancelIdle, zTabsInstanceIds, zTabsRequestIdle } from './z-tabs.util';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n selector: 'z-tabs',\n imports: [\n ZIconComponent,\n ZButtonComponent,\n ZTooltipDirective,\n NgTemplateOutlet,\n ZPopoverDirective,\n TranslatePipe,\n NgScrollbar,\n ],\n standalone: true,\n templateUrl: './z-tabs.component.html',\n styleUrl: './z-tabs.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'z-tabs-wrapper block',\n },\n})\nexport class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {\n public readonly tabPanels = contentChildren(ZTabPanelDirective);\n public readonly tabsListContainer = viewChild<ElementRef<HTMLDivElement>>('tabsListContainer');\n public readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n public readonly class = input<ClassValue>('');\n public readonly zTabs = input.required<ZTab[]>();\n public readonly zType = input<ZTabsType>('line');\n public readonly zSize = input<ZTabsSize>('default');\n public readonly zOrientation = input<ZTabsOrientation>('horizontal');\n public readonly zContentFit = input<ZTabsContentFit>('none');\n public readonly zLazy = input(false);\n public readonly zPreload = input<ZTabsPreload>('hover');\n public readonly zDestroyInactive = input(false);\n public readonly zTabsOnly = input(false);\n public readonly zShowNavWrapper = input(false);\n public readonly zNavFullWidth = input(false);\n public readonly zClassContent = input<ClassValue>('');\n public readonly zShowContentWrapper = input(true);\n public readonly zReloadable = input(true);\n public readonly zEmitOnActiveClick = input(true);\n public readonly zCache = input(true);\n public readonly zCacheKey = input('');\n\n public readonly activeTab = model<string>('');\n public readonly zTabChange = output<string>();\n\n protected readonly mountedTabs = signal<Set<string>>(new Set());\n protected readonly renderedTab = signal<string>('');\n protected readonly canScrollLeft = signal(false);\n protected readonly canScrollRight = signal(false);\n protected readonly bouncingTab = signal<string | null>(null);\n\n protected readonly isGlideType = computed(\n () => Z_TABS_GLIDE_TYPES.includes(this.zType()) && this.zOrientation() === 'horizontal'\n );\n\n protected readonly glideStyle = signal<{ transform: string; width: string; height: string } | null>(null);\n protected readonly glideReady = signal(false);\n\n /** With `zDestroyInactive` the single rendered panel is the visible one, so it never collapses mid-swap. */\n protected readonly visiblePanel = computed(() => (this.zDestroyInactive() ? this.renderedTab() : this.activeTab()));\n\n protected readonly panelRenderStates = computed(\n () =>\n new Map(\n this.tabPanels().map(panel => {\n const tabValue = panel.zTabPanel();\n\n if (this.zDestroyInactive()) {\n return [tabValue, this.renderedTab() === tabValue] as const;\n }\n\n if (!this.zLazy()) {\n return [tabValue, true] as const;\n }\n\n return [tabValue, this.mountedTabs().has(tabValue)] as const;\n })\n )\n );\n\n private _resizeObserver?: ResizeObserver;\n private _mountFrame?: number;\n private _idleHandle?: number;\n private _viewReady = false;\n private readonly _cacheInstanceId = zTabsInstanceIds.next();\n\n constructor() {\n effect(() => {\n this.zTabs();\n requestAnimationFrame(() => this.checkScroll());\n });\n\n effect(() => {\n this.activeTab();\n this.zTabs();\n this.isGlideType();\n requestAnimationFrame(() => this._updateGlideIndicator());\n });\n\n effect(() => {\n const active = this.activeTab();\n untracked(() => this._scheduleCommit(active));\n });\n }\n\n ngOnInit(): void {\n this._restoreActiveTabFromCache();\n }\n\n ngAfterViewInit(): void {\n this._viewReady = true;\n this.checkScroll();\n this._setupResizeObserver();\n requestAnimationFrame(() => this._updateGlideIndicator());\n this._preloadNextIdlePanel();\n }\n\n ngOnDestroy(): void {\n this._resizeObserver?.disconnect();\n zTabsCancelIdle(this._idleHandle);\n if (this._mountFrame !== undefined) {\n cancelAnimationFrame(this._mountFrame);\n }\n }\n\n protected readonly tabsClasses = computed(() =>\n zMergeClasses(\n zTabsVariants({\n zType: this.zType(),\n zOrientation: this.zOrientation(),\n }),\n this.zNavFullWidth() ? 'w-full' : '',\n this.class()\n )\n );\n\n protected readonly contentWrapperFramed = computed(() => {\n if (!this.zShowContentWrapper()) {\n return false;\n }\n\n if (this.zOrientation() === 'vertical') {\n return false;\n }\n\n const type = this.zType();\n return (\n type === 'folder' ||\n type === 'folder-soft' ||\n type === 'folder-solid' ||\n type === 'sharp' ||\n type === 'sharp-line' ||\n type === 'sharp-line-filled' ||\n type === 'square' ||\n type === 'code-line'\n );\n });\n\n protected readonly tabsListHasBottomPadding = computed(() => {\n if (this.zOrientation() !== 'horizontal') {\n return false;\n }\n\n const type = this.zType();\n return (\n type !== 'folder' &&\n type !== 'folder-soft' &&\n type !== 'folder-solid' &&\n type !== 'segment' &&\n type !== 'segment-solid' &&\n type !== 'pill-solid' &&\n type !== 'pill-blur' &&\n type !== 'sharp' &&\n type !== 'sharp-line' &&\n type !== 'sharp-line-filled' &&\n type !== 'square' &&\n type !== 'code-line'\n );\n });\n\n protected readonly verticalTabsScrollable = computed(\n () => this.zOrientation() === 'vertical' && this.zTabs().length > 8\n );\n\n protected readonly navClasses = computed(() =>\n zMergeClasses('z-tabs-nav flex items-center gap-1.5', this.zClassContent())\n );\n\n protected getTabItemClasses(_tab: ZTab): string {\n return zMergeClasses(\n zTabItemVariants({\n zType: this.zType(),\n zSize: this.zSize(),\n zOrientation: this.zOrientation(),\n })\n );\n }\n\n protected selectTab(tab: ZTab, scrollToView = true): void {\n if (tab.disabled) {\n return;\n }\n\n const isAlreadyActive = this.activeTab() === tab.value;\n if (isAlreadyActive && !this.zReloadable()) {\n return;\n }\n\n this.activeTab.set(tab.value);\n this._saveActiveTabToCache(tab.value);\n\n if (this.isGlideType()) {\n requestAnimationFrame(() => this._updateGlideIndicator());\n }\n\n if (this.isGlideType()) {\n this.bouncingTab.set(tab.value);\n setTimeout(() => {\n if (this.bouncingTab() === tab.value) {\n this.bouncingTab.set(null);\n }\n }, 320);\n }\n\n if (!isAlreadyActive || this.zEmitOnActiveClick()) {\n this.zTabChange.emit(tab.value);\n }\n\n if (scrollToView && this.zOrientation() === 'horizontal') {\n requestAnimationFrame(() => {\n const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);\n const tabButtonsList = this.tabButtons();\n const tabButton = tabButtonsList[tabIndex];\n if (tabButton) {\n const alignTabInViewport = () => {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n const containerRect = container.getBoundingClientRect();\n const tabRect = tabButton.nativeElement.getBoundingClientRect();\n const centeredScrollLeft =\n container.scrollLeft + tabRect.left - containerRect.left - (container.clientWidth - tabRect.width) / 2;\n const maxScrollLeft = container.scrollWidth - container.clientWidth;\n\n container.scrollTo({\n left: Math.max(0, Math.min(centeredScrollLeft, maxScrollLeft)),\n behavior: 'smooth',\n });\n };\n\n alignTabInViewport();\n setTimeout(() => {\n alignTabInViewport();\n }, 320);\n }\n });\n }\n }\n\n /** Mounts a panel ahead of its click so the tab transition never pays for the first render. */\n protected preloadTab(tab: ZTab): void {\n if (this.zPreload() === 'none' || tab.disabled) {\n return;\n }\n\n zTabsRequestIdle(() => this._mountPanel(tab.value));\n }\n\n protected isTabActive(tab: ZTab): boolean {\n return this.activeTab() === tab.value;\n }\n\n protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void {\n const tabs = this.zTabs().filter(t => !t.disabled);\n const currentTab = tabs[currentIndex];\n\n if (!currentTab) {\n return;\n }\n\n const isHorizontal = this.zOrientation() === 'horizontal';\n const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n if (event.key === nextKey) {\n event.preventDefault();\n const nextIndex = (currentIndex + 1) % tabs.length;\n this.selectTab(tabs[nextIndex]);\n return;\n }\n\n if (event.key === prevKey) {\n event.preventDefault();\n const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n this.selectTab(tabs[prevIndex]);\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n this.selectTab(tabs[0]);\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n this.selectTab(tabs[tabs.length - 1]);\n }\n }\n\n protected checkScroll(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container || this.zOrientation() !== 'horizontal') {\n this.canScrollLeft.set(false);\n this.canScrollRight.set(false);\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = container;\n const maxScrollLeft = scrollWidth - clientWidth;\n\n if (maxScrollLeft <= Z_TABS_SCROLL_TOLERANCE) {\n container.scrollLeft = 0;\n this.canScrollLeft.set(false);\n this.canScrollRight.set(false);\n return;\n }\n\n this.canScrollLeft.set(scrollLeft > Z_TABS_SCROLL_TOLERANCE);\n this.canScrollRight.set(maxScrollLeft - scrollLeft > Z_TABS_SCROLL_TOLERANCE);\n }\n\n protected scrollLeft(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: -200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected scrollRight(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n container.scrollBy({ left: 200, behavior: 'smooth' });\n setTimeout(() => this.checkScroll(), 300);\n }\n\n protected onTabsScroll(): void {\n this.checkScroll();\n }\n\n /**\n * Lets the browser paint the tab-strip transition before the panel subtree is committed, so the\n * swap lands after the animation has started instead of blocking its opening frames.\n */\n private _scheduleCommit(value: string): void {\n if (!value) {\n return;\n }\n\n if (!this._viewReady || typeof requestAnimationFrame === 'undefined') {\n this._commitPanel(value);\n return;\n }\n\n this._mountFrame = requestAnimationFrame(() => {\n this._mountFrame = requestAnimationFrame(() => this._commitPanel(value));\n });\n }\n\n private _commitPanel(value: string): void {\n if (this.activeTab() !== value) {\n return;\n }\n\n this.renderedTab.set(value);\n this._mountPanel(value);\n this._preloadNextIdlePanel();\n }\n\n private _mountPanel(value: string): void {\n if (!this._canMount(value)) {\n return;\n }\n\n this.mountedTabs.update(tabs => new Set(tabs).add(value));\n this._preloadNextIdlePanel();\n }\n\n /** Tracked even while `zDestroyInactive` is on, so flipping that input back keeps the visited panels. */\n private _canMount(value: string): boolean {\n return Boolean(value) && this.zLazy() && !this.mountedTabs().has(value);\n }\n\n /** Warms remaining panels one idle slot at a time so preloading never stalls a single frame. */\n private _preloadNextIdlePanel(): void {\n if (this.zPreload() !== 'idle' || !this.zLazy() || this.zDestroyInactive()) {\n return;\n }\n\n const next = this.zTabs().find(tab => !tab.disabled && !this.mountedTabs().has(tab.value));\n if (!next) {\n return;\n }\n\n zTabsCancelIdle(this._idleHandle);\n this._idleHandle = zTabsRequestIdle(() => this._mountPanel(next.value));\n }\n\n private _updateGlideIndicator(): void {\n if (!this.isGlideType()) {\n this.glideStyle.set(null);\n this.glideReady.set(false);\n return;\n }\n\n const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n const button = this.tabButtons()[activeIndex]?.nativeElement;\n if (!button) {\n return;\n }\n\n this.glideStyle.set({\n transform: `translate(${button.offsetLeft}px, ${button.offsetTop}px)`,\n width: `${button.offsetWidth}px`,\n height: `${button.offsetHeight}px`,\n });\n\n if (!this.glideReady()) {\n requestAnimationFrame(() => this.glideReady.set(true));\n }\n }\n\n private _setupResizeObserver(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n this._resizeObserver = new ResizeObserver(() => {\n this.checkScroll();\n this._updateGlideIndicator();\n });\n\n this._resizeObserver.observe(container);\n }\n\n private _restoreActiveTabFromCache(): void {\n if (!this.zCache()) {\n return;\n }\n\n const cacheKey = this._getCacheKey();\n const cachedTab = ZCacheService.get<string>(cacheKey);\n if (!cachedTab) {\n return;\n }\n\n const tab = this.zTabs().find(item => item.value === cachedTab && !item.disabled);\n if (!tab) {\n return;\n }\n\n this.activeTab.set(tab.value);\n }\n\n private _saveActiveTabToCache(value: string): void {\n if (!this.zCache()) {\n return;\n }\n\n ZCacheService.set(this._getCacheKey(), value);\n }\n\n private _getCacheKey(): string {\n const customKey = this.zCacheKey().trim();\n if (customKey) {\n return customKey;\n }\n\n const path = typeof window === 'undefined' ? 'ssr' : window.location.pathname;\n return `z-tabs:${path}:${this._cacheInstanceId}`;\n }\n\n protected scrollToActiveDropdownItem(): void {\n setTimeout(() => {\n const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n if (activeIndex === -1) {\n return;\n }\n\n const dropdownMenu = document.querySelector('.z-tabs-dropdown-menu') as HTMLElement;\n if (!dropdownMenu) {\n return;\n }\n\n const dropdownItems = Array.from(dropdownMenu.querySelectorAll('button'));\n const activeItem = dropdownItems[activeIndex];\n\n if (activeItem && dropdownMenu) {\n const menuRect = dropdownMenu.getBoundingClientRect();\n const itemRect = activeItem.getBoundingClientRect();\n const scrollTop = activeItem.offsetTop - menuRect.height / 2 + itemRect.height / 2;\n\n dropdownMenu.scrollTo({\n top: scrollTop,\n behavior: 'smooth',\n });\n }\n }, 150);\n }\n}\n","<div\n class=\"z-tabs-container flex gap-1\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-content-fit]=\"zContentFit()\"\n [class.flex-col]=\"!zTabsOnly()\"\n [class.flex-row]=\"zOrientation() === 'vertical'\"\n [class.gap-4]=\"zOrientation() === 'vertical'\">\n <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n <div\n [class]=\"navClasses()\"\n [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n [class.w-auto]=\"zOrientation() === 'vertical'\"\n [class.shrink-0]=\"zOrientation() === 'vertical'\">\n <!-- Scroll Left Button -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n [zWave]=\"false\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Tabs List Container with Scroll + Fade -->\n <div\n class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n [class.z-tabs-scroll-container-surface]=\"canScrollLeft() || canScrollRight()\"\n [attr.data-type]=\"zType()\">\n @if (zOrientation() === 'vertical') {\n <ng-scrollbar\n class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n track=\"vertical\"\n orientation=\"vertical\"\n appearance=\"compact\"\n visibility=\"hover\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </ng-scrollbar>\n } @else {\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n (scroll)=\"onTabsScroll()\">\n <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n </div>\n }\n </div>\n\n <!-- Scroll Right Button -->\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n (click)=\"scrollRight()\"\n [zWave]=\"false\"\n aria-label=\"Scroll right\">\n <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n </z-button>\n }\n\n <!-- Dropdown Button (Mobile or Overflow) -->\n @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n <z-button\n zType=\"ghost\"\n zSize=\"sm\"\n zIconOnly=\"true\"\n class=\"z-tabs-nav-control shrink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <ng-template #tabsListTpl>\n <!-- Tab List -->\n <div\n [class]=\"tabsClasses()\"\n [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n role=\"tablist\"\n [attr.aria-orientation]=\"zOrientation()\"\n [attr.data-type]=\"zType()\">\n @if (isGlideType() && glideStyle(); as style) {\n <div\n class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n [class.z-tabs-glide-indicator-ready]=\"glideReady()\"\n [attr.data-type]=\"zType()\"\n [style.transform]=\"style.transform\"\n [style.width]=\"style.width\"\n [style.height]=\"style.height\"\n aria-hidden=\"true\"></div>\n }\n @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n [attr.data-type]=\"zType()\"\n [attr.data-orientation]=\"zOrientation()\"\n [attr.data-last]=\"last\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n z-tooltip\n [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n (click)=\"selectTab(tab)\"\n (pointerenter)=\"preloadTab(tab)\"\n (focus)=\"preloadTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon\n [zType]=\"tab.icon\"\n zSize=\"16\"\n class=\"shrink-0\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\" />\n }\n <span\n class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === tab.value\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold ring-2\"\n [class.bg-primary]=\"zType() !== 'badge'\"\n [class.text-primary-foreground]=\"zType() !== 'badge'\"\n [class.bg-primary!]=\"zType() === 'badge'\"\n [class.text-primary-foreground!]=\"zType() === 'badge'\">\n {{ tab.badge }}\n </span>\n }\n </button>\n }\n </div>\n </ng-template>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div\n class=\"z-tabs-panels min-h-0\"\n [class.flex-1]=\"zOrientation() === 'vertical'\"\n [class.shadow-xs]=\"contentWrapperFramed()\"\n [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (panelRenderStates().get(panel.zTabPanel())) {\n <div\n role=\"tabpanel\"\n [id]=\"'panel-' + panel.zTabPanel()\"\n [attr.aria-labelledby]=\"panel.zTabPanel()\"\n [attr.data-state]=\"visiblePanel() === panel.zTabPanel() ? 'active' : 'inactive'\"\n [attr.inert]=\"visiblePanel() === panel.zTabPanel() ? null : ''\">\n <ng-container *ngTemplateOutlet=\"panel.template\" />\n </div>\n }\n }\n </div>\n }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n <div\n class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n @for (tab of zTabs(); track tab.value) {\n <button\n #dropdownItem\n type=\"button\"\n class=\"flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:text-foreground]=\"!isTabActive(tab)\"\n [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n [class.bg-primary/15]=\"isTabActive(tab)\"\n [class.text-primary]=\"isTabActive(tab)\"\n [disabled]=\"tab.disabled\"\n (pointerenter)=\"preloadTab(tab)\"\n (click)=\"selectTab(tab, true); close()\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n }\n <span\n class=\"min-w-0 flex-1 truncate\"\n z-tooltip\n [zContent]=\"tab.label | translate\"\n zPosition=\"top\"\n [zHideDelay]=\"0\"\n [zOffset]=\"5\"\n [zArrow]=\"false\"\n [zTriggerElement]=\"dropdownItem\">\n {{ tab.label | translate }}\n </span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n {{ tab.badge }}\n </span>\n }\n @if (isTabActive(tab)) {\n <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n }\n </button>\n }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shival99/z-ui",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.6",
|
|
4
4
|
"description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 22, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -278,7 +278,7 @@ declare class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValu
|
|
|
278
278
|
|
|
279
279
|
declare const zAutocompleteInputVariants: (props?: ({
|
|
280
280
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
281
|
-
zStatus?: "default" | "
|
|
281
|
+
zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
|
|
282
282
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
283
283
|
type ZAutocompleteInputVariants = VariantProps<typeof zAutocompleteInputVariants>;
|
|
284
284
|
declare const zAutocompleteOptionVariants: (props?: ({
|
|
@@ -328,7 +328,7 @@ declare const Z_EDITOR_DEFAULT_TOOLBAR: readonly ZEditorToolbarItem[];
|
|
|
328
328
|
|
|
329
329
|
declare const zEditorVariants: (props?: ({
|
|
330
330
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
331
|
-
zStatus?: "default" | "
|
|
331
|
+
zStatus?: "default" | "error" | "disabled" | "readonly" | null | undefined;
|
|
332
332
|
zPlaceholderMode?: "firstLine" | "everyLine" | null | undefined;
|
|
333
333
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
334
334
|
type ZEditorVariants = VariantProps<typeof zEditorVariants>;
|
|
@@ -331,7 +331,7 @@ declare class ZTagClassesPipe implements PipeTransform {
|
|
|
331
331
|
|
|
332
332
|
declare const zSelectVariants: (props?: ({
|
|
333
333
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
334
|
-
zStatus?: "default" | "
|
|
334
|
+
zStatus?: "default" | "open" | "error" | "disabled" | "readonly" | null | undefined;
|
|
335
335
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
336
336
|
declare const zSelectTagVariants: (props?: ({
|
|
337
337
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
@@ -2239,7 +2239,7 @@ declare class ZTableActionsComponent<T = unknown> {
|
|
|
2239
2239
|
readonly zConfig: _angular_core.InputSignal<ZTableActionColumnConfig<T>>;
|
|
2240
2240
|
readonly zRow: _angular_core.InputSignal<T>;
|
|
2241
2241
|
readonly zRowId: _angular_core.InputSignal<string>;
|
|
2242
|
-
readonly zDropdownButtonSize: _angular_core.InputSignal<"
|
|
2242
|
+
readonly zDropdownButtonSize: _angular_core.InputSignal<"sm" | "default" | "lg" | "xs" | "xl" | null | undefined>;
|
|
2243
2243
|
readonly zActionClick: _angular_core.OutputEmitterRef<ZTableActionClickEvent<T>>;
|
|
2244
2244
|
protected readonly allActions: _angular_core.Signal<ZTableActionItem<T>[]>;
|
|
2245
2245
|
protected readonly shouldShowAsButtons: _angular_core.Signal<boolean>;
|
|
@@ -34,6 +34,7 @@ type ZTabsType = 'line' | 'soft' | 'segment' | 'segment-solid' | 'pill-solid' |
|
|
|
34
34
|
type ZTabsSize = 'xs' | 'sm' | 'default' | 'lg';
|
|
35
35
|
type ZTabsOrientation = 'horizontal' | 'vertical';
|
|
36
36
|
type ZTabsContentFit = 'none' | 'screen';
|
|
37
|
+
type ZTabsPreload = 'none' | 'hover' | 'idle';
|
|
37
38
|
type ZTabsVariants = VariantProps<typeof zTabsVariants>;
|
|
38
39
|
type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;
|
|
39
40
|
|
|
@@ -48,6 +49,7 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
48
49
|
readonly zOrientation: _angular_core.InputSignal<ZTabsOrientation>;
|
|
49
50
|
readonly zContentFit: _angular_core.InputSignal<ZTabsContentFit>;
|
|
50
51
|
readonly zLazy: _angular_core.InputSignal<boolean>;
|
|
52
|
+
readonly zPreload: _angular_core.InputSignal<ZTabsPreload>;
|
|
51
53
|
readonly zDestroyInactive: _angular_core.InputSignal<boolean>;
|
|
52
54
|
readonly zTabsOnly: _angular_core.InputSignal<boolean>;
|
|
53
55
|
readonly zShowNavWrapper: _angular_core.InputSignal<boolean>;
|
|
@@ -60,7 +62,8 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
60
62
|
readonly zCacheKey: _angular_core.InputSignal<string>;
|
|
61
63
|
readonly activeTab: _angular_core.ModelSignal<string>;
|
|
62
64
|
readonly zTabChange: _angular_core.OutputEmitterRef<string>;
|
|
63
|
-
protected readonly
|
|
65
|
+
protected readonly mountedTabs: _angular_core.WritableSignal<Set<string>>;
|
|
66
|
+
protected readonly renderedTab: _angular_core.WritableSignal<string>;
|
|
64
67
|
protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
|
|
65
68
|
protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
|
|
66
69
|
protected readonly bouncingTab: _angular_core.WritableSignal<string | null>;
|
|
@@ -71,8 +74,13 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
71
74
|
height: string;
|
|
72
75
|
} | null>;
|
|
73
76
|
protected readonly glideReady: _angular_core.WritableSignal<boolean>;
|
|
77
|
+
/** With `zDestroyInactive` the single rendered panel is the visible one, so it never collapses mid-swap. */
|
|
78
|
+
protected readonly visiblePanel: _angular_core.Signal<string>;
|
|
74
79
|
protected readonly panelRenderStates: _angular_core.Signal<Map<string, boolean>>;
|
|
75
80
|
private _resizeObserver?;
|
|
81
|
+
private _mountFrame?;
|
|
82
|
+
private _idleHandle?;
|
|
83
|
+
private _viewReady;
|
|
76
84
|
private readonly _cacheInstanceId;
|
|
77
85
|
constructor();
|
|
78
86
|
ngOnInit(): void;
|
|
@@ -85,12 +93,25 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
85
93
|
protected readonly navClasses: _angular_core.Signal<string>;
|
|
86
94
|
protected getTabItemClasses(_tab: ZTab): string;
|
|
87
95
|
protected selectTab(tab: ZTab, scrollToView?: boolean): void;
|
|
96
|
+
/** Mounts a panel ahead of its click so the tab transition never pays for the first render. */
|
|
97
|
+
protected preloadTab(tab: ZTab): void;
|
|
88
98
|
protected isTabActive(tab: ZTab): boolean;
|
|
89
99
|
protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void;
|
|
90
100
|
protected checkScroll(): void;
|
|
91
101
|
protected scrollLeft(): void;
|
|
92
102
|
protected scrollRight(): void;
|
|
93
103
|
protected onTabsScroll(): void;
|
|
104
|
+
/**
|
|
105
|
+
* Lets the browser paint the tab-strip transition before the panel subtree is committed, so the
|
|
106
|
+
* swap lands after the animation has started instead of blocking its opening frames.
|
|
107
|
+
*/
|
|
108
|
+
private _scheduleCommit;
|
|
109
|
+
private _commitPanel;
|
|
110
|
+
private _mountPanel;
|
|
111
|
+
/** Tracked even while `zDestroyInactive` is on, so flipping that input back keeps the visited panels. */
|
|
112
|
+
private _canMount;
|
|
113
|
+
/** Warms remaining panels one idle slot at a time so preloading never stalls a single frame. */
|
|
114
|
+
private _preloadNextIdlePanel;
|
|
94
115
|
private _updateGlideIndicator;
|
|
95
116
|
private _setupResizeObserver;
|
|
96
117
|
private _restoreActiveTabFromCache;
|
|
@@ -98,8 +119,8 @@ declare class ZTabsComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
98
119
|
private _getCacheKey;
|
|
99
120
|
protected scrollToActiveDropdownItem(): void;
|
|
100
121
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZTabsComponent, never>;
|
|
101
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zContentFit": { "alias": "zContentFit"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zDestroyInactive": { "alias": "zDestroyInactive"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowNavWrapper": { "alias": "zShowNavWrapper"; "required": false; "isSignal": true; }; "zNavFullWidth": { "alias": "zNavFullWidth"; "required": false; "isSignal": true; }; "zClassContent": { "alias": "zClassContent"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
|
|
122
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ZTabsComponent, "z-tabs", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zTabs": { "alias": "zTabs"; "required": true; "isSignal": true; }; "zType": { "alias": "zType"; "required": false; "isSignal": true; }; "zSize": { "alias": "zSize"; "required": false; "isSignal": true; }; "zOrientation": { "alias": "zOrientation"; "required": false; "isSignal": true; }; "zContentFit": { "alias": "zContentFit"; "required": false; "isSignal": true; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zPreload": { "alias": "zPreload"; "required": false; "isSignal": true; }; "zDestroyInactive": { "alias": "zDestroyInactive"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zShowNavWrapper": { "alias": "zShowNavWrapper"; "required": false; "isSignal": true; }; "zNavFullWidth": { "alias": "zNavFullWidth"; "required": false; "isSignal": true; }; "zClassContent": { "alias": "zClassContent"; "required": false; "isSignal": true; }; "zShowContentWrapper": { "alias": "zShowContentWrapper"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "zEmitOnActiveClick": { "alias": "zEmitOnActiveClick"; "required": false; "isSignal": true; }; "zCache": { "alias": "zCache"; "required": false; "isSignal": true; }; "zCacheKey": { "alias": "zCacheKey"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
|
|
102
123
|
}
|
|
103
124
|
|
|
104
125
|
export { ZTabPanelDirective, ZTabsComponent, zTabItemVariants, zTabsVariants };
|
|
105
|
-
export type { ZTab, ZTabItemVariants, ZTabsContentFit, ZTabsOrientation, ZTabsSize, ZTabsType, ZTabsVariants };
|
|
126
|
+
export type { ZTab, ZTabItemVariants, ZTabsContentFit, ZTabsOrientation, ZTabsPreload, ZTabsSize, ZTabsType, ZTabsVariants };
|