ng-devui
Version:
DevUI components based on Angular
48 lines • 12.2 kB
JavaScript
import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { SortDirection } from '../../../../data-table.model';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SortComponent {
get canShow() {
return this.showSortIcon || (this.sortDirection === 'ASC') || (this.sortDirection === 'DESC');
}
constructor() {
this.showSortIcon = false;
this.sortEvent = new EventEmitter();
}
ngOnInit() {
}
sort() {
switch (this.sortDirection) {
case SortDirection.ASC:
this.sortDirection = SortDirection.DESC;
break;
case 'DESC':
this.sortDirection = SortDirection.default;
break;
case SortDirection.default:
default:
this.sortDirection = SortDirection.ASC;
}
this.sortEvent.emit({ direction: this.sortDirection });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SortComponent, selector: "d-table-sort", inputs: { sortDirection: "sortDirection", showSortIcon: "showSortIcon" }, outputs: { sortEvent: "sortEvent" }, host: { properties: { "class.devui-icon-show": "this.canShow" } }, ngImport: i0, template: "<span (click)=\"sort()\" class=\"sort-clickable\">\n <i\n class=\"datatable-svg\"\n [ngClass]=\"{\n 'sort-icon-default': !sortDirection,\n 'sort-icon-asc': sortDirection === 'ASC',\n 'sort-icon-desc': sortDirection === 'DESC',\n 'sort-icon-default-visible': showSortIcon\n }\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <defs>\n <circle id=\"sort-svg-path-1\" cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <filter x=\"-34.4%\" y=\"-21.9%\" width=\"168.8%\" height=\"168.8%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feOffset dx=\"0\" dy=\"2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n <feColorMatrix\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.085309222 0\"\n type=\"matrix\"\n in=\"shadowBlurOuter1\"\n ></feColorMatrix>\n </filter>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <use fill-rule=\"evenodd\" xlink:href=\"#sort-svg-path-1\"></use>\n <polygon points=\"8 4 11 7 5 7\"></polygon>\n <polygon points=\"8 12 5 9 11 9\"></polygon>\n </g>\n </svg>\n </i>\n</span>\n", styles: [".sort-clickable{cursor:pointer;vertical-align:-.55em}:host{margin-left:8px;display:none}:host.devui-icon-show{display:block}.sort-icon-default{visibility:hidden}.sort-icon-default>svg g use{fill:var(--devui-shape-icon-fill, #c2c2c2)}.sort-icon-default>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-default:hover>svg g use{fill:var(--devui-shape-icon-fill-active, #808080)}.sort-icon-default-visible{visibility:visible}.sort-icon-asc>svg g use,.sort-icon-desc>svg g use{fill:var(--devui-brand, #0a59f7)}.sort-icon-asc>svg g polygon,.sort-icon-desc>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-asc:hover>svg g use,.sort-icon-desc:hover>svg g use{fill:var(--devui-brand, #0a59f7)}.sort-icon-asc>svg g polygon:last-of-type{opacity:.3}.sort-icon-desc>svg g polygon:first-of-type{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortComponent, decorators: [{
type: Component,
args: [{ selector: 'd-table-sort', template: "<span (click)=\"sort()\" class=\"sort-clickable\">\n <i\n class=\"datatable-svg\"\n [ngClass]=\"{\n 'sort-icon-default': !sortDirection,\n 'sort-icon-asc': sortDirection === 'ASC',\n 'sort-icon-desc': sortDirection === 'DESC',\n 'sort-icon-default-visible': showSortIcon\n }\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n >\n <defs>\n <circle id=\"sort-svg-path-1\" cx=\"8\" cy=\"8\" r=\"8\"></circle>\n <filter x=\"-34.4%\" y=\"-21.9%\" width=\"168.8%\" height=\"168.8%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feOffset dx=\"0\" dy=\"2\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"></feOffset>\n <feGaussianBlur stdDeviation=\"1.5\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n <feColorMatrix\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.085309222 0\"\n type=\"matrix\"\n in=\"shadowBlurOuter1\"\n ></feColorMatrix>\n </filter>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <use fill-rule=\"evenodd\" xlink:href=\"#sort-svg-path-1\"></use>\n <polygon points=\"8 4 11 7 5 7\"></polygon>\n <polygon points=\"8 12 5 9 11 9\"></polygon>\n </g>\n </svg>\n </i>\n</span>\n", styles: [".sort-clickable{cursor:pointer;vertical-align:-.55em}:host{margin-left:8px;display:none}:host.devui-icon-show{display:block}.sort-icon-default{visibility:hidden}.sort-icon-default>svg g use{fill:var(--devui-shape-icon-fill, #c2c2c2)}.sort-icon-default>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-default:hover>svg g use{fill:var(--devui-shape-icon-fill-active, #808080)}.sort-icon-default-visible{visibility:visible}.sort-icon-asc>svg g use,.sort-icon-desc>svg g use{fill:var(--devui-brand, #0a59f7)}.sort-icon-asc>svg g polygon,.sort-icon-desc>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-asc:hover>svg g use,.sort-icon-desc:hover>svg g use{fill:var(--devui-brand, #0a59f7)}.sort-icon-asc>svg g polygon:last-of-type{opacity:.3}.sort-icon-desc>svg g polygon:first-of-type{opacity:.5}\n"] }]
}], ctorParameters: () => [], propDecorators: { sortDirection: [{
type: Input
}], showSortIcon: [{
type: HostBinding,
args: ['class.devui-icon-show']
}, {
type: Input
}], sortEvent: [{
type: Output
}], canShow: [{
type: HostBinding,
args: ['class.devui-icon-show']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9kZXZ1aS9kYXRhLXRhYmxlL3RhYmxlL2hlYWQvdGgvc29ydC9zb3J0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2RldnVpL2RhdGEtdGFibGUvdGFibGUvaGVhZC90aC9zb3J0L3NvcnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUYsT0FBTyxFQUFFLGFBQWEsRUFBZ0IsTUFBTSw4QkFBOEIsQ0FBQzs7O0FBTzNFLE1BQU0sT0FBTyxhQUFhO0lBTXhCLElBQ0ksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLFlBQVksSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLEtBQUssS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxLQUFLLE1BQU0sQ0FBQyxDQUFDO0lBQ2hHLENBQUM7SUFFRDtRQVJTLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBZ0IsQ0FBQztJQU92QyxDQUFDO0lBRWpCLFFBQVE7SUFDUixDQUFDO0lBRUQsSUFBSTtRQUNGLFFBQVEsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQzdCLEtBQUssYUFBYSxDQUFDLEdBQUc7Z0JBQ3BCLElBQUksQ0FBQyxhQUFhLEdBQUcsYUFBYSxDQUFDLElBQUksQ0FBQztnQkFDeEMsTUFBTTtZQUNSLEtBQUssTUFBTTtnQkFDVCxJQUFJLENBQUMsYUFBYSxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUM7Z0JBQzNDLE1BQU07WUFDUixLQUFLLGFBQWEsQ0FBQyxPQUFPLENBQUM7WUFDM0I7Z0JBQ0UsSUFBSSxDQUFDLGFBQWEsR0FBRyxhQUFhLENBQUMsR0FBRyxDQUFDO1FBQ3pDLENBQUM7UUFDRCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFFLFNBQVMsRUFBRSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUMsQ0FBQztJQUN6RCxDQUFDOytHQTdCVSxhQUFhO21HQUFiLGFBQWEsc09DUjFCLCs5Q0FzQ0E7OzRGRDlCYSxhQUFhO2tCQUx6QixTQUFTOytCQUNFLGNBQWM7d0RBS2YsYUFBYTtzQkFBckIsS0FBSztnQkFFRyxZQUFZO3NCQURwQixXQUFXO3VCQUFDLHVCQUF1Qjs7c0JBQ25DLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTTtnQkFHSCxPQUFPO3NCQURWLFdBQVc7dUJBQUMsdUJBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNvcnREaXJlY3Rpb24sIFNvcnRFdmVudEFyZyB9IGZyb20gJy4uLy4uLy4uLy4uL2RhdGEtdGFibGUubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdkLXRhYmxlLXNvcnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vc29ydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NvcnQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBTb3J0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgc29ydERpcmVjdGlvbjogU29ydERpcmVjdGlvbjtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5kZXZ1aS1pY29uLXNob3cnKVxuICBASW5wdXQoKSBzaG93U29ydEljb24gPSBmYWxzZTtcbiAgQE91dHB1dCgpIHNvcnRFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8U29ydEV2ZW50QXJnPigpO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuZGV2dWktaWNvbi1zaG93JylcbiAgZ2V0IGNhblNob3coKSB7XG4gICAgcmV0dXJuIHRoaXMuc2hvd1NvcnRJY29uIHx8ICh0aGlzLnNvcnREaXJlY3Rpb24gPT09ICdBU0MnKSB8fCAodGhpcy5zb3J0RGlyZWN0aW9uID09PSAnREVTQycpO1xuICB9XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgfVxuXG4gIHNvcnQoKSB7XG4gICAgc3dpdGNoICh0aGlzLnNvcnREaXJlY3Rpb24pIHtcbiAgICBjYXNlIFNvcnREaXJlY3Rpb24uQVNDOlxuICAgICAgdGhpcy5zb3J0RGlyZWN0aW9uID0gU29ydERpcmVjdGlvbi5ERVNDO1xuICAgICAgYnJlYWs7XG4gICAgY2FzZSAnREVTQyc6XG4gICAgICB0aGlzLnNvcnREaXJlY3Rpb24gPSBTb3J0RGlyZWN0aW9uLmRlZmF1bHQ7XG4gICAgICBicmVhaztcbiAgICBjYXNlIFNvcnREaXJlY3Rpb24uZGVmYXVsdDpcbiAgICBkZWZhdWx0OlxuICAgICAgdGhpcy5zb3J0RGlyZWN0aW9uID0gU29ydERpcmVjdGlvbi5BU0M7XG4gICAgfVxuICAgIHRoaXMuc29ydEV2ZW50LmVtaXQoeyBkaXJlY3Rpb246IHRoaXMuc29ydERpcmVjdGlvbiB9KTtcbiAgfVxufVxuIiwiPHNwYW4gKGNsaWNrKT1cInNvcnQoKVwiIGNsYXNzPVwic29ydC1jbGlja2FibGVcIj5cbiAgPGlcbiAgICBjbGFzcz1cImRhdGF0YWJsZS1zdmdcIlxuICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICdzb3J0LWljb24tZGVmYXVsdCc6ICFzb3J0RGlyZWN0aW9uLFxuICAgICAgJ3NvcnQtaWNvbi1hc2MnOiBzb3J0RGlyZWN0aW9uID09PSAnQVNDJyxcbiAgICAgICdzb3J0LWljb24tZGVzYyc6IHNvcnREaXJlY3Rpb24gPT09ICdERVNDJyxcbiAgICAgICdzb3J0LWljb24tZGVmYXVsdC12aXNpYmxlJzogc2hvd1NvcnRJY29uXG4gICAgfVwiXG4gID5cbiAgICA8c3ZnXG4gICAgICB3aWR0aD1cIjE2cHhcIlxuICAgICAgaGVpZ2h0PVwiMTZweFwiXG4gICAgICB2aWV3Qm94PVwiMCAwIDE2IDE2XCJcbiAgICAgIHZlcnNpb249XCIxLjFcIlxuICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXG4gICAgICB4bWxuczp4bGluaz1cImh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmtcIlxuICAgID5cbiAgICAgIDxkZWZzPlxuICAgICAgICA8Y2lyY2xlIGlkPVwic29ydC1zdmctcGF0aC0xXCIgY3g9XCI4XCIgY3k9XCI4XCIgcj1cIjhcIj48L2NpcmNsZT5cbiAgICAgICAgPGZpbHRlciB4PVwiLTM0LjQlXCIgeT1cIi0yMS45JVwiIHdpZHRoPVwiMTY4LjglXCIgaGVpZ2h0PVwiMTY4LjglXCIgZmlsdGVyVW5pdHM9XCJvYmplY3RCb3VuZGluZ0JveFwiIGlkPVwiZmlsdGVyLTJcIj5cbiAgICAgICAgICA8ZmVPZmZzZXQgZHg9XCIwXCIgZHk9XCIyXCIgaW49XCJTb3VyY2VBbHBoYVwiIHJlc3VsdD1cInNoYWRvd09mZnNldE91dGVyMVwiPjwvZmVPZmZzZXQ+XG4gICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj1cIjEuNVwiIGluPVwic2hhZG93T2Zmc2V0T3V0ZXIxXCIgcmVzdWx0PVwic2hhZG93Qmx1ck91dGVyMVwiPjwvZmVHYXVzc2lhbkJsdXI+XG4gICAgICAgICAgPGZlQ29sb3JNYXRyaXhcbiAgICAgICAgICAgIHZhbHVlcz1cIjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4wODUzMDkyMjIgMFwiXG4gICAgICAgICAgICB0eXBlPVwibWF0cml4XCJcbiAgICAgICAgICAgIGluPVwic2hhZG93Qmx1ck91dGVyMVwiXG4gICAgICAgICAgPjwvZmVDb2xvck1hdHJpeD5cbiAgICAgICAgPC9maWx0ZXI+XG4gICAgICA8L2RlZnM+XG4gICAgICA8ZyBzdHJva2U9XCJub25lXCIgc3Ryb2tlLXdpZHRoPVwiMVwiIGZpbGw9XCJub25lXCIgZmlsbC1ydWxlPVwiZXZlbm9kZFwiPlxuICAgICAgICA8dXNlIGZpbGwtcnVsZT1cImV2ZW5vZGRcIiB4bGluazpocmVmPVwiI3NvcnQtc3ZnLXBhdGgtMVwiPjwvdXNlPlxuICAgICAgICA8cG9seWdvbiBwb2ludHM9XCI4IDQgMTEgNyA1IDdcIj48L3BvbHlnb24+XG4gICAgICAgIDxwb2x5Z29uIHBvaW50cz1cIjggMTIgNSA5IDExIDlcIj48L3BvbHlnb24+XG4gICAgICA8L2c+XG4gICAgPC9zdmc+XG4gIDwvaT5cbjwvc3Bhbj5cbiJdfQ==