@nova-ui/bits
Version:
SolarWinds Nova Framework
63 lines • 13.9 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { CdkDrag, CdkDropList } from "@angular/cdk/drag-drop";
import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild, } from "@angular/core";
import { DroppableComponent } from "./droppable.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/cdk/drag-drop";
/**
* @ignore
*/
export class DraggableComponent {
constructor() {
this.dragHandle = false;
this.dragStart = new EventEmitter();
this.dragEnd = new EventEmitter();
}
ngOnInit() {
this.dragElement.dropContainer = this.dropTarget.dropList;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DraggableComponent, selector: "nui-draggable", inputs: { payload: "payload", dropTarget: "dropTarget", dragHandle: "dragHandle", dragPreview: "dragPreview" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "dragElement", first: true, predicate: CdkDrag, descendants: true, static: true }], ngImport: i0, template: "<div cdkDropList [cdkDropListConnectedTo]=\"[dropTarget.dropList]\">\n <div\n cdkDrag\n [cdkDragData]=\"payload\"\n [class.cdk-drag-with-handle]=\"dragHandle\"\n >\n <svg\n *ngIf=\"dragHandle\"\n cdkDragHandle\n width=\"24px\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"\n ></path>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n </svg>\n\n <ng-content></ng-content>\n\n <ng-container *ngIf=\"dragPreview\">\n <div *cdkDragPreview>\n <ng-container *ngTemplateOutlet=\"dragPreview\"></ng-container>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [".cdk-drag{position:relative;cursor:move}.cdk-drag:hover{background-color:var(--nui-color-bg-light-hover,#f2f2f2);box-shadow:0 0 5px 0 var(--nui-shadow-color, rgba(17, 17, 17, .3))}.cdk-drag-with-handle{pointer-events:none}.cdk-drag-with-handle svg{pointer-events:all;position:absolute;top:10px;right:10px;color:#ccc;cursor:move;width:24px;height:24px}.cdk-drop-list-dragging{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));position:relative;pointer-events:none;box-shadow:0 0 5px 0 var(--nui-shadow-color, rgba(17, 17, 17, .3))}.cdk-drop-list-dragging .cdk-drag-placeholder{opacity:10%;display:initial}.cdk-drag-placeholder{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DraggableComponent, decorators: [{
type: Component,
args: [{ selector: "nui-draggable", template: "<div cdkDropList [cdkDropListConnectedTo]=\"[dropTarget.dropList]\">\n <div\n cdkDrag\n [cdkDragData]=\"payload\"\n [class.cdk-drag-with-handle]=\"dragHandle\"\n >\n <svg\n *ngIf=\"dragHandle\"\n cdkDragHandle\n width=\"24px\"\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"\n ></path>\n <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\n </svg>\n\n <ng-content></ng-content>\n\n <ng-container *ngIf=\"dragPreview\">\n <div *cdkDragPreview>\n <ng-container *ngTemplateOutlet=\"dragPreview\"></ng-container>\n </div>\n </ng-container>\n </div>\n</div>\n", styles: [".cdk-drag{position:relative;cursor:move}.cdk-drag:hover{background-color:var(--nui-color-bg-light-hover,#f2f2f2);box-shadow:0 0 5px 0 var(--nui-shadow-color, rgba(17, 17, 17, .3))}.cdk-drag-with-handle{pointer-events:none}.cdk-drag-with-handle svg{pointer-events:all;position:absolute;top:10px;right:10px;color:#ccc;cursor:move;width:24px;height:24px}.cdk-drop-list-dragging{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));position:relative;pointer-events:none;box-shadow:0 0 5px 0 var(--nui-shadow-color, rgba(17, 17, 17, .3))}.cdk-drop-list-dragging .cdk-drag-placeholder{opacity:10%;display:initial}.cdk-drag-placeholder{display:none}\n"] }]
}], ctorParameters: () => [], propDecorators: { payload: [{
type: Input
}], dropTarget: [{
type: Input
}], dragHandle: [{
type: Input
}], dragPreview: [{
type: Input
}], dragStart: [{
type: Output
}], dragEnd: [{
type: Output
}], dropList: [{
type: ViewChild,
args: [CdkDropList, { static: true }]
}], dragElement: [{
type: ViewChild,
args: [CdkDrag, { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvZHJhZ2Ryb3AvZHJhZ2dhYmxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL3NyYy9saWIvZHJhZ2Ryb3AvZHJhZ2dhYmxlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlEQUF5RDtBQUN6RCxFQUFFO0FBQ0YsK0VBQStFO0FBQy9FLDRFQUE0RTtBQUM1RSw4RUFBOEU7QUFDOUUsK0VBQStFO0FBQy9FLDhFQUE4RTtBQUM5RSw0REFBNEQ7QUFDNUQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSx1REFBdUQ7QUFDdkQsRUFBRTtBQUNGLDZFQUE2RTtBQUM3RSw0RUFBNEU7QUFDNUUsK0VBQStFO0FBQy9FLDBFQUEwRTtBQUMxRSxpRkFBaUY7QUFDakYsNkVBQTZFO0FBQzdFLGlCQUFpQjtBQUVqQixPQUFPLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQzlELE9BQU8sRUFDSCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEVBQ04sV0FBVyxFQUNYLFNBQVMsR0FDWixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7OztBQUUzRDs7R0FFRztBQU9ILE1BQU0sT0FBTyxrQkFBa0I7SUFXM0I7UUFSUyxlQUFVLEdBQVksS0FBSyxDQUFDO1FBRTNCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQy9CLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBS3hCLENBQUM7SUFFVCxRQUFRO1FBQ1gsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUM7SUFDOUQsQ0FBQzsrR0FmUSxrQkFBa0I7bUdBQWxCLGtCQUFrQix3UUFRaEIsV0FBVyw0RkFDWCxPQUFPLDhEQ25EdEIsMjNCQTRCQTs7NEZEY2Esa0JBQWtCO2tCQU45QixTQUFTOytCQUNJLGVBQWU7d0RBTWhCLE9BQU87c0JBQWYsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDSSxTQUFTO3NCQUFsQixNQUFNO2dCQUNHLE9BQU87c0JBQWhCLE1BQU07Z0JBRW1DLFFBQVE7c0JBQWpELFNBQVM7dUJBQUMsV0FBVyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFDRixXQUFXO3NCQUFoRCxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyIvLyDCqSAyMDIyIFNvbGFyV2luZHMgV29ybGR3aWRlLCBMTEMuIEFsbCByaWdodHMgcmVzZXJ2ZWQuXG4vL1xuLy8gUGVybWlzc2lvbiBpcyBoZXJlYnkgZ3JhbnRlZCwgZnJlZSBvZiBjaGFyZ2UsIHRvIGFueSBwZXJzb24gb2J0YWluaW5nIGEgY29weVxuLy8gIG9mIHRoaXMgc29mdHdhcmUgYW5kIGFzc29jaWF0ZWQgZG9jdW1lbnRhdGlvbiBmaWxlcyAodGhlIFwiU29mdHdhcmVcIiksIHRvXG4vLyAgZGVhbCBpbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGVcbi8vICByaWdodHMgdG8gdXNlLCBjb3B5LCBtb2RpZnksIG1lcmdlLCBwdWJsaXNoLCBkaXN0cmlidXRlLCBzdWJsaWNlbnNlLCBhbmQvb3Jcbi8vICBzZWxsIGNvcGllcyBvZiB0aGUgU29mdHdhcmUsIGFuZCB0byBwZXJtaXQgcGVyc29ucyB0byB3aG9tIHRoZSBTb2Z0d2FyZSBpc1xuLy8gIGZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6XG4vL1xuLy8gVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW5cbi8vICBhbGwgY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS5cbi8vXG4vLyBUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgXCJBUyBJU1wiLCBXSVRIT1VUIFdBUlJBTlRZIE9GIEFOWSBLSU5ELCBFWFBSRVNTIE9SXG4vLyAgSU1QTElFRCwgSU5DTFVESU5HIEJVVCBOT1QgTElNSVRFRCBUTyBUSEUgV0FSUkFOVElFUyBPRiBNRVJDSEFOVEFCSUxJVFksXG4vLyAgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFXG4vLyAgQVVUSE9SUyBPUiBDT1BZUklHSFQgSE9MREVSUyBCRSBMSUFCTEUgRk9SIEFOWSBDTEFJTSwgREFNQUdFUyBPUiBPVEhFUlxuLy8gIExJQUJJTElUWSwgV0hFVEhFUiBJTiBBTiBBQ1RJT04gT0YgQ09OVFJBQ1QsIFRPUlQgT1IgT1RIRVJXSVNFLCBBUklTSU5HIEZST00sXG4vLyAgT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTlxuLy8gIFRIRSBTT0ZUV0FSRS5cblxuaW1wb3J0IHsgQ2RrRHJhZywgQ2RrRHJvcExpc3QgfSBmcm9tIFwiQGFuZ3VsYXIvY2RrL2RyYWctZHJvcFwiO1xuaW1wb3J0IHtcbiAgICBDb21wb25lbnQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIElucHV0LFxuICAgIE9uSW5pdCxcbiAgICBPdXRwdXQsXG4gICAgVGVtcGxhdGVSZWYsXG4gICAgVmlld0NoaWxkLFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBEcm9wcGFibGVDb21wb25lbnQgfSBmcm9tIFwiLi9kcm9wcGFibGUuY29tcG9uZW50XCI7XG5cbi8qKlxuICogQGlnbm9yZVxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJudWktZHJhZ2dhYmxlXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiLi9kcmFnZ2FibGUuY29tcG9uZW50Lmh0bWxcIixcbiAgICBzdHlsZVVybHM6IFtcIi4vZHJhZ2dhYmxlLmNvbXBvbmVudC5sZXNzXCJdLFxuICAgIC8vIGhvc3Q6IHsgXCJhcmlhLWdyYWJiZWRcIjogXCJzdXBwb3J0ZWRcIiB9LFxufSlcbmV4cG9ydCBjbGFzcyBEcmFnZ2FibGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIHBheWxvYWQ6IGFueTtcbiAgICBASW5wdXQoKSBkcm9wVGFyZ2V0OiBEcm9wcGFibGVDb21wb25lbnQ7XG4gICAgQElucHV0KCkgZHJhZ0hhbmRsZTogYm9vbGVhbiA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIGRyYWdQcmV2aWV3OiBUZW1wbGF0ZVJlZjxhbnk+O1xuICAgIEBPdXRwdXQoKSBkcmFnU3RhcnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gICAgQE91dHB1dCgpIGRyYWdFbmQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgICBAVmlld0NoaWxkKENka0Ryb3BMaXN0LCB7IHN0YXRpYzogdHJ1ZSB9KSBkcm9wTGlzdDogQ2RrRHJvcExpc3Q7XG4gICAgQFZpZXdDaGlsZChDZGtEcmFnLCB7IHN0YXRpYzogdHJ1ZSB9KSBkcmFnRWxlbWVudDogQ2RrRHJhZztcblxuICAgIGNvbnN0cnVjdG9yKCkge31cblxuICAgIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kcmFnRWxlbWVudC5kcm9wQ29udGFpbmVyID0gdGhpcy5kcm9wVGFyZ2V0LmRyb3BMaXN0O1xuICAgIH1cbn1cbiIsIjxkaXYgY2RrRHJvcExpc3QgW2Nka0Ryb3BMaXN0Q29ubmVjdGVkVG9dPVwiW2Ryb3BUYXJnZXQuZHJvcExpc3RdXCI+XG4gICAgPGRpdlxuICAgICAgICBjZGtEcmFnXG4gICAgICAgIFtjZGtEcmFnRGF0YV09XCJwYXlsb2FkXCJcbiAgICAgICAgW2NsYXNzLmNkay1kcmFnLXdpdGgtaGFuZGxlXT1cImRyYWdIYW5kbGVcIlxuICAgID5cbiAgICAgICAgPHN2Z1xuICAgICAgICAgICAgKm5nSWY9XCJkcmFnSGFuZGxlXCJcbiAgICAgICAgICAgIGNka0RyYWdIYW5kbGVcbiAgICAgICAgICAgIHdpZHRoPVwiMjRweFwiXG4gICAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcbiAgICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMjQgMjRcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgIGQ9XCJNMTAgOWg0VjZoM2wtNS01LTUgNWgzdjN6bS0xIDFINlY3bC01IDUgNSA1di0zaDN2LTR6bTE0IDJsLTUtNXYzaC0zdjRoM3YzbDUtNXptLTkgM2gtNHYzSDdsNSA1IDUtNWgtM3YtM3pcIlxuICAgICAgICAgICAgPjwvcGF0aD5cbiAgICAgICAgICAgIDxwYXRoIGQ9XCJNMCAwaDI0djI0SDB6XCIgZmlsbD1cIm5vbmVcIj48L3BhdGg+XG4gICAgICAgIDwvc3ZnPlxuXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZHJhZ1ByZXZpZXdcIj5cbiAgICAgICAgICAgIDxkaXYgKmNka0RyYWdQcmV2aWV3PlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJkcmFnUHJldmlld1wiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=