@m1z23r/ngx-ui 1.1.28 → 1.1.30
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/m1z23r-ngx-ui.mjs +126 -16
- package/fesm2022/m1z23r-ngx-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/m1z23r-ngx-ui.d.ts +42 -5
|
@@ -2831,6 +2831,8 @@ class TabComponent {
|
|
|
2831
2831
|
iconDirective = contentChild(TabIconDirective, ...(ngDevMode ? [{ debugName: "iconDirective" }] : []));
|
|
2832
2832
|
/** @internal */
|
|
2833
2833
|
_index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
|
|
2834
|
+
/** @internal */
|
|
2835
|
+
_renderMode = signal('conditional', ...(ngDevMode ? [{ debugName: "_renderMode" }] : []));
|
|
2834
2836
|
_parent = null;
|
|
2835
2837
|
iconTemplate = computed(() => {
|
|
2836
2838
|
return this.iconDirective()?.templateRef ?? null;
|
|
@@ -2846,11 +2848,11 @@ class TabComponent {
|
|
|
2846
2848
|
this._index.set(index);
|
|
2847
2849
|
}
|
|
2848
2850
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2849
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabComponent, isStandalone: true, selector: "ui-tab, [ui-tab]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconDirective", first: true, predicate: TabIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isActive()) {\n <div\n class=\"ui-tab-panel\"\n role=\"tabpanel\"\n [attr.id]=\"'panel-' + (id() || _index())\"\n [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2851
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabComponent, isStandalone: true, selector: "ui-tab, [ui-tab]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconDirective", first: true, predicate: TabIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (_renderMode() === 'persistent' || isActive()) {\n <div\n class=\"ui-tab-panel\"\n [class.ui-tab-panel--hidden]=\"_renderMode() === 'persistent' && !isActive()\"\n role=\"tabpanel\"\n [attr.id]=\"'panel-' + (id() || _index())\"\n [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2850
2852
|
}
|
|
2851
2853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabComponent, decorators: [{
|
|
2852
2854
|
type: Component,
|
|
2853
|
-
args: [{ selector: 'ui-tab, [ui-tab]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isActive()) {\n <div\n class=\"ui-tab-panel\"\n role=\"tabpanel\"\n [attr.id]=\"'panel-' + (id() || _index())\"\n [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
2855
|
+
args: [{ selector: 'ui-tab, [ui-tab]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_renderMode() === 'persistent' || isActive()) {\n <div\n class=\"ui-tab-panel\"\n [class.ui-tab-panel--hidden]=\"_renderMode() === 'persistent' && !isActive()\"\n role=\"tabpanel\"\n [attr.id]=\"'panel-' + (id() || _index())\"\n [attr.aria-labelledby]=\"'tab-' + (id() || _index())\"\n >\n <ng-content />\n </div>\n}\n", styles: [":host{display:block}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
2854
2856
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabIconDirective), { isSignal: true }] }] } });
|
|
2855
2857
|
|
|
2856
2858
|
class TabActivePipe {
|
|
@@ -2877,6 +2879,7 @@ class TabsComponent {
|
|
|
2877
2879
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
2878
2880
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
2879
2881
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
2882
|
+
renderMode = input('conditional', ...(ngDevMode ? [{ debugName: "renderMode" }] : []));
|
|
2880
2883
|
activeTab = model(0, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
|
|
2881
2884
|
tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
2882
2885
|
tabList = viewChild('tabList', ...(ngDevMode ? [{ debugName: "tabList" }] : []));
|
|
@@ -2888,8 +2891,10 @@ class TabsComponent {
|
|
|
2888
2891
|
constructor() {
|
|
2889
2892
|
effect(() => {
|
|
2890
2893
|
const tabList = this.tabs();
|
|
2894
|
+
const renderMode = this.renderMode();
|
|
2891
2895
|
tabList.forEach((tab, index) => {
|
|
2892
2896
|
tab._setTabsParent(this, index);
|
|
2897
|
+
tab._renderMode.set(renderMode);
|
|
2893
2898
|
});
|
|
2894
2899
|
});
|
|
2895
2900
|
afterRenderEffect(() => {
|
|
@@ -2987,12 +2992,12 @@ class TabsComponent {
|
|
|
2987
2992
|
return active === index;
|
|
2988
2993
|
}
|
|
2989
2994
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2990
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n <div\n #tabList\n class=\"ui-tabs__list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n @let active = tab | tabActive:i:activeTab();\n <button\n #tabButton\n type=\"button\"\n class=\"ui-tabs__tab\"\n role=\"tab\"\n [class.ui-tabs__tab--active]=\"active\"\n [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n [attr.aria-selected]=\"active\"\n [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n [attr.tabindex]=\"active ? 0 : -1\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(tab, i)\"\n (keydown)=\"handleKeyDown($event, i)\"\n >\n @if (tab.iconTemplate()) {\n <span class=\"ui-tabs__tab-icon\">\n <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n </span>\n }\n {{ tab.label() }}\n </button>\n }\n @if (variant() === 'underline') {\n <span\n class=\"ui-tabs__indicator\"\n [style.left.px]=\"indicatorLeft()\"\n [style.width.px]=\"indicatorWidth()\"\n ></span>\n }\n </div>\n <div class=\"ui-tabs__panels\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TabActivePipe, name: "tabActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2995
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TabsComponent, isStandalone: true, selector: "ui-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n <div\n #tabList\n class=\"ui-tabs__list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n @let active = tab | tabActive:i:activeTab();\n <button\n #tabButton\n type=\"button\"\n class=\"ui-tabs__tab\"\n role=\"tab\"\n [class.ui-tabs__tab--active]=\"active\"\n [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n [attr.aria-selected]=\"active\"\n [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n [attr.tabindex]=\"active ? 0 : -1\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(tab, i)\"\n (keydown)=\"handleKeyDown($event, i)\"\n >\n @if (tab.iconTemplate()) {\n <span class=\"ui-tabs__tab-icon\">\n <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n </span>\n }\n {{ tab.label() }}\n </button>\n }\n @if (variant() === 'underline') {\n <span\n class=\"ui-tabs__indicator\"\n [style.left.px]=\"indicatorLeft()\"\n [style.width.px]=\"indicatorWidth()\"\n ></span>\n }\n </div>\n <div class=\"ui-tabs__panels\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TabActivePipe, name: "tabActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2991
2996
|
}
|
|
2992
2997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TabsComponent, decorators: [{
|
|
2993
2998
|
type: Component,
|
|
2994
2999
|
args: [{ selector: 'ui-tabs', standalone: true, imports: [NgTemplateOutlet, TabActivePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n <div\n #tabList\n class=\"ui-tabs__list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n @let active = tab | tabActive:i:activeTab();\n <button\n #tabButton\n type=\"button\"\n class=\"ui-tabs__tab\"\n role=\"tab\"\n [class.ui-tabs__tab--active]=\"active\"\n [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n [attr.aria-selected]=\"active\"\n [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n [attr.tabindex]=\"active ? 0 : -1\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(tab, i)\"\n (keydown)=\"handleKeyDown($event, i)\"\n >\n @if (tab.iconTemplate()) {\n <span class=\"ui-tabs__tab-icon\">\n <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n </span>\n }\n {{ tab.label() }}\n </button>\n }\n @if (variant() === 'underline') {\n <span\n class=\"ui-tabs__indicator\"\n [style.left.px]=\"indicatorLeft()\"\n [style.width.px]=\"indicatorWidth()\"\n ></span>\n }\n </div>\n <div class=\"ui-tabs__panels\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"] }]
|
|
2995
|
-
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
|
|
3000
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
|
|
2996
3001
|
|
|
2997
3002
|
class DynamicTabsComponent {
|
|
2998
3003
|
tabsService = inject(TabsService);
|
|
@@ -3000,6 +3005,7 @@ class DynamicTabsComponent {
|
|
|
3000
3005
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
3001
3006
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
3002
3007
|
ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
3008
|
+
renderMode = input('conditional', ...(ngDevMode ? [{ debugName: "renderMode" }] : []));
|
|
3003
3009
|
tabList = viewChild('tabList', ...(ngDevMode ? [{ debugName: "tabList" }] : []));
|
|
3004
3010
|
indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
|
|
3005
3011
|
indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
|
|
@@ -3102,7 +3108,7 @@ class DynamicTabsComponent {
|
|
|
3102
3108
|
}
|
|
3103
3109
|
}
|
|
3104
3110
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DynamicTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DynamicTabsComponent, isStandalone: true, selector: "ui-dynamic-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DynamicTabsComponent, isStandalone: true, selector: "ui-dynamic-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3106
3112
|
<div class="ui-tabs" [class]="tabsClasses()">
|
|
3107
3113
|
<div
|
|
3108
3114
|
#tabList
|
|
@@ -3164,9 +3170,10 @@ class DynamicTabsComponent {
|
|
|
3164
3170
|
</div>
|
|
3165
3171
|
<div class="ui-tabs__panels">
|
|
3166
3172
|
@for (tab of tabs(); track tab.id) {
|
|
3167
|
-
@if (tab.id === activeTabId()) {
|
|
3173
|
+
@if (renderMode() === 'persistent' || tab.id === activeTabId()) {
|
|
3168
3174
|
<div
|
|
3169
3175
|
class="ui-tab-panel"
|
|
3176
|
+
[class.ui-tab-panel--hidden]="renderMode() === 'persistent' && tab.id !== activeTabId()"
|
|
3170
3177
|
role="tabpanel"
|
|
3171
3178
|
[attr.id]="'panel-' + tab.id"
|
|
3172
3179
|
>
|
|
@@ -3178,7 +3185,7 @@ class DynamicTabsComponent {
|
|
|
3178
3185
|
}
|
|
3179
3186
|
</div>
|
|
3180
3187
|
</div>
|
|
3181
|
-
`, isInline: true, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3188
|
+
`, isInline: true, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3182
3189
|
}
|
|
3183
3190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DynamicTabsComponent, decorators: [{
|
|
3184
3191
|
type: Component,
|
|
@@ -3244,9 +3251,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3244
3251
|
</div>
|
|
3245
3252
|
<div class="ui-tabs__panels">
|
|
3246
3253
|
@for (tab of tabs(); track tab.id) {
|
|
3247
|
-
@if (tab.id === activeTabId()) {
|
|
3254
|
+
@if (renderMode() === 'persistent' || tab.id === activeTabId()) {
|
|
3248
3255
|
<div
|
|
3249
3256
|
class="ui-tab-panel"
|
|
3257
|
+
[class.ui-tab-panel--hidden]="renderMode() === 'persistent' && tab.id !== activeTabId()"
|
|
3250
3258
|
role="tabpanel"
|
|
3251
3259
|
[attr.id]="'panel-' + tab.id"
|
|
3252
3260
|
>
|
|
@@ -3258,8 +3266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3258
3266
|
}
|
|
3259
3267
|
</div>
|
|
3260
3268
|
</div>
|
|
3261
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
3262
|
-
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
|
|
3269
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n", ".ui-tabs__tab--closable{padding-right:var(--ui-spacing-xs)}.ui-tabs__tab-label{flex:1}.ui-tabs__tab-close{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:var(--ui-spacing-xs);padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;opacity:0;transition:all var(--ui-transition-fast)}.ui-tabs__tab:hover .ui-tabs__tab-close,.ui-tabs__tab:focus-within .ui-tabs__tab-close{opacity:1}.ui-tabs__tab-close:hover{background:var(--ui-bg-hover);color:var(--ui-danger)}.ui-tabs__tab-close:focus-visible{opacity:1;outline:2px solid var(--ui-primary);outline-offset:1px}.ui-tab-panel{animation:fadeIn var(--ui-transition-fast)}.ui-tab-panel--hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
|
|
3270
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
|
|
3263
3271
|
|
|
3264
3272
|
class AccordionHeaderDirective {
|
|
3265
3273
|
templateRef = inject(TemplateRef);
|
|
@@ -5786,6 +5794,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5786
5794
|
}, template: "<ng-content />\n@for (gutterIndex of gutterIndices(); track gutterIndex) {\n <div\n class=\"ui-split__gutter\"\n [class]=\"gutterSizeClass()\"\n [style.order]=\"gutterIndex * 2 + 1\"\n role=\"separator\"\n tabindex=\"0\"\n [attr.aria-orientation]=\"orientation() === 'horizontal' ? 'vertical' : 'horizontal'\"\n [attr.aria-valuenow]=\"paneSizes()[gutterIndex] | number:'1.0-1'\"\n [attr.aria-valuemin]=\"panes()[gutterIndex]?.minSize()\"\n [attr.aria-valuemax]=\"panes()[gutterIndex]?.maxSize()\"\n (mousedown)=\"onGutterMouseDown($event, gutterIndex)\"\n (keydown)=\"onGutterKeyDown($event, gutterIndex)\"\n >\n <div class=\"ui-split__gutter-handle\"></div>\n </div>\n}\n", styles: [":host{display:flex;width:100%;height:100%;overflow:hidden}:host.ui-split--horizontal{flex-direction:row}:host.ui-split--vertical{flex-direction:column}:host.ui-split--disabled>.ui-split__gutter{cursor:default;pointer-events:none}:host.ui-split--dragging{-webkit-user-select:none;user-select:none}.ui-split__gutter{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background-color:var(--ui-bg-secondary);transition:background-color var(--ui-transition-fast)}.ui-split__gutter:hover,.ui-split__gutter:focus{background-color:var(--ui-bg-tertiary)}.ui-split__gutter:hover .ui-split__gutter-handle,.ui-split__gutter:focus .ui-split__gutter-handle{background-color:var(--ui-primary)}.ui-split__gutter:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ui-primary)}:host(.ui-split--horizontal)>.ui-split__gutter--sm{width:4px}:host(.ui-split--horizontal)>.ui-split__gutter--md{width:8px}:host(.ui-split--horizontal)>.ui-split__gutter--lg{width:12px}:host(.ui-split--vertical)>.ui-split__gutter--sm{height:4px}:host(.ui-split--vertical)>.ui-split__gutter--md{height:8px}:host(.ui-split--vertical)>.ui-split__gutter--lg{height:12px}:host(.ui-split--horizontal)>.ui-split__gutter{cursor:col-resize}:host(.ui-split--vertical)>.ui-split__gutter{cursor:row-resize;width:100%}:host(.ui-split--dragging.ui-split--horizontal){cursor:col-resize}:host(.ui-split--dragging.ui-split--vertical){cursor:row-resize}.ui-split__gutter-handle{background-color:var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast)}:host(.ui-split--horizontal)>.ui-split__gutter .ui-split__gutter-handle{width:2px;height:24px}:host(.ui-split--vertical)>.ui-split__gutter .ui-split__gutter-handle{width:24px;height:2px}\n"] }]
|
|
5787
5795
|
}], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SplitPaneComponent), { isSignal: true }] }] } });
|
|
5788
5796
|
|
|
5797
|
+
function isDescendantOf(target, potentialAncestor) {
|
|
5798
|
+
if (!potentialAncestor.children)
|
|
5799
|
+
return false;
|
|
5800
|
+
for (const child of potentialAncestor.children) {
|
|
5801
|
+
if (child === target || isDescendantOf(target, child))
|
|
5802
|
+
return true;
|
|
5803
|
+
}
|
|
5804
|
+
return false;
|
|
5805
|
+
}
|
|
5789
5806
|
class TreeNodeComponent {
|
|
5790
5807
|
node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
|
|
5791
5808
|
level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
|
|
@@ -5793,6 +5810,7 @@ class TreeNodeComponent {
|
|
|
5793
5810
|
nodeClick = output();
|
|
5794
5811
|
nodeExpand = output();
|
|
5795
5812
|
nodeCollapse = output();
|
|
5813
|
+
treeHost = inject(TREE_HOST);
|
|
5796
5814
|
_expanded = signal(null, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
|
|
5797
5815
|
isExpanded = computed(() => {
|
|
5798
5816
|
const manualState = this._expanded();
|
|
@@ -5809,6 +5827,14 @@ class TreeNodeComponent {
|
|
|
5809
5827
|
const lvl = this.level();
|
|
5810
5828
|
return lvl > 0 ? Array.from({ length: lvl }, (_, i) => i) : [];
|
|
5811
5829
|
}, ...(ngDevMode ? [{ debugName: "indentGuides" }] : []));
|
|
5830
|
+
isDraggable = computed(() => this.treeHost.draggable(), ...(ngDevMode ? [{ debugName: "isDraggable" }] : []));
|
|
5831
|
+
isDragging = computed(() => this.treeHost._dragNode() === this.node(), ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
5832
|
+
dropPosition = computed(() => {
|
|
5833
|
+
if (this.treeHost._dragOverNode() === this.node()) {
|
|
5834
|
+
return this.treeHost._dropPosition();
|
|
5835
|
+
}
|
|
5836
|
+
return null;
|
|
5837
|
+
}, ...(ngDevMode ? [{ debugName: "dropPosition" }] : []));
|
|
5812
5838
|
toggle(event) {
|
|
5813
5839
|
event.stopPropagation();
|
|
5814
5840
|
if (!this.hasChildren())
|
|
@@ -5832,6 +5858,77 @@ class TreeNodeComponent {
|
|
|
5832
5858
|
this.toggle(event);
|
|
5833
5859
|
}
|
|
5834
5860
|
}
|
|
5861
|
+
onDragStart(event) {
|
|
5862
|
+
if (!this.isDraggable())
|
|
5863
|
+
return;
|
|
5864
|
+
this.treeHost._dragNode.set(this.node());
|
|
5865
|
+
event.dataTransfer.effectAllowed = 'move';
|
|
5866
|
+
event.dataTransfer.setData('text/plain', this.node().label);
|
|
5867
|
+
}
|
|
5868
|
+
onDragEnd() {
|
|
5869
|
+
this.treeHost._dragNode.set(null);
|
|
5870
|
+
this.treeHost._dragOverNode.set(null);
|
|
5871
|
+
this.treeHost._dropPosition.set(null);
|
|
5872
|
+
}
|
|
5873
|
+
onDragOver(event) {
|
|
5874
|
+
if (!this.isDraggable())
|
|
5875
|
+
return;
|
|
5876
|
+
const dragNode = this.treeHost._dragNode();
|
|
5877
|
+
if (!dragNode)
|
|
5878
|
+
return;
|
|
5879
|
+
// Prevent dropping on self or own descendants
|
|
5880
|
+
if (dragNode === this.node() || isDescendantOf(this.node(), dragNode)) {
|
|
5881
|
+
return;
|
|
5882
|
+
}
|
|
5883
|
+
event.preventDefault();
|
|
5884
|
+
event.dataTransfer.dropEffect = 'move';
|
|
5885
|
+
const target = event.currentTarget.querySelector('.ui-tree-node__content');
|
|
5886
|
+
if (!target)
|
|
5887
|
+
return;
|
|
5888
|
+
const rect = target.getBoundingClientRect();
|
|
5889
|
+
const y = event.clientY - rect.top;
|
|
5890
|
+
const ratio = y / rect.height;
|
|
5891
|
+
let position;
|
|
5892
|
+
if (ratio < 0.25) {
|
|
5893
|
+
position = 'before';
|
|
5894
|
+
}
|
|
5895
|
+
else if (ratio > 0.75) {
|
|
5896
|
+
position = 'after';
|
|
5897
|
+
}
|
|
5898
|
+
else {
|
|
5899
|
+
position = 'inside';
|
|
5900
|
+
}
|
|
5901
|
+
this.treeHost._dragOverNode.set(this.node());
|
|
5902
|
+
this.treeHost._dropPosition.set(position);
|
|
5903
|
+
}
|
|
5904
|
+
onDragLeave(event) {
|
|
5905
|
+
const related = event.relatedTarget;
|
|
5906
|
+
const current = event.currentTarget;
|
|
5907
|
+
if (related && current.contains(related))
|
|
5908
|
+
return;
|
|
5909
|
+
if (this.treeHost._dragOverNode() === this.node()) {
|
|
5910
|
+
this.treeHost._dragOverNode.set(null);
|
|
5911
|
+
this.treeHost._dropPosition.set(null);
|
|
5912
|
+
}
|
|
5913
|
+
}
|
|
5914
|
+
onDrop(event) {
|
|
5915
|
+
event.preventDefault();
|
|
5916
|
+
const dragNode = this.treeHost._dragNode();
|
|
5917
|
+
const position = this.treeHost._dropPosition();
|
|
5918
|
+
if (!dragNode || !position)
|
|
5919
|
+
return;
|
|
5920
|
+
if (dragNode === this.node() || isDescendantOf(this.node(), dragNode)) {
|
|
5921
|
+
return;
|
|
5922
|
+
}
|
|
5923
|
+
this.treeHost._emitDrop({
|
|
5924
|
+
node: dragNode,
|
|
5925
|
+
target: this.node(),
|
|
5926
|
+
position,
|
|
5927
|
+
});
|
|
5928
|
+
this.treeHost._dragNode.set(null);
|
|
5929
|
+
this.treeHost._dragOverNode.set(null);
|
|
5930
|
+
this.treeHost._dropPosition.set(null);
|
|
5931
|
+
}
|
|
5835
5932
|
/** @internal - forward events from child nodes */
|
|
5836
5933
|
_onChildNodeClick(node) {
|
|
5837
5934
|
this.nodeClick.emit(node);
|
|
@@ -5845,19 +5942,28 @@ class TreeNodeComponent {
|
|
|
5845
5942
|
this.nodeCollapse.emit(node);
|
|
5846
5943
|
}
|
|
5847
5944
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5848
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeNodeComponent, isStandalone: true, selector: "ui-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, ngImport: i0, template: "<div
|
|
5945
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeNodeComponent, isStandalone: true, selector: "ui-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, ngImport: i0, template: "<div\n class=\"ui-tree-node\"\n [class.ui-tree-node--dragging]=\"isDragging()\"\n [attr.draggable]=\"isDraggable()\"\n (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n>\n <div class=\"ui-tree-node__guides\">\n @for (guide of indentGuides(); track guide) {\n <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n }\n </div>\n <div\n class=\"ui-tree-node__content\"\n [class.ui-tree-node__content--selected]=\"false\"\n [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n [style.padding-left.px]=\"level() * indent() + 8\"\n (click)=\"onClick($event)\"\n (dblclick)=\"onDoubleClick($event)\"\n >\n @if (hasChildren()) {\n <button\n type=\"button\"\n class=\"ui-tree-node__toggle\"\n [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n (click)=\"toggle($event)\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n >\n <svg\n class=\"ui-tree-node__chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n @if (node().icon) {\n <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n }\n <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n @for (child of node().children; track child) {\n <ui-tree-node\n [node]=\"child\"\n [level]=\"level() + 1\"\n [indent]=\"indent()\"\n (nodeClick)=\"_onChildNodeClick($event)\"\n (nodeExpand)=\"_onChildNodeExpand($event)\"\n (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n />\n }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5849
5946
|
}
|
|
5850
5947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, decorators: [{
|
|
5851
5948
|
type: Component,
|
|
5852
|
-
args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
5949
|
+
args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ui-tree-node\"\n [class.ui-tree-node--dragging]=\"isDragging()\"\n [attr.draggable]=\"isDraggable()\"\n (dragstart)=\"onDragStart($event)\"\n (dragend)=\"onDragEnd()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n>\n <div class=\"ui-tree-node__guides\">\n @for (guide of indentGuides(); track guide) {\n <span class=\"ui-tree-node__guide\" [style.width.px]=\"indent()\"></span>\n }\n </div>\n <div\n class=\"ui-tree-node__content\"\n [class.ui-tree-node__content--selected]=\"false\"\n [class.ui-tree-node__content--drop-before]=\"dropPosition() === 'before'\"\n [class.ui-tree-node__content--drop-after]=\"dropPosition() === 'after'\"\n [class.ui-tree-node__content--drop-inside]=\"dropPosition() === 'inside'\"\n [style.padding-left.px]=\"level() * indent() + 8\"\n (click)=\"onClick($event)\"\n (dblclick)=\"onDoubleClick($event)\"\n >\n @if (hasChildren()) {\n <button\n type=\"button\"\n class=\"ui-tree-node__toggle\"\n [class.ui-tree-node__toggle--expanded]=\"isExpanded()\"\n (click)=\"toggle($event)\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-label]=\"isExpanded() ? 'Collapse' : 'Expand'\"\n >\n <svg\n class=\"ui-tree-node__chevron\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n }\n @if (node().icon) {\n <span class=\"ui-tree-node__icon\">{{ node().icon }}</span>\n }\n <span class=\"ui-tree-node__label\">{{ node().label }}</span>\n </div>\n</div>\n@if (isExpanded() && hasChildren()) {\n @for (child of node().children; track child) {\n <ui-tree-node\n [node]=\"child\"\n [level]=\"level() + 1\"\n [indent]=\"indent()\"\n (nodeClick)=\"_onChildNodeClick($event)\"\n (nodeExpand)=\"_onChildNodeExpand($event)\"\n (nodeCollapse)=\"_onChildNodeCollapse($event)\"\n />\n }\n}\n", styles: [":host{display:block}.ui-tree-node{position:relative}.ui-tree-node__guides{position:absolute;top:0;bottom:0;left:0;display:flex;pointer-events:none}.ui-tree-node__guide{position:relative;flex-shrink:0}.ui-tree-node__guide:after{content:\"\";position:absolute;left:50%;top:0;bottom:0;width:1px;background-color:var(--ui-border-hover)}.ui-tree-node__content{display:flex;align-items:center;gap:var(--ui-spacing-xs);padding:var(--ui-spacing-xs) var(--ui-spacing-sm) var(--ui-spacing-xs) 0;border-radius:var(--ui-radius-sm);cursor:pointer;transition:background-color var(--ui-transition-fast)}.ui-tree-node__content:hover{background-color:var(--ui-bg-hover)}.ui-tree-node__content--selected{background-color:var(--ui-option-selected-bg);color:var(--ui-option-selected-text)}.ui-tree-node__toggle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text-muted);cursor:pointer;flex-shrink:0;transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-tree-node__toggle:hover{background-color:var(--ui-bg-hover);color:var(--ui-text)}.ui-tree-node__toggle:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}.ui-tree-node__chevron{transition:transform var(--ui-transition-fast)}.ui-tree-node__toggle--expanded .ui-tree-node__chevron{transform:rotate(90deg)}.ui-tree-node__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;font-size:var(--ui-font-sm);color:var(--ui-text-muted)}.ui-tree-node__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.ui-tree-node--dragging{opacity:.4}.ui-tree-node__content--drop-before{position:relative}.ui-tree-node__content--drop-before:before{content:\"\";position:absolute;top:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-after{position:relative}.ui-tree-node__content--drop-after:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:var(--ui-primary);border-radius:1px;pointer-events:none}.ui-tree-node__content--drop-inside{background-color:color-mix(in srgb,var(--ui-primary) 10%,transparent);outline:1px solid var(--ui-primary);outline-offset:-1px;border-radius:var(--ui-radius-sm)}\n"] }]
|
|
5853
5950
|
}], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }] } });
|
|
5854
5951
|
|
|
5952
|
+
const TREE_HOST = new InjectionToken('TREE_HOST');
|
|
5855
5953
|
class TreeComponent {
|
|
5856
5954
|
nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
|
|
5857
5955
|
indent = input(16, ...(ngDevMode ? [{ debugName: "indent" }] : []));
|
|
5956
|
+
draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
5858
5957
|
nodeClick = output();
|
|
5859
5958
|
nodeExpand = output();
|
|
5860
5959
|
nodeCollapse = output();
|
|
5960
|
+
nodeDrop = output();
|
|
5961
|
+
/** @internal */
|
|
5962
|
+
_dragNode = signal(null, ...(ngDevMode ? [{ debugName: "_dragNode" }] : []));
|
|
5963
|
+
/** @internal */
|
|
5964
|
+
_dragOverNode = signal(null, ...(ngDevMode ? [{ debugName: "_dragOverNode" }] : []));
|
|
5965
|
+
/** @internal */
|
|
5966
|
+
_dropPosition = signal(null, ...(ngDevMode ? [{ debugName: "_dropPosition" }] : []));
|
|
5861
5967
|
/** @internal */
|
|
5862
5968
|
_onNodeClick(node) {
|
|
5863
5969
|
this.nodeClick.emit(node);
|
|
@@ -5870,13 +5976,17 @@ class TreeComponent {
|
|
|
5870
5976
|
_onNodeCollapse(node) {
|
|
5871
5977
|
this.nodeCollapse.emit(node);
|
|
5872
5978
|
}
|
|
5979
|
+
/** @internal */
|
|
5980
|
+
_emitDrop(event) {
|
|
5981
|
+
this.nodeDrop.emit(event);
|
|
5982
|
+
}
|
|
5873
5983
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5874
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeComponent, isStandalone: true, selector: "ui-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse" }, ngImport: i0, template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5984
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TreeComponent, isStandalone: true, selector: "ui-tree", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, indent: { classPropertyName: "indent", publicName: "indent", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", nodeDrop: "nodeDrop" }, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], ngImport: i0, template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "ui-tree-node", inputs: ["node", "level", "indent"], outputs: ["nodeClick", "nodeExpand", "nodeCollapse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5875
5985
|
}
|
|
5876
5986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, decorators: [{
|
|
5877
5987
|
type: Component,
|
|
5878
|
-
args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
|
|
5879
|
-
}], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }] } });
|
|
5988
|
+
args: [{ selector: 'ui-tree', standalone: true, imports: [TreeNodeComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TREE_HOST, useExisting: TreeComponent }], template: "<div class=\"ui-tree\">\n @for (node of nodes(); track node) {\n <ui-tree-node\n [node]=\"node\"\n [level]=\"0\"\n [indent]=\"indent()\"\n (nodeClick)=\"_onNodeClick($event)\"\n (nodeExpand)=\"_onNodeExpand($event)\"\n (nodeCollapse)=\"_onNodeCollapse($event)\"\n />\n }\n</div>\n", styles: [":host{display:block}.ui-tree{font-size:var(--ui-font-sm);color:var(--ui-text);-webkit-user-select:none;user-select:none}\n"] }]
|
|
5989
|
+
}], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], indent: [{ type: i0.Input, args: [{ isSignal: true, alias: "indent", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }] } });
|
|
5880
5990
|
|
|
5881
5991
|
/*
|
|
5882
5992
|
* Public API Surface of @m1z23r/ngx-ui
|
|
@@ -5887,5 +5997,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5887
5997
|
* Generated bundle index. Do not edit.
|
|
5888
5998
|
*/
|
|
5889
5999
|
|
|
5890
|
-
export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators };
|
|
6000
|
+
export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators };
|
|
5891
6001
|
//# sourceMappingURL=m1z23r-ngx-ui.mjs.map
|