@progress/kendo-angular-sortable
Version:
A Sortable Component for Angular
80 lines (79 loc) • 3.45 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, HostBinding, Input, ElementRef, Renderer2 } from '@angular/core';
import { SortableContainer } from './sortable-container';
import * as i0 from "@angular/core";
import * as i1 from "./sortable-container";
/**
* @hidden
*/
export class DraggableDirective {
parent;
el;
renderer;
index;
disabled;
set hidden(value) {
this._hidden = value;
this.updateDisplayStyle();
}
get hidden() {
return this._hidden;
}
_hidden;
get _focused() {
return this.disabled ? false : (this.index === this.parent.activeIndex);
}
get _disabled() {
return this.disabled;
}
get display() {
return this.hidden ? "none" : this._display;
}
set display(display) {
this._display = display;
this.updateDisplayStyle();
}
_display;
constructor(parent, el, renderer) {
this.parent = parent;
this.el = el;
this.renderer = renderer;
}
ngOnInit() {
const nativeElement = this.el.nativeElement;
this.display = nativeElement.style.display;
if (nativeElement) { // Remove the inline styles after a few releases of the themes with the style.
this.renderer.setStyle(nativeElement, 'user-select', 'none');
this.renderer.setStyle(nativeElement, '-ms-user-select', 'none');
this.renderer.setStyle(nativeElement, '-moz-user-select', 'none');
this.renderer.setStyle(nativeElement, '-webkit-user-select', 'none');
}
}
updateDisplayStyle() {
this.renderer.setStyle(this.el.nativeElement, 'display', this.display);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableDirective, deps: [{ token: i1.SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused", "attr.aria-disabled": "this._disabled" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoDraggable]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.SortableContainer }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
type: Input
}], disabled: [{
type: Input
}], hidden: [{
type: Input
}], _focused: [{
type: HostBinding,
args: ['class.k-focus']
}], _disabled: [{
type: HostBinding,
args: ['attr.aria-disabled']
}] } });