@shival99/z-ui 1.6.8 → 1.6.9
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 +7 -2
- 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-input.d.ts +2 -2
- package/types/shival99-z-ui-components-z-modal.d.ts +1 -1
- package/types/shival99-z-ui-components-z-popover.d.ts +1 -1
- package/types/shival99-z-ui-components-z-tabs.d.ts +2 -1
- package/types/shival99-z-ui-components-z-upload.d.ts +3 -3
|
@@ -82,6 +82,7 @@ class ZTabsComponent {
|
|
|
82
82
|
zOrientation = input('horizontal', ...(ngDevMode ? [{ debugName: "zOrientation" }] : []));
|
|
83
83
|
zLazy = input(false, ...(ngDevMode ? [{ debugName: "zLazy" }] : []));
|
|
84
84
|
zTabsOnly = input(false, ...(ngDevMode ? [{ debugName: "zTabsOnly" }] : []));
|
|
85
|
+
zReloadable = input(false, ...(ngDevMode ? [{ debugName: "zReloadable" }] : []));
|
|
85
86
|
activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
86
87
|
zTabChange = output();
|
|
87
88
|
loadedTabs = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadedTabs" }] : []));
|
|
@@ -116,6 +117,10 @@ class ZTabsComponent {
|
|
|
116
117
|
if (tab.disabled) {
|
|
117
118
|
return;
|
|
118
119
|
}
|
|
120
|
+
const isAlreadyActive = this.activeTab() === tab.value;
|
|
121
|
+
if (isAlreadyActive && !this.zReloadable()) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
119
124
|
this.activeTab.set(tab.value);
|
|
120
125
|
this.zTabChange.emit(tab.value);
|
|
121
126
|
if (this.zLazy()) {
|
|
@@ -244,14 +249,14 @@ class ZTabsComponent {
|
|
|
244
249
|
}, 150);
|
|
245
250
|
}
|
|
246
251
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", 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-4\"\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 class=\"z-tabs-nav flex items-start gap-2\">\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=\"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 class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 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 </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></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=\"shink-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=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(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 class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] 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 transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\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 [class.font-medium]=\"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 shink-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:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-fade-left{content:\"\";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs.flex-col.border-r{border-right:1px solid hsl(var(--border));padding-right:.5rem}.z-tab-item{-webkit-tap-highlight-color:transparent}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:1rem}.z-tabs-wrapper .z-tabs.bg-muted\\/30+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "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", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
252
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", 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-4\"\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 class=\"z-tabs-nav flex items-start gap-2\">\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=\"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 class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 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 </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></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=\"shink-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=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(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 class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] 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 transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\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 [class.font-medium]=\"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 shink-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:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-fade-left{content:\"\";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs.flex-col.border-r{border-right:1px solid hsl(var(--border));padding-right:.5rem}.z-tab-item{-webkit-tap-highlight-color:transparent}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:1rem}.z-tabs-wrapper .z-tabs.bg-muted\\/30+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "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", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
248
253
|
}
|
|
249
254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTabsComponent, decorators: [{
|
|
250
255
|
type: Component,
|
|
251
256
|
args: [{ selector: 'z-tabs', imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
252
257
|
class: 'z-tabs-wrapper block',
|
|
253
258
|
}, template: "<div\n class=\"z-tabs-container flex gap-4\"\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 class=\"z-tabs-nav flex items-start gap-2\">\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=\"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 class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 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 </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></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=\"shink-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=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(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 class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] 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 transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\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 [class.font-medium]=\"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 shink-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:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-fade-left{content:\"\";position:absolute;left:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.8) 30%,oklch(from var(--background) l c h/.4) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:10}.z-tabs.flex-col.border-r{border-right:1px solid hsl(var(--border));padding-right:.5rem}.z-tab-item{-webkit-tap-highlight-color:transparent}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:1rem}.z-tabs-wrapper .z-tabs.bg-muted\\/30+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
254
|
-
}], 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 }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
|
|
259
|
+
}], 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 }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", required: false }] }], zReloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReloadable", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
|
|
255
260
|
|
|
256
261
|
/**
|
|
257
262
|
* 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.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 { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex', {\n variants: {\n zType: {\n line: 'border-b border-border',\n enclosed: 'gap-0.5 border-b border-border',\n soft: 'bg-muted/30 rounded-[6px] p-1 gap-0.5',\n pill: 'gap-2',\n solid: 'gap-0.5',\n underline: 'gap-2 border-b border-border',\n },\n zOrientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col border-r border-b-0',\n },\n },\n defaultVariants: {\n zType: 'line',\n zOrientation: 'horizontal',\n },\n});\n\nexport const zTabItemVariants = cva(\n 'z-tab-item relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-[border-color,background-color,color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',\n {\n variants: {\n zType: {\n line: 'hover:text-foreground data-[active=true]:text-primary',\n enclosed:\n '-mb-px border border-b-0 border-transparent rounded-t-[6px] hover:border-border hover:border-b-0 data-[active=true]:border-border data-[active=true]:border-b-0 data-[active=true]:bg-background data-[active=true]:text-primary data-[active=true]:shadow-sm data-[active=true]:!border-primary',\n soft: 'rounded-[6px] hover:bg-muted data-[active=true]:bg-background data-[active=true]:shadow-sm data-[active=true]:text-primary dark:data-[active=true]:!border-border border !border-transparent',\n pill: 'rounded-full hover:bg-muted data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',\n solid:\n 'rounded-[6px] hover:bg-muted data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',\n underline:\n 'border-b-2 !border-transparent hover:text-foreground data-[active=true]:!border-primary data-[active=true]:text-primary',\n },\n zSize: {\n sm: 'px-3 py-1.5 text-sm',\n default: 'px-4 py-2 text-sm',\n lg: 'px-5 py-2.5 text-base',\n },\n zOrientation: {\n horizontal: '',\n vertical: 'w-full justify-start',\n },\n },\n defaultVariants: {\n zType: 'line',\n zSize: 'default',\n zOrientation: 'horizontal',\n },\n }\n);\n\nexport type ZTabsVariants = VariantProps<typeof zTabsVariants>;\nexport type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;\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} 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 { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport type { ZTab, ZTabsType, ZTabsSize, ZTabsOrientation } from './z-tabs.types';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n selector: 'z-tabs',\n imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe],\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 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 zLazy = input(false);\n public readonly zTabsOnly = input(false);\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\n private _resizeObserver?: ResizeObserver;\n\n constructor() {\n effect(() => {\n this.zTabs();\n requestAnimationFrame(() => this.checkScroll());\n });\n }\n\n ngAfterViewInit(): void {\n this.checkScroll();\n this._setupResizeObserver();\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.class()\n )\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 = false): void {\n if (tab.disabled) {\n return;\n }\n\n this.activeTab.set(tab.value);\n this.zTabChange.emit(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 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 tabButton.nativeElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n }\n });\n }\n }\n\n protected isTabActive(tab: ZTab): boolean {\n return this.activeTab() === tab.value;\n }\n\n protected shouldRenderPanel(tabValue: string): boolean {\n if (!this.zLazy()) {\n return true;\n }\n return this.loadedTabs().has(tabValue) || this.activeTab() === tabValue;\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 this.canScrollLeft.set(scrollLeft > 0);\n this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);\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 _setupResizeObserver(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n this._resizeObserver = new ResizeObserver(() => {\n this.checkScroll();\n });\n\n this._resizeObserver.observe(container);\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-4\"\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 class=\"z-tabs-nav flex items-start gap-2\">\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=\"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 class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 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 </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></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=\"shink-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=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(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 class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] 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 transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\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 [class.font-medium]=\"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 shink-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.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 { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex', {\n variants: {\n zType: {\n line: 'border-b border-border',\n enclosed: 'gap-0.5 border-b border-border',\n soft: 'bg-muted/30 rounded-[6px] p-1 gap-0.5',\n pill: 'gap-2',\n solid: 'gap-0.5',\n underline: 'gap-2 border-b border-border',\n },\n zOrientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col border-r border-b-0',\n },\n },\n defaultVariants: {\n zType: 'line',\n zOrientation: 'horizontal',\n },\n});\n\nexport const zTabItemVariants = cva(\n 'z-tab-item relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-[border-color,background-color,color,box-shadow] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',\n {\n variants: {\n zType: {\n line: 'hover:text-foreground data-[active=true]:text-primary',\n enclosed:\n '-mb-px border border-b-0 border-transparent rounded-t-[6px] hover:border-border hover:border-b-0 data-[active=true]:border-border data-[active=true]:border-b-0 data-[active=true]:bg-background data-[active=true]:text-primary data-[active=true]:shadow-sm data-[active=true]:!border-primary',\n soft: 'rounded-[6px] hover:bg-muted data-[active=true]:bg-background data-[active=true]:shadow-sm data-[active=true]:text-primary dark:data-[active=true]:!border-border border !border-transparent',\n pill: 'rounded-full hover:bg-muted data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',\n solid:\n 'rounded-[6px] hover:bg-muted data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',\n underline:\n 'border-b-2 !border-transparent hover:text-foreground data-[active=true]:!border-primary data-[active=true]:text-primary',\n },\n zSize: {\n sm: 'px-3 py-1.5 text-sm',\n default: 'px-4 py-2 text-sm',\n lg: 'px-5 py-2.5 text-base',\n },\n zOrientation: {\n horizontal: '',\n vertical: 'w-full justify-start',\n },\n },\n defaultVariants: {\n zType: 'line',\n zSize: 'default',\n zOrientation: 'horizontal',\n },\n }\n);\n\nexport type ZTabsVariants = VariantProps<typeof zTabsVariants>;\nexport type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;\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} 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 { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport type { ZTab, ZTabsType, ZTabsSize, ZTabsOrientation } from './z-tabs.types';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n selector: 'z-tabs',\n imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe],\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 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 zLazy = input(false);\n public readonly zTabsOnly = input(false);\n public readonly zReloadable = input(false);\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\n private _resizeObserver?: ResizeObserver;\n\n constructor() {\n effect(() => {\n this.zTabs();\n requestAnimationFrame(() => this.checkScroll());\n });\n }\n\n ngAfterViewInit(): void {\n this.checkScroll();\n this._setupResizeObserver();\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.class()\n )\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 = false): 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.zTabChange.emit(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 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 tabButton.nativeElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n });\n }\n });\n }\n }\n\n protected isTabActive(tab: ZTab): boolean {\n return this.activeTab() === tab.value;\n }\n\n protected shouldRenderPanel(tabValue: string): boolean {\n if (!this.zLazy()) {\n return true;\n }\n return this.loadedTabs().has(tabValue) || this.activeTab() === tabValue;\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 this.canScrollLeft.set(scrollLeft > 0);\n this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);\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 _setupResizeObserver(): void {\n const container = this.tabsListContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n this._resizeObserver = new ResizeObserver(() => {\n this.checkScroll();\n });\n\n this._resizeObserver.observe(container);\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-4\"\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 class=\"z-tabs-nav flex items-start gap-2\">\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=\"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 class=\"z-tabs-scroll-container relative min-w-0 flex-1\">\n <div\n #tabsListContainer\n class=\"z-tabs-scroll-wrapper\"\n [class.vertical]=\"zOrientation() === 'vertical'\"\n (scroll)=\"onTabsScroll()\">\n <!-- Tab List -->\n <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\">\n @for (tab of zTabs(); track tab.value; let idx = $index) {\n <button\n #tabButton\n type=\"button\"\n role=\"tab\"\n [class]=\"getTabItemClasses(tab)\"\n [attr.data-active]=\"isTabActive(tab)\"\n [attr.aria-selected]=\"isTabActive(tab)\"\n [attr.aria-controls]=\"'panel-' + tab.value\"\n [disabled]=\"tab.disabled\"\n [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n (click)=\"selectTab(tab)\"\n (keydown)=\"onTabKeydown($event, idx)\">\n @if (tab.icon) {\n <z-icon [zType]=\"tab.icon\" zSize=\"16\" />\n }\n <span>{{ tab.label | translate }}</span>\n @if (tab.badge) {\n <span\n class=\"bg-primary text-primary-foreground ml-1.5 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 </button>\n }\n </div>\n </div>\n\n <!-- Fade overlays (outside scroll container) -->\n @if (canScrollLeft() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-left\"></div>\n }\n @if (canScrollRight() && zOrientation() === 'horizontal') {\n <div class=\"z-tabs-fade-right\"></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=\"shink-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=\"shink-0\"\n z-popover\n [zPopoverContent]=\"dropdownTpl\"\n zPosition=\"bottom-right\"\n [zWave]=\"false\"\n zClass=\"min-w-[100px] max-w-[200px]\"\n (zShow)=\"scrollToActiveDropdownItem()\"\n aria-label=\"Select tab\">\n <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n </z-button>\n }\n </div>\n\n <!-- Tab Panels -->\n @if (!zTabsOnly()) {\n <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n @for (panel of tabPanels(); track panel.zTabPanel()) {\n @if (shouldRenderPanel(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 class=\"z-tabs-dropdown-menu flex max-h-[300px] max-w-[200px] min-w-[100px] 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 transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n [class.hover:bg-primary/10]=\"!isTabActive(tab)\"\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 [class.font-medium]=\"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 shink-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": "1.6.
|
|
3
|
+
"version": "1.6.9",
|
|
4
4
|
"description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 20+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -55,7 +55,7 @@ type ZAutocompleteOptionTemplate<T = unknown> = TemplateRef<{
|
|
|
55
55
|
|
|
56
56
|
declare const zAutocompleteInputVariants: (props?: ({
|
|
57
57
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
58
|
-
zStatus?: "default" | "
|
|
58
|
+
zStatus?: "default" | "disabled" | "readonly" | "open" | "error" | null | undefined;
|
|
59
59
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
60
60
|
type ZAutocompleteInputVariants = VariantProps<typeof zAutocompleteInputVariants>;
|
|
61
61
|
declare const zAutocompleteOptionVariants: (props?: ({
|
|
@@ -109,7 +109,7 @@ declare class ZEditorComponent implements OnInit, ControlValueAccessor {
|
|
|
109
109
|
|
|
110
110
|
declare const zEditorVariants: (props?: ({
|
|
111
111
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
112
|
-
zStatus?: "default" | "
|
|
112
|
+
zStatus?: "default" | "error" | "disabled" | "readonly" | null | undefined;
|
|
113
113
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
114
114
|
type ZEditorVariants = VariantProps<typeof zEditorVariants>;
|
|
115
115
|
|
|
@@ -187,11 +187,11 @@ declare class ZInputComponent implements OnInit, ControlValueAccessor {
|
|
|
187
187
|
|
|
188
188
|
declare const zInputVariants: (props?: ({
|
|
189
189
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
190
|
-
zStatus?: "default" | "
|
|
190
|
+
zStatus?: "default" | "error" | "disabled" | "readonly" | null | undefined;
|
|
191
191
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
192
192
|
type ZInputVariants = VariantProps<typeof zInputVariants>;
|
|
193
193
|
declare const zTextareaVariants: (props?: ({
|
|
194
|
-
zStatus?: "default" | "
|
|
194
|
+
zStatus?: "default" | "error" | "disabled" | "readonly" | null | undefined;
|
|
195
195
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
196
196
|
type ZTextareaVariants = VariantProps<typeof zTextareaVariants>;
|
|
197
197
|
|
|
@@ -220,7 +220,7 @@ declare class ZModalComponent<T, U> extends BasePortalOutlet implements OnDestro
|
|
|
220
220
|
protected readonly effectiveOkText: _angular_core.Signal<string | null | undefined>;
|
|
221
221
|
protected readonly effectiveCancelText: _angular_core.Signal<string | null | undefined>;
|
|
222
222
|
protected readonly effectiveOkDestructive: _angular_core.Signal<boolean | undefined>;
|
|
223
|
-
protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "default" | "primary" | "secondary" | "destructive" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" |
|
|
223
|
+
protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "link" | "default" | "primary" | "secondary" | "destructive" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | null | undefined>;
|
|
224
224
|
protected readonly effectiveOkDisabled: _angular_core.Signal<boolean | undefined>;
|
|
225
225
|
protected readonly effectiveLoading: _angular_core.Signal<boolean>;
|
|
226
226
|
protected readonly effectiveContentLoading: _angular_core.Signal<boolean>;
|
|
@@ -77,7 +77,7 @@ declare class ZPopoverDirective implements OnInit, OnDestroy {
|
|
|
77
77
|
readonly zHideDelay: _angular_core.InputSignal<number>;
|
|
78
78
|
readonly zDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
79
79
|
readonly zOffset: _angular_core.InputSignal<number>;
|
|
80
|
-
readonly zPopoverWidth: _angular_core.InputSignal<number | "
|
|
80
|
+
readonly zPopoverWidth: _angular_core.InputSignal<number | "trigger" | "auto">;
|
|
81
81
|
readonly zManualClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
82
82
|
readonly zScrollClose: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
83
83
|
readonly zShowArrow: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
|
|
@@ -35,6 +35,7 @@ declare class ZTabsComponent implements AfterViewInit, OnDestroy {
|
|
|
35
35
|
readonly zOrientation: _angular_core.InputSignal<ZTabsOrientation>;
|
|
36
36
|
readonly zLazy: _angular_core.InputSignal<boolean>;
|
|
37
37
|
readonly zTabsOnly: _angular_core.InputSignal<boolean>;
|
|
38
|
+
readonly zReloadable: _angular_core.InputSignal<boolean>;
|
|
38
39
|
readonly activeTab: _angular_core.ModelSignal<string>;
|
|
39
40
|
readonly zTabChange: _angular_core.OutputEmitterRef<string>;
|
|
40
41
|
protected readonly loadedTabs: _angular_core.WritableSignal<Set<string>>;
|
|
@@ -57,7 +58,7 @@ declare class ZTabsComponent implements AfterViewInit, OnDestroy {
|
|
|
57
58
|
private _setupResizeObserver;
|
|
58
59
|
protected scrollToActiveDropdownItem(): void;
|
|
59
60
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ZTabsComponent, never>;
|
|
60
|
-
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; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
|
|
61
|
+
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; }; "zLazy": { "alias": "zLazy"; "required": false; "isSignal": true; }; "zTabsOnly": { "alias": "zTabsOnly"; "required": false; "isSignal": true; }; "zReloadable": { "alias": "zReloadable"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "zTabChange": "zTabChange"; }, ["tabPanels"], never, true, never>;
|
|
61
62
|
}
|
|
62
63
|
|
|
63
64
|
declare const zTabsVariants: (props?: ({
|
|
@@ -86,7 +86,7 @@ declare class ZUploadComponent implements OnInit, ControlValueAccessor {
|
|
|
86
86
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
87
87
|
protected readonly showError: _angular_core.Signal<boolean>;
|
|
88
88
|
protected readonly errorMessage: _angular_core.Signal<string>;
|
|
89
|
-
protected readonly currentStatus: _angular_core.Signal<"default" | "
|
|
89
|
+
protected readonly currentStatus: _angular_core.Signal<"default" | "error" | "disabled" | "readonly" | "active">;
|
|
90
90
|
protected readonly dropzoneClasses: _angular_core.Signal<string>;
|
|
91
91
|
protected readonly acceptTypes: _angular_core.Signal<string>;
|
|
92
92
|
protected readonly formatFileSize: (bytes: number) => string;
|
|
@@ -125,11 +125,11 @@ declare class ZUploadComponent implements OnInit, ControlValueAccessor {
|
|
|
125
125
|
|
|
126
126
|
declare const zUploadDropzoneVariants: (props?: ({
|
|
127
127
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
128
|
-
zStatus?: "default" | "
|
|
128
|
+
zStatus?: "default" | "error" | "active" | "disabled" | "readonly" | null | undefined;
|
|
129
129
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
130
130
|
type ZUploadDropzoneVariants = VariantProps<typeof zUploadDropzoneVariants>;
|
|
131
131
|
declare const zUploadFileItemVariants: (props?: ({
|
|
132
|
-
zStatus?: "
|
|
132
|
+
zStatus?: "pending" | "uploading" | "success" | "error" | null | undefined;
|
|
133
133
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
134
134
|
type ZUploadFileItemVariants = VariantProps<typeof zUploadFileItemVariants>;
|
|
135
135
|
|