@ng-nest/ui 20.1.3 → 20.1.4
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/checkbox/index.d.ts +1 -1
- package/core/index.d.ts +11 -4
- package/coversations/index.d.ts +116 -0
- package/fesm2022/ng-nest-ui-bubble.mjs +3 -3
- package/fesm2022/ng-nest-ui-bubble.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-core.mjs +13 -8
- package/fesm2022/ng-nest-ui-core.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-coversations.mjs +85 -0
- package/fesm2022/ng-nest-ui-coversations.mjs.map +1 -0
- package/fesm2022/ng-nest-ui-input.mjs +2 -2
- package/fesm2022/ng-nest-ui-input.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-list.mjs +69 -25
- package/fesm2022/ng-nest-ui-list.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-menu.mjs +8 -4
- package/fesm2022/ng-nest-ui-menu.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-select.mjs +6 -6
- package/fesm2022/ng-nest-ui-select.mjs.map +1 -1
- package/fesm2022/ng-nest-ui.mjs +1 -0
- package/fesm2022/ng-nest-ui.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/list/index.d.ts +38 -4
- package/package.json +56 -52
- package/radio/index.d.ts +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Subject } from 'rxjs';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { input, output, Component, model, inject, ElementRef, computed, effect, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, InjectionToken, Directive, signal, viewChild, afterEveryRender, HostListener, ViewChildren, NgModule } from '@angular/core';
|
|
4
|
-
import { XToNumber, XToBoolean, XIsUndefined, XIsEmpty, XIsChange, XResize, XSetData, XIsNull } from '@ng-nest/ui/core';
|
|
4
|
+
import { XToNumber, XToBoolean, XIsUndefined, XIsEmpty, XIsChange, XResize, XSetData, XGroupBy, XIsNull } from '@ng-nest/ui/core';
|
|
5
5
|
import { XFormControlFunction, XValueAccessor } from '@ng-nest/ui/base-form';
|
|
6
|
-
import { CdkDropList, moveItemInArray, CdkDrag } from '@angular/cdk/drag-drop';
|
|
6
|
+
import { CdkDropList, moveItemInArray, transferArrayItem, CdkDrag } from '@angular/cdk/drag-drop';
|
|
7
7
|
import { XIconComponent } from '@ng-nest/ui/icon';
|
|
8
8
|
import { XKeywordDirective } from '@ng-nest/ui/keyword';
|
|
9
9
|
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
@@ -73,6 +73,11 @@ class XListProperty extends XFormControlFunction(X_LIST_CONFIG_NAME) {
|
|
|
73
73
|
* @en_US Node template
|
|
74
74
|
*/
|
|
75
75
|
this.nodeTpl = input(...(ngDevMode ? [undefined, { debugName: "nodeTpl" }] : []));
|
|
76
|
+
/**
|
|
77
|
+
* @zh_CN 节点样式
|
|
78
|
+
* @en_US Node style
|
|
79
|
+
*/
|
|
80
|
+
this.nodeStyle = input(...(ngDevMode ? [undefined, { debugName: "nodeStyle" }] : []));
|
|
76
81
|
/**
|
|
77
82
|
* @zh_CN 列表头部
|
|
78
83
|
* @en_US List header
|
|
@@ -187,7 +192,7 @@ class XListProperty extends XFormControlFunction(X_LIST_CONFIG_NAME) {
|
|
|
187
192
|
this.size = input(this.config?.size ?? 'medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
188
193
|
}
|
|
189
194
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
190
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListProperty, isStandalone: true, selector: "x-list-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, inPortal: { classPropertyName: "inPortal", publicName: "inPortal", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
195
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListProperty, isStandalone: true, selector: "x-list-property", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, objectArray: { classPropertyName: "objectArray", publicName: "objectArray", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, scrollElement: { classPropertyName: "scrollElement", publicName: "scrollElement", isSignal: true, isRequired: false, transformFunction: null }, loadMore: { classPropertyName: "loadMore", publicName: "loadMore", isSignal: true, isRequired: false, transformFunction: null }, loadMoreText: { classPropertyName: "loadMoreText", publicName: "loadMoreText", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreText: { classPropertyName: "loadingMoreText", publicName: "loadingMoreText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, heightAdaption: { classPropertyName: "heightAdaption", publicName: "heightAdaption", isSignal: true, isRequired: false, transformFunction: null }, minBufferPx: { classPropertyName: "minBufferPx", publicName: "minBufferPx", isSignal: true, isRequired: false, transformFunction: null }, maxBufferPx: { classPropertyName: "maxBufferPx", publicName: "maxBufferPx", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null }, inPortal: { classPropertyName: "inPortal", publicName: "inPortal", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectAll: "onSelectAll", nodeMouseenter: "nodeMouseenter", nodeMouseleave: "nodeMouseleave", nodeClick: "nodeClick", dropListDropped: "dropListDropped", keyManagerTabOut: "keyManagerTabOut", keyManagerChange: "keyManagerChange" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
191
196
|
}
|
|
192
197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListProperty, decorators: [{
|
|
193
198
|
type: Component,
|
|
@@ -219,11 +224,21 @@ class XListOptionProperty {
|
|
|
219
224
|
* @en_US Node template
|
|
220
225
|
*/
|
|
221
226
|
this.nodeTpl = input(...(ngDevMode ? [undefined, { debugName: "nodeTpl" }] : []));
|
|
227
|
+
/**
|
|
228
|
+
* @zh_CN 节点样式
|
|
229
|
+
* @en_US Node style
|
|
230
|
+
*/
|
|
231
|
+
this.nodeStyle = input(...(ngDevMode ? [undefined, { debugName: "nodeStyle" }] : []));
|
|
222
232
|
/**
|
|
223
233
|
* @zh_CN 选中
|
|
224
234
|
* @en_US selected
|
|
225
235
|
*/
|
|
226
236
|
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected", transform: XToBoolean }] : [{ transform: XToBoolean }]));
|
|
237
|
+
/**
|
|
238
|
+
* @zh_CN 分组节点
|
|
239
|
+
* @en_US Group node
|
|
240
|
+
*/
|
|
241
|
+
this.groupable = input(false, ...(ngDevMode ? [{ debugName: "groupable", transform: XToBoolean }] : [{ transform: XToBoolean }]));
|
|
227
242
|
/**
|
|
228
243
|
* @zh_CN 禁用
|
|
229
244
|
* @en_US forbidden
|
|
@@ -281,7 +296,7 @@ class XListOptionProperty {
|
|
|
281
296
|
this.caseSensitive = input(true, ...(ngDevMode ? [{ debugName: "caseSensitive", transform: XToBoolean }] : [{ transform: XToBoolean }]));
|
|
282
297
|
}
|
|
283
298
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionProperty, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
284
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListOptionProperty, isStandalone: true, selector: "x-list-option-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, forbidden: { classPropertyName: "forbidden", publicName: "forbidden", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, openPortal: { classPropertyName: "openPortal", publicName: "openPortal", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
|
|
299
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.0", type: XListOptionProperty, isStandalone: true, selector: "x-list-option-property", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, nodeTpl: { classPropertyName: "nodeTpl", publicName: "nodeTpl", isSignal: true, isRequired: false, transformFunction: null }, nodeStyle: { classPropertyName: "nodeStyle", publicName: "nodeStyle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, forbidden: { classPropertyName: "forbidden", publicName: "forbidden", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, openPortal: { classPropertyName: "openPortal", publicName: "openPortal", isSignal: true, isRequired: false, transformFunction: null }, optionClass: { classPropertyName: "optionClass", publicName: "optionClass", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, divided: { classPropertyName: "divided", publicName: "divided", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, keywordText: { classPropertyName: "keywordText", publicName: "keywordText", isSignal: true, isRequired: false, transformFunction: null }, caseSensitive: { classPropertyName: "caseSensitive", publicName: "caseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, ngImport: i0, template: '', isInline: true }); }
|
|
285
300
|
}
|
|
286
301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionProperty, decorators: [{
|
|
287
302
|
type: Component,
|
|
@@ -297,6 +312,12 @@ class XListOptionComponent extends XListOptionProperty {
|
|
|
297
312
|
[`${XListOptionPrefix}-${this.size()}`]: this.size() ? true : false
|
|
298
313
|
}), ...(ngDevMode ? [{ debugName: "classMap" }] : []));
|
|
299
314
|
this.disabled = false;
|
|
315
|
+
this.nodeStyleComputed = computed(() => {
|
|
316
|
+
return {
|
|
317
|
+
...(this.nodeStyle() ?? {}),
|
|
318
|
+
...(this.node()?.style ?? {})
|
|
319
|
+
};
|
|
320
|
+
}, ...(ngDevMode ? [{ debugName: "nodeStyleComputed" }] : []));
|
|
300
321
|
effect(() => (this.disabled = this.forbidden()));
|
|
301
322
|
}
|
|
302
323
|
setActiveStyles() {
|
|
@@ -309,11 +330,11 @@ class XListOptionComponent extends XListOptionProperty {
|
|
|
309
330
|
return this.label();
|
|
310
331
|
}
|
|
311
332
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
312
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-list-option\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-selected]=\"selected()\"\r\n [class.x-disabled]=\"forbidden()\"\r\n [class.x-open-portal]=\"openPortal()\"\r\n [class.x-active]=\"active()\"\r\n [class.x-list-icon]=\"icon()\"\r\n [class.x-list-divided]=\"divided()\"\r\n>\r\n <div class=\"x-list-option-content\">\r\n @if (nodeTpl()) {\r\n <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n } @else {\r\n @if (icon()) {\r\n <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n }\r\n <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [title]=\"label()\">{{
|
|
333
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListOptionComponent, isStandalone: true, selector: "x-list-option", host: { properties: { "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-list-option\"\r\n [ngClass]=\"classMap()\"\r\n [style]=\"nodeStyleComputed()\"\r\n [class.x-selected]=\"selected()\"\r\n [class.x-disabled]=\"forbidden()\"\r\n [class.x-open-portal]=\"openPortal()\"\r\n [class.x-active]=\"active()\"\r\n [class.x-list-group]=\"groupable()\"\r\n [class.x-list-icon]=\"icon()\"\r\n [class.x-list-divided]=\"divided()\"\r\n>\r\n <div class=\"x-list-option-content\">\r\n @if (nodeTpl()) {\r\n <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n } @else {\r\n @if (icon()) {\r\n <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n }\r\n <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n label()\r\n }}</span>\r\n }\r\n </div>\r\n @if (leaf()) {\r\n <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n }\r\n @if (checked() && !leaf() && selected()) {\r\n <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-list-group),.x-list-option.x-active:not(.x-disabled,.x-list-group){background-color:var(--x-background-a200)}.x-list-option.x-list-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-list-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-big.x-list-group{padding:0 calc(var(--x-padding-big) * .3)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-large.x-list-group{padding:0 calc(var(--x-padding-large) * .3)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-medium.x-list-group{padding:0 calc(var(--x-padding-medium) * .3)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-small.x-list-group{padding:0 calc(var(--x-padding-small) * .3)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-list-option-mini.x-list-group{padding:0 calc(var(--x-padding-mini) * .3)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "directive", type: XKeywordDirective, selector: "[x-keyword]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
313
334
|
}
|
|
314
335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListOptionComponent, decorators: [{
|
|
315
336
|
type: Component,
|
|
316
|
-
args: [{ selector: `${XListOptionPrefix}`, imports: [NgClass, NgTemplateOutlet, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"x-list-option\"\r\n [ngClass]=\"classMap()\"\r\n [class.x-selected]=\"selected()\"\r\n [class.x-disabled]=\"forbidden()\"\r\n [class.x-open-portal]=\"openPortal()\"\r\n [class.x-active]=\"active()\"\r\n [class.x-list-icon]=\"icon()\"\r\n [class.x-list-divided]=\"divided()\"\r\n>\r\n <div class=\"x-list-option-content\">\r\n @if (nodeTpl()) {\r\n <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n } @else {\r\n @if (icon()) {\r\n <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n }\r\n <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [title]=\"label()\">{{
|
|
337
|
+
args: [{ selector: `${XListOptionPrefix}`, imports: [NgClass, NgTemplateOutlet, XIconComponent, XKeywordDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"x-list-option\"\r\n [ngClass]=\"classMap()\"\r\n [style]=\"nodeStyleComputed()\"\r\n [class.x-selected]=\"selected()\"\r\n [class.x-disabled]=\"forbidden()\"\r\n [class.x-open-portal]=\"openPortal()\"\r\n [class.x-active]=\"active()\"\r\n [class.x-list-group]=\"groupable()\"\r\n [class.x-list-icon]=\"icon()\"\r\n [class.x-list-divided]=\"divided()\"\r\n>\r\n <div class=\"x-list-option-content\">\r\n @if (nodeTpl()) {\r\n <ng-template *ngTemplateOutlet=\"nodeTpl()!; context: { $node: node() }\"></ng-template>\r\n } @else {\r\n @if (icon()) {\r\n <x-icon class=\"x-list-option-icon\" [type]=\"icon()\"></x-icon>\r\n }\r\n <span x-keyword [text]=\"keywordText()\" [caseSensitive]=\"caseSensitive()\" [attr.title]=\"label()\">{{\r\n label()\r\n }}</span>\r\n }\r\n </div>\r\n @if (leaf()) {\r\n <x-icon class=\"x-list-leaf\" type=\"fto-chevron-right\"></x-icon>\r\n }\r\n @if (checked() && !leaf() && selected()) {\r\n <x-icon class=\"x-list-checked\" type=\"fto-check\"></x-icon>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";x-list-option{display:block}.x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;cursor:pointer;transition:border-color var(--x-animation-duration-base),background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-option-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;display:inline-block}.x-list-option-icon{margin-right:.25rem}.x-list-option:not(:first-child){margin-top:var(--x-border-width)}.x-list-option:hover:not(.x-disabled,.x-list-group),.x-list-option.x-active:not(.x-disabled,.x-list-group){background-color:var(--x-background-a200)}.x-list-option.x-list-group{cursor:default;color:var(--x-text-400)}.x-list-option.x-list-group:hover{background-color:transparent}.x-list-option.x-list-divided{position:relative;margin-top:.8125rem}.x-list-option.x-list-divided:before{content:\" \";position:absolute;top:0;left:0;width:100%;margin-top:-.5rem;border-top:var(--x-border-width) var(--x-border-style) var(--x-border)}.x-list-option.x-selected:not(.x-disabled){background-color:var(--x-primary-900);color:var(--x-primary)}.x-list-option.x-selected:not(.x-disabled)>x-icon{color:var(--x-primary)}.x-list-option.x-disabled{color:var(--x-text-500);cursor:not-allowed}.x-list-option.x-disabled:hover{background-color:inherit}.x-list-option.x-disabled>span x-icon{color:var(--x-text-500)}.x-list-option-big{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-option-big.x-list-group{padding:0 calc(var(--x-padding-big) * .3)}.x-list-option-large{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-option-large.x-list-group{padding:0 calc(var(--x-padding-large) * .3)}.x-list-option-medium{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-option-medium.x-list-group{padding:0 calc(var(--x-padding-medium) * .3)}.x-list-option-small{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-option-small.x-list-group{padding:0 calc(var(--x-padding-small) * .3)}.x-list-option-mini{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}.x-list-option-mini.x-list-group{padding:0 calc(var(--x-padding-mini) * .3)}body>x-list-option{display:block}body>x-list-option.cdk-drag-preview .x-list-option{border-radius:var(--x-border-radius);display:flex;align-items:center;justify-content:space-between;border:.0625rem dashed transparent;border-color:var(--x-border);color:var(--x-text-400);background-color:var(--x-background-a100);opacity:.9}body>x-list-option.cdk-drag-animating{transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}\n"] }]
|
|
317
338
|
}], ctorParameters: () => [], propDecorators: { role: [{
|
|
318
339
|
type: HostBinding,
|
|
319
340
|
args: ['attr.role']
|
|
@@ -328,7 +349,8 @@ class XListDropGroup {
|
|
|
328
349
|
setConnectedTo() {
|
|
329
350
|
this.dropLists.forEach((x) => {
|
|
330
351
|
this.dropLists.forEach((y) => {
|
|
331
|
-
|
|
352
|
+
const { connectedTo } = y;
|
|
353
|
+
if (Array.isArray(connectedTo) && connectedTo.length === 0) {
|
|
332
354
|
y.connectedTo = [x];
|
|
333
355
|
}
|
|
334
356
|
else {
|
|
@@ -383,7 +405,7 @@ class XListComponent extends XListProperty {
|
|
|
383
405
|
super();
|
|
384
406
|
this.unSubject = new Subject();
|
|
385
407
|
this.i18n = inject(XI18nService);
|
|
386
|
-
this.
|
|
408
|
+
this.listDropGroup = inject(X_LIST_DROP_GROUP, { optional: true, skipSelf: true });
|
|
387
409
|
this.nodes = signal([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
|
|
388
410
|
this.selectedNodes = signal([], ...(ngDevMode ? [{ debugName: "selectedNodes" }] : []));
|
|
389
411
|
this.headerRef = viewChild('headerRef', ...(ngDevMode ? [{ debugName: "headerRef" }] : []));
|
|
@@ -457,9 +479,9 @@ class XListComponent extends XListProperty {
|
|
|
457
479
|
else {
|
|
458
480
|
this.scrollHeightSignal.set(this.scrollHeight());
|
|
459
481
|
}
|
|
460
|
-
if (this.
|
|
461
|
-
this.
|
|
462
|
-
this.
|
|
482
|
+
if (this.listDropGroup && this.dropList()) {
|
|
483
|
+
this.listDropGroup.dropLists.add(this.dropList());
|
|
484
|
+
this.listDropGroup.setConnectedTo();
|
|
463
485
|
}
|
|
464
486
|
}
|
|
465
487
|
setHeightAdaption() {
|
|
@@ -477,7 +499,7 @@ class XListComponent extends XListProperty {
|
|
|
477
499
|
this.unSubject.next();
|
|
478
500
|
this.unSubject.complete();
|
|
479
501
|
this.resizeObserver?.disconnect();
|
|
480
|
-
this.
|
|
502
|
+
this.listDropGroup?.dropLists.delete(this.dropList());
|
|
481
503
|
}
|
|
482
504
|
setVirtualScrollHeight() {
|
|
483
505
|
this.scrollHeightSignal.set(this.heightAdaption().clientHeight);
|
|
@@ -500,6 +522,7 @@ class XListComponent extends XListProperty {
|
|
|
500
522
|
else {
|
|
501
523
|
this.nodes.set(x);
|
|
502
524
|
}
|
|
525
|
+
this.setGroup();
|
|
503
526
|
this.setSelected();
|
|
504
527
|
this.setKeyManager();
|
|
505
528
|
});
|
|
@@ -515,6 +538,18 @@ class XListComponent extends XListProperty {
|
|
|
515
538
|
this.keyManagerChange.emit(num);
|
|
516
539
|
});
|
|
517
540
|
}
|
|
541
|
+
setGroup() {
|
|
542
|
+
const nodes = this.nodes();
|
|
543
|
+
if (!nodes.some((x) => !!x.group))
|
|
544
|
+
return;
|
|
545
|
+
const groups = XGroupBy(nodes, 'group');
|
|
546
|
+
const groupNodes = [];
|
|
547
|
+
for (let key in groups) {
|
|
548
|
+
groupNodes.push({ id: `$group-${key}`, label: key, groupable: true });
|
|
549
|
+
groupNodes.push(...groups[key]);
|
|
550
|
+
}
|
|
551
|
+
this.nodes.set(groupNodes);
|
|
552
|
+
}
|
|
518
553
|
setScorllTop(_num) {
|
|
519
554
|
let list = this.scrollElement();
|
|
520
555
|
if (!list || !this.keyManager.activeItem)
|
|
@@ -596,7 +631,7 @@ class XListComponent extends XListProperty {
|
|
|
596
631
|
this.setScorllTop(activeIndex);
|
|
597
632
|
}
|
|
598
633
|
onNodeClick(event, node) {
|
|
599
|
-
if (XIsUndefined(node) || node.disabled) {
|
|
634
|
+
if (XIsUndefined(node) || node.disabled || node.groupable) {
|
|
600
635
|
event.stopPropagation();
|
|
601
636
|
return;
|
|
602
637
|
}
|
|
@@ -664,16 +699,24 @@ class XListComponent extends XListProperty {
|
|
|
664
699
|
this.nodeMouseleave.emit(node);
|
|
665
700
|
}
|
|
666
701
|
dropCdk(event) {
|
|
667
|
-
|
|
668
|
-
moveItemInArray(
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
702
|
+
if (event.previousContainer === event.container) {
|
|
703
|
+
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
|
704
|
+
this.dropListDropped.emit({
|
|
705
|
+
data: this.nodes(),
|
|
706
|
+
current: this.nodes()[event.currentIndex],
|
|
707
|
+
currentIndex: event.currentIndex,
|
|
708
|
+
event: event
|
|
709
|
+
});
|
|
710
|
+
}
|
|
711
|
+
else {
|
|
712
|
+
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
|
|
713
|
+
this.dropListDropped.emit({
|
|
714
|
+
data: event.container.data,
|
|
715
|
+
current: event.container.data[event.currentIndex],
|
|
716
|
+
currentIndex: event.currentIndex,
|
|
717
|
+
event: event
|
|
718
|
+
});
|
|
719
|
+
}
|
|
677
720
|
}
|
|
678
721
|
predicate(_drag, _drop) {
|
|
679
722
|
return true;
|
|
@@ -711,12 +754,13 @@ class XListComponent extends XListProperty {
|
|
|
711
754
|
this.nodes()[num].active = false;
|
|
712
755
|
}
|
|
713
756
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
714
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent)], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true, isSignal: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true, isSignal: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n @if (header()) {\r\n <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n }\r\n @if (selectAll() && multiple() === 0) {\r\n <div #selectAllRef class=\"x-list-select-all\">\r\n <x-list-option\r\n [size]=\"size()\"\r\n [label]=\"getSelectAllText()\"\r\n [checked]=\"true\"\r\n [selected]=\"isSelectAll()\"\r\n (click)=\"onSelectAllNodes()\"\r\n ></x-list-option>\r\n </div>\r\n }\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"itemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n class=\"x-list-content\"\r\n [style.height.px]=\"getVirtualScrollHeight()\"\r\n [hidden]=\"isEmpty()\"\r\n >\r\n <x-list-option\r\n *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n [node]=\"node\"\r\n [checked]=\"checked()\"\r\n [nodeTpl]=\"nodeTpl()\"\r\n [selected]=\"node.selected!\"\r\n [forbidden]=\"node.disabled!\"\r\n [active]=\"node.active!\"\r\n (activeChange)=\"node.active = $event\"\r\n [openPortal]=\"node.openPortal!\"\r\n [icon]=\"node.icon\"\r\n [label]=\"node.label\"\r\n [leaf]=\"node.leaf!\"\r\n [divided]=\"node.divided!\"\r\n [size]=\"size()\"\r\n [keywordText]=\"keywordText()\"\r\n [caseSensitive]=\"caseSensitive()\"\r\n (click)=\"onNodeClick($event, node)\"\r\n (mouseenter)=\"onMouseenter($event, node)\"\r\n (mouseleave)=\"onMouseleave($event, node)\"\r\n ></x-list-option>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n <div\r\n class=\"x-list-content\"\r\n
|
|
757
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: XListComponent, isStandalone: true, selector: "x-list", host: { listeners: { "keydown": "keydown($event)" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], viewQueries: [{ propertyName: "headerRef", first: true, predicate: ["headerRef"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true, isSignal: true }, { propertyName: "selectAllRef", first: true, predicate: ["selectAllRef"], descendants: true, isSignal: true }, { propertyName: "loadMoreRef", first: true, predicate: ["loadMoreRef"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: ["virtualBody"], descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }, { propertyName: "options", predicate: XListOptionComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n @if (header()) {\r\n <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n }\r\n @if (selectAll() && multiple() === 0) {\r\n <div #selectAllRef class=\"x-list-select-all\">\r\n <x-list-option\r\n [size]=\"size()\"\r\n [label]=\"getSelectAllText()\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n [checked]=\"true\"\r\n [selected]=\"isSelectAll()\"\r\n (click)=\"onSelectAllNodes()\"\r\n ></x-list-option>\r\n </div>\r\n }\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"itemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n class=\"x-list-content\"\r\n [style.height.px]=\"getVirtualScrollHeight()\"\r\n [hidden]=\"isEmpty()\"\r\n >\r\n <x-list-option\r\n *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n [node]=\"node\"\r\n [checked]=\"checked()\"\r\n [nodeTpl]=\"nodeTpl()\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n [selected]=\"node.selected!\"\r\n [groupable]=\"node.groupable!\"\r\n [forbidden]=\"node.disabled!\"\r\n [active]=\"node.active!\"\r\n (activeChange)=\"node.active = $event\"\r\n [openPortal]=\"node.openPortal!\"\r\n [icon]=\"node.icon\"\r\n [label]=\"node.label\"\r\n [leaf]=\"node.leaf!\"\r\n [divided]=\"node.divided!\"\r\n [size]=\"size()\"\r\n [keywordText]=\"keywordText()\"\r\n [caseSensitive]=\"caseSensitive()\"\r\n (click)=\"onNodeClick($event, node)\"\r\n (mouseenter)=\"onMouseenter($event, node)\"\r\n (mouseleave)=\"onMouseleave($event, node)\"\r\n ></x-list-option>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n }\r\n\r\n @if (loadMore() && !isEmpty()) {\r\n <div #loadMoreRef class=\"x-list-load-more\">\r\n <x-list-option\r\n [size]=\"size()\"\r\n [nodeTpl]=\"loadMoreTpl\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n (click)=\"onLoadMore()\"\r\n ></x-list-option>\r\n </div>\r\n <ng-template #loadMoreTpl>\r\n @if (icon() && iconSpin()) {\r\n <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n }\r\n {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n >\r\n }\r\n @if (isEmpty()) {\r\n <x-empty></x-empty>\r\n }\r\n @if (footer()) {\r\n <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n <div\r\n class=\"x-list-content\"\r\n cdkDropList\r\n (cdkDropListDropped)=\"dropCdk($event)\"\r\n [cdkDropListDisabled]=\"!drag()\"\r\n [hidden]=\"isEmpty()\"\r\n [cdkDropListData]=\"list\"\r\n [cdkDropListEnterPredicate]=\"predicate\"\r\n >\r\n @for (node of list; track node.id) {\r\n <x-list-option\r\n cdkDrag\r\n [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n [node]=\"node\"\r\n [checked]=\"checked()\"\r\n [nodeTpl]=\"nodeTpl()\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n [selected]=\"node.selected!\"\r\n [groupable]=\"node.groupable!\"\r\n [forbidden]=\"node.disabled!\"\r\n [active]=\"node.active!\"\r\n (activeChange)=\"node.active = $event\"\r\n [openPortal]=\"node.openPortal!\"\r\n [icon]=\"node.icon\"\r\n [label]=\"node.label\"\r\n [leaf]=\"node.leaf!\"\r\n [divided]=\"node.divided!\"\r\n [size]=\"size()\"\r\n [keywordText]=\"keywordText()\"\r\n [caseSensitive]=\"caseSensitive()\"\r\n (click)=\"onNodeClick($event, node)\"\r\n (mouseenter)=\"onMouseenter($event, node)\"\r\n (mouseleave)=\"onMouseleave($event, node)\"\r\n ></x-list-option>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-big .x-list-header,.x-list-big .x-list-footer{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }, { kind: "component", type: XEmptyComponent, selector: "x-empty" }, { kind: "component", type: XListOptionComponent, selector: "x-list-option" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
715
758
|
}
|
|
716
759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: XListComponent, decorators: [{
|
|
717
760
|
type: Component,
|
|
718
761
|
args: [{ selector: `${XListPrefix}`, imports: [
|
|
719
762
|
NgClass,
|
|
763
|
+
NgTemplateOutlet,
|
|
720
764
|
FormsModule,
|
|
721
765
|
ReactiveFormsModule,
|
|
722
766
|
CdkDropList,
|
|
@@ -726,7 +770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
726
770
|
XEmptyComponent,
|
|
727
771
|
XListOptionComponent,
|
|
728
772
|
XOutletDirective
|
|
729
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent)], template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n @if (header()) {\r\n <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n }\r\n @if (selectAll() && multiple() === 0) {\r\n <div #selectAllRef class=\"x-list-select-all\">\r\n <x-list-option\r\n [size]=\"size()\"\r\n [label]=\"getSelectAllText()\"\r\n [checked]=\"true\"\r\n [selected]=\"isSelectAll()\"\r\n (click)=\"onSelectAllNodes()\"\r\n ></x-list-option>\r\n </div>\r\n }\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"itemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n class=\"x-list-content\"\r\n [style.height.px]=\"getVirtualScrollHeight()\"\r\n [hidden]=\"isEmpty()\"\r\n >\r\n <x-list-option\r\n *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n [node]=\"node\"\r\n [checked]=\"checked()\"\r\n [nodeTpl]=\"nodeTpl()\"\r\n [selected]=\"node.selected!\"\r\n [forbidden]=\"node.disabled!\"\r\n [active]=\"node.active!\"\r\n (activeChange)=\"node.active = $event\"\r\n [openPortal]=\"node.openPortal!\"\r\n [icon]=\"node.icon\"\r\n [label]=\"node.label\"\r\n [leaf]=\"node.leaf!\"\r\n [divided]=\"node.divided!\"\r\n [size]=\"size()\"\r\n [keywordText]=\"keywordText()\"\r\n [caseSensitive]=\"caseSensitive()\"\r\n (click)=\"onNodeClick($event, node)\"\r\n (mouseenter)=\"onMouseenter($event, node)\"\r\n (mouseleave)=\"onMouseleave($event, node)\"\r\n ></x-list-option>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n <div\r\n class=\"x-list-content\"\r\n
|
|
773
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [XValueAccessor(XListComponent), { provide: X_LIST_DROP_GROUP, useValue: undefined }], template: "<div class=\"x-list\" [class.x-list-portal]=\"inPortal()\" [ngClass]=\"classMap()\">\r\n @if (header()) {\r\n <div #headerRef class=\"x-list-header\" *xOutlet=\"header()\">{{ header() }}</div>\r\n }\r\n @if (selectAll() && multiple() === 0) {\r\n <div #selectAllRef class=\"x-list-select-all\">\r\n <x-list-option\r\n [size]=\"size()\"\r\n [label]=\"getSelectAllText()\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n [checked]=\"true\"\r\n [selected]=\"isSelectAll()\"\r\n (click)=\"onSelectAllNodes()\"\r\n ></x-list-option>\r\n </div>\r\n }\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"itemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n class=\"x-list-content\"\r\n [style.height.px]=\"getVirtualScrollHeight()\"\r\n [hidden]=\"isEmpty()\"\r\n >\r\n <x-list-option\r\n *cdkVirtualFor=\"let node of nodes(); trackBy: trackByNode\"\r\n [node]=\"node\"\r\n [checked]=\"checked()\"\r\n [nodeTpl]=\"nodeTpl()\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n [selected]=\"node.selected!\"\r\n [groupable]=\"node.groupable!\"\r\n [forbidden]=\"node.disabled!\"\r\n [active]=\"node.active!\"\r\n (activeChange)=\"node.active = $event\"\r\n [openPortal]=\"node.openPortal!\"\r\n [icon]=\"node.icon\"\r\n [label]=\"node.label\"\r\n [leaf]=\"node.leaf!\"\r\n [divided]=\"node.divided!\"\r\n [size]=\"size()\"\r\n [keywordText]=\"keywordText()\"\r\n [caseSensitive]=\"caseSensitive()\"\r\n (click)=\"onNodeClick($event, node)\"\r\n (mouseenter)=\"onMouseenter($event, node)\"\r\n (mouseleave)=\"onMouseleave($event, node)\"\r\n ></x-list-option>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"listTpl; context: { $list: nodes() }\"></ng-container>\r\n }\r\n\r\n @if (loadMore() && !isEmpty()) {\r\n <div #loadMoreRef class=\"x-list-load-more\">\r\n <x-list-option\r\n [size]=\"size()\"\r\n [nodeTpl]=\"loadMoreTpl\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n (click)=\"onLoadMore()\"\r\n ></x-list-option>\r\n </div>\r\n <ng-template #loadMoreTpl>\r\n @if (icon() && iconSpin()) {\r\n <x-icon [type]=\"icon()\" [spin]=\"iconSpin()\"></x-icon>\r\n }\r\n {{ icon() && iconSpin() ? getLoadingMoreText() : getLoadMoreText() }}</ng-template\r\n >\r\n }\r\n @if (isEmpty()) {\r\n <x-empty></x-empty>\r\n }\r\n @if (footer()) {\r\n <div #footerRef class=\"x-list-footer\" *xOutlet=\"footer()\">{{ footer() }}</div>\r\n }\r\n</div>\r\n\r\n<ng-template #listTpl let-list=\"$list\">\r\n <div\r\n class=\"x-list-content\"\r\n cdkDropList\r\n (cdkDropListDropped)=\"dropCdk($event)\"\r\n [cdkDropListDisabled]=\"!drag()\"\r\n [hidden]=\"isEmpty()\"\r\n [cdkDropListData]=\"list\"\r\n [cdkDropListEnterPredicate]=\"predicate\"\r\n >\r\n @for (node of list; track node.id) {\r\n <x-list-option\r\n cdkDrag\r\n [cdkDragDisabled]=\"node.disabled || node.groupable\"\r\n [node]=\"node\"\r\n [checked]=\"checked()\"\r\n [nodeTpl]=\"nodeTpl()\"\r\n [nodeStyle]=\"nodeStyle()\"\r\n [selected]=\"node.selected!\"\r\n [groupable]=\"node.groupable!\"\r\n [forbidden]=\"node.disabled!\"\r\n [active]=\"node.active!\"\r\n (activeChange)=\"node.active = $event\"\r\n [openPortal]=\"node.openPortal!\"\r\n [icon]=\"node.icon\"\r\n [label]=\"node.label\"\r\n [leaf]=\"node.leaf!\"\r\n [divided]=\"node.divided!\"\r\n [size]=\"size()\"\r\n [keywordText]=\"keywordText()\"\r\n [caseSensitive]=\"caseSensitive()\"\r\n (click)=\"onNodeClick($event, node)\"\r\n (mouseenter)=\"onMouseenter($event, node)\"\r\n (mouseleave)=\"onMouseleave($event, node)\"\r\n ></x-list-option>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";x-list{width:100%}x-list:focus{outline:none}.x-list{margin:0;padding:0}.x-list{width:100%}.x-list:focus{outline:none}.x-list-select-all{cursor:pointer;font-weight:700}.x-list-load-more{cursor:pointer}.x-list-content.cdk-drop-list-dragging x-list-option.cdk-drag-placeholder .x-list-option{border-color:var(--x-primary);color:var(--x-primary);background-color:var(--x-background);opacity:.8}.x-list-content.cdk-drop-list-dragging x-list-option:not(.cdk-drag-placeholder){transition:transform var(--x-animation-duration-base) cubic-bezier(0,0,.2,1)}.x-list-header,.x-list-footer{font-weight:700}.x-list-portal{padding:.125rem .25rem}.x-list-portal x-list-option .x-list-option{padding:0 calc(var(--x-padding-medium) - .5rem);margin:.125rem 0;border-radius:var(--x-border-small-radius);transition:background-color var(--x-animation-duration-base),color var(--x-animation-duration-base)}.x-list-portal x-list-option .x-list-option.x-list-divided{margin-top:.8125rem}.x-list-portal x-list-option .x-list-option.x-list-group{padding:0}.x-list-leaf,.x-list-checked{right:0;margin-left:.4rem;color:var(--x-text-400)}.x-list-icon>span x-icon{color:var(--x-text-300);margin-right:.25rem}.x-list>x-empty{margin:1rem;display:block}.x-list-big .x-list-header,.x-list-big .x-list-footer{padding:0 var(--x-padding-big);height:var(--x-height-big);line-height:var(--x-height-big)}.x-list-large .x-list-header,.x-list-large .x-list-footer{padding:0 var(--x-padding-large);height:var(--x-height-large);line-height:var(--x-height-large)}.x-list-medium .x-list-header,.x-list-medium .x-list-footer{padding:0 var(--x-padding-medium);height:var(--x-height-medium);line-height:var(--x-height-medium)}.x-list-small .x-list-header,.x-list-small .x-list-footer{padding:0 var(--x-padding-small);height:var(--x-height-small);line-height:var(--x-height-small)}.x-list-mini .x-list-header,.x-list-mini .x-list-footer{padding:0 var(--x-padding-mini);height:var(--x-height-mini);line-height:var(--x-height-mini)}\n"] }]
|
|
730
774
|
}], ctorParameters: () => [], propDecorators: { options: [{
|
|
731
775
|
type: ViewChildren,
|
|
732
776
|
args: [XListOptionComponent]
|