@m1z23r/ngx-ui 1.1.27 → 1.1.29
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.
|
@@ -2360,7 +2360,7 @@ class CircularProgressComponent {
|
|
|
2360
2360
|
indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
|
|
2361
2361
|
clampedValue = computed(() => Math.min(100, Math.max(0, this.value())), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
|
|
2362
2362
|
sizeValue = computed(() => {
|
|
2363
|
-
const sizes = { sm: 32, md: 48, lg: 64, xl: 96 };
|
|
2363
|
+
const sizes = { xs: 16, sm: 32, md: 48, lg: 64, xl: 96 };
|
|
2364
2364
|
return sizes[this.size()];
|
|
2365
2365
|
}, ...(ngDevMode ? [{ debugName: "sizeValue" }] : []));
|
|
2366
2366
|
center = computed(() => this.sizeValue() / 2, ...(ngDevMode ? [{ debugName: "center" }] : []));
|
|
@@ -5786,6 +5786,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5786
5786
|
}, 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
5787
|
}], 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
5788
|
|
|
5789
|
+
function isDescendantOf(target, potentialAncestor) {
|
|
5790
|
+
if (!potentialAncestor.children)
|
|
5791
|
+
return false;
|
|
5792
|
+
for (const child of potentialAncestor.children) {
|
|
5793
|
+
if (child === target || isDescendantOf(target, child))
|
|
5794
|
+
return true;
|
|
5795
|
+
}
|
|
5796
|
+
return false;
|
|
5797
|
+
}
|
|
5789
5798
|
class TreeNodeComponent {
|
|
5790
5799
|
node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
|
|
5791
5800
|
level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
|
|
@@ -5793,6 +5802,7 @@ class TreeNodeComponent {
|
|
|
5793
5802
|
nodeClick = output();
|
|
5794
5803
|
nodeExpand = output();
|
|
5795
5804
|
nodeCollapse = output();
|
|
5805
|
+
treeHost = inject(TREE_HOST);
|
|
5796
5806
|
_expanded = signal(null, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
|
|
5797
5807
|
isExpanded = computed(() => {
|
|
5798
5808
|
const manualState = this._expanded();
|
|
@@ -5809,6 +5819,14 @@ class TreeNodeComponent {
|
|
|
5809
5819
|
const lvl = this.level();
|
|
5810
5820
|
return lvl > 0 ? Array.from({ length: lvl }, (_, i) => i) : [];
|
|
5811
5821
|
}, ...(ngDevMode ? [{ debugName: "indentGuides" }] : []));
|
|
5822
|
+
isDraggable = computed(() => this.treeHost.draggable(), ...(ngDevMode ? [{ debugName: "isDraggable" }] : []));
|
|
5823
|
+
isDragging = computed(() => this.treeHost._dragNode() === this.node(), ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
5824
|
+
dropPosition = computed(() => {
|
|
5825
|
+
if (this.treeHost._dragOverNode() === this.node()) {
|
|
5826
|
+
return this.treeHost._dropPosition();
|
|
5827
|
+
}
|
|
5828
|
+
return null;
|
|
5829
|
+
}, ...(ngDevMode ? [{ debugName: "dropPosition" }] : []));
|
|
5812
5830
|
toggle(event) {
|
|
5813
5831
|
event.stopPropagation();
|
|
5814
5832
|
if (!this.hasChildren())
|
|
@@ -5832,6 +5850,77 @@ class TreeNodeComponent {
|
|
|
5832
5850
|
this.toggle(event);
|
|
5833
5851
|
}
|
|
5834
5852
|
}
|
|
5853
|
+
onDragStart(event) {
|
|
5854
|
+
if (!this.isDraggable())
|
|
5855
|
+
return;
|
|
5856
|
+
this.treeHost._dragNode.set(this.node());
|
|
5857
|
+
event.dataTransfer.effectAllowed = 'move';
|
|
5858
|
+
event.dataTransfer.setData('text/plain', this.node().label);
|
|
5859
|
+
}
|
|
5860
|
+
onDragEnd() {
|
|
5861
|
+
this.treeHost._dragNode.set(null);
|
|
5862
|
+
this.treeHost._dragOverNode.set(null);
|
|
5863
|
+
this.treeHost._dropPosition.set(null);
|
|
5864
|
+
}
|
|
5865
|
+
onDragOver(event) {
|
|
5866
|
+
if (!this.isDraggable())
|
|
5867
|
+
return;
|
|
5868
|
+
const dragNode = this.treeHost._dragNode();
|
|
5869
|
+
if (!dragNode)
|
|
5870
|
+
return;
|
|
5871
|
+
// Prevent dropping on self or own descendants
|
|
5872
|
+
if (dragNode === this.node() || isDescendantOf(this.node(), dragNode)) {
|
|
5873
|
+
return;
|
|
5874
|
+
}
|
|
5875
|
+
event.preventDefault();
|
|
5876
|
+
event.dataTransfer.dropEffect = 'move';
|
|
5877
|
+
const target = event.currentTarget.querySelector('.ui-tree-node__content');
|
|
5878
|
+
if (!target)
|
|
5879
|
+
return;
|
|
5880
|
+
const rect = target.getBoundingClientRect();
|
|
5881
|
+
const y = event.clientY - rect.top;
|
|
5882
|
+
const ratio = y / rect.height;
|
|
5883
|
+
let position;
|
|
5884
|
+
if (ratio < 0.25) {
|
|
5885
|
+
position = 'before';
|
|
5886
|
+
}
|
|
5887
|
+
else if (ratio > 0.75) {
|
|
5888
|
+
position = 'after';
|
|
5889
|
+
}
|
|
5890
|
+
else {
|
|
5891
|
+
position = 'inside';
|
|
5892
|
+
}
|
|
5893
|
+
this.treeHost._dragOverNode.set(this.node());
|
|
5894
|
+
this.treeHost._dropPosition.set(position);
|
|
5895
|
+
}
|
|
5896
|
+
onDragLeave(event) {
|
|
5897
|
+
const related = event.relatedTarget;
|
|
5898
|
+
const current = event.currentTarget;
|
|
5899
|
+
if (related && current.contains(related))
|
|
5900
|
+
return;
|
|
5901
|
+
if (this.treeHost._dragOverNode() === this.node()) {
|
|
5902
|
+
this.treeHost._dragOverNode.set(null);
|
|
5903
|
+
this.treeHost._dropPosition.set(null);
|
|
5904
|
+
}
|
|
5905
|
+
}
|
|
5906
|
+
onDrop(event) {
|
|
5907
|
+
event.preventDefault();
|
|
5908
|
+
const dragNode = this.treeHost._dragNode();
|
|
5909
|
+
const position = this.treeHost._dropPosition();
|
|
5910
|
+
if (!dragNode || !position)
|
|
5911
|
+
return;
|
|
5912
|
+
if (dragNode === this.node() || isDescendantOf(this.node(), dragNode)) {
|
|
5913
|
+
return;
|
|
5914
|
+
}
|
|
5915
|
+
this.treeHost._emitDrop({
|
|
5916
|
+
node: dragNode,
|
|
5917
|
+
target: this.node(),
|
|
5918
|
+
position,
|
|
5919
|
+
});
|
|
5920
|
+
this.treeHost._dragNode.set(null);
|
|
5921
|
+
this.treeHost._dragOverNode.set(null);
|
|
5922
|
+
this.treeHost._dropPosition.set(null);
|
|
5923
|
+
}
|
|
5835
5924
|
/** @internal - forward events from child nodes */
|
|
5836
5925
|
_onChildNodeClick(node) {
|
|
5837
5926
|
this.nodeClick.emit(node);
|
|
@@ -5845,19 +5934,28 @@ class TreeNodeComponent {
|
|
|
5845
5934
|
this.nodeCollapse.emit(node);
|
|
5846
5935
|
}
|
|
5847
5936
|
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
|
|
5937
|
+
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
5938
|
}
|
|
5850
5939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeNodeComponent, decorators: [{
|
|
5851
5940
|
type: Component,
|
|
5852
|
-
args: [{ selector: 'ui-tree-node', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
5941
|
+
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
5942
|
}], 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
5943
|
|
|
5944
|
+
const TREE_HOST = new InjectionToken('TREE_HOST');
|
|
5855
5945
|
class TreeComponent {
|
|
5856
5946
|
nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : []));
|
|
5857
5947
|
indent = input(16, ...(ngDevMode ? [{ debugName: "indent" }] : []));
|
|
5948
|
+
draggable = input(false, ...(ngDevMode ? [{ debugName: "draggable" }] : []));
|
|
5858
5949
|
nodeClick = output();
|
|
5859
5950
|
nodeExpand = output();
|
|
5860
5951
|
nodeCollapse = output();
|
|
5952
|
+
nodeDrop = output();
|
|
5953
|
+
/** @internal */
|
|
5954
|
+
_dragNode = signal(null, ...(ngDevMode ? [{ debugName: "_dragNode" }] : []));
|
|
5955
|
+
/** @internal */
|
|
5956
|
+
_dragOverNode = signal(null, ...(ngDevMode ? [{ debugName: "_dragOverNode" }] : []));
|
|
5957
|
+
/** @internal */
|
|
5958
|
+
_dropPosition = signal(null, ...(ngDevMode ? [{ debugName: "_dropPosition" }] : []));
|
|
5861
5959
|
/** @internal */
|
|
5862
5960
|
_onNodeClick(node) {
|
|
5863
5961
|
this.nodeClick.emit(node);
|
|
@@ -5870,13 +5968,17 @@ class TreeComponent {
|
|
|
5870
5968
|
_onNodeCollapse(node) {
|
|
5871
5969
|
this.nodeCollapse.emit(node);
|
|
5872
5970
|
}
|
|
5971
|
+
/** @internal */
|
|
5972
|
+
_emitDrop(event) {
|
|
5973
|
+
this.nodeDrop.emit(event);
|
|
5974
|
+
}
|
|
5873
5975
|
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 });
|
|
5976
|
+
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
5977
|
}
|
|
5876
5978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TreeComponent, decorators: [{
|
|
5877
5979
|
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"] }] } });
|
|
5980
|
+
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"] }]
|
|
5981
|
+
}], 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
5982
|
|
|
5881
5983
|
/*
|
|
5882
5984
|
* Public API Surface of @m1z23r/ngx-ui
|
|
@@ -5887,5 +5989,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5887
5989
|
* Generated bundle index. Do not edit.
|
|
5888
5990
|
*/
|
|
5889
5991
|
|
|
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 };
|
|
5992
|
+
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
5993
|
//# sourceMappingURL=m1z23r-ngx-ui.mjs.map
|