ng2-qgrid
Version:
Angular Grid
73 lines (68 loc) • 17 kB
JavaScript
import { Component, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { PluginModule, CommonModule as CommonModule$1, TemplateModule, PipeModule, GridModule, VscrollModule, ThemeService } from 'ng2-qgrid';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ThemeComponent {
constructor() { }
}
ThemeComponent.decorators = [
{ type: Component, args: [{
selector: 'q-grid-theme',
styles: [".q-grid.q-grid-theme-basic { font-family: Roboto, \"Helvetica Neue\", sans-serif; } .q-grid.q-grid-theme-basic tr:not(.q-grid-highlighted) td.q-grid-selected { background-color: #f5f5f5; } .q-grid.q-grid-theme-basic.q-grid-box .q-grid-row-indicator .q-grid-can-drag .q-grid-icon { font-style: normal; } .q-grid.q-grid-theme-basic.q-grid-box:not(.q-grid-drag) th .q-grid-sort:not(.q-grid-active):hover .q-grid-desc { opacity: 1; } .q-grid.q-grid-theme-basic.q-grid-box:not(.q-grid-drag) tr.q-grid-highlighted { background-color: #eee; } .q-grid.q-grid-theme-basic.q-grid-box:not(.q-grid-drag) td.q-grid-highlighted { background-color: #eee; } .q-grid.q-grid-theme-basic div.q-grid-caption { height: 32px; } .q-grid.q-grid-theme-basic .q-grid-caption h3 { margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; overflow: hidden; text-overflow: ellipsis; } .q-grid.q-grid-theme-basic .q-grid-icon { font-style: normal; display: inline-block; font-size: 16px; } .q-grid.q-grid-theme-basic thead { box-shadow: 0 1px 0px #ddd; } .q-grid.q-grid-theme-basic thead th { padding-left: 16px; } .q-grid.q-grid-theme-basic th .q-grid-desc, .q-grid.q-grid-theme-basic th .q-grid-asc { display: none; } .q-grid.q-grid-theme-basic th .q-grid-can-sort .q-grid-sort { cursor: pointer; } .q-grid.q-grid-theme-basic th .q-grid-can-sort .q-grid-desc, .q-grid.q-grid-theme-basic th .q-grid-can-sort .q-grid-asc { display: block; } .q-grid.q-grid-theme-basic th .q-grid-sort .q-grid-icon { margin-left: -16px; } .q-grid.q-grid-theme-basic td.q-grid-row-expand button.q-grid-expand .q-grid-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .q-grid.q-grid-theme-basic td.q-grid-group button, .q-grid.q-grid-theme-basic td.q-grid-row-expand button { width: 24px; height: 24px; line-height: 24px; min-height: 24px; margin: -1px 0 0 -6px; padding: 0; } .q-grid.q-grid-theme-basic td.q-grid-group button.q-grid-expand .q-grid-icon, .q-grid.q-grid-theme-basic td.q-grid-row-expand button.q-grid-expand .q-grid-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .q-grid.q-grid-theme-basic td.q-grid-group-summary { color: #007fa3 !important; } .q-grid.q-grid-theme-basic .q-grid-icon-button { color: inherit; background: 0 0; font-family: Roboto,\"Helvetica Neue\",sans-serif; font-weight: 500; border-radius: 50%; min-width: 0; flex-shrink: 0; box-sizing: border-box; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; outline: 0; border: none; -webkit-tap-highlight-color: transparent; display: inline-block; white-space: nowrap; text-decoration: none; vertical-align: middle; text-align: center; overflow: visible; } .q-grid.q-grid-theme-basic .q-grid-icon-button[disabled][disabled] { color: rgba(0, 0, 0, 0.26); } .q-grid.q-grid-theme-basic .q-grid-pager { font-family: Roboto, \"Helvetica Neue\", sans-serif; padding: 11px 0; height: 24px; font-size: 12px; color: #757575; } .q-grid.q-grid-theme-basic .q-grid-pager .q-grid-pager-select { height: 32px; padding: 3px 0; } .q-grid.q-grid-theme-basic .q-grid-pager .q-grid-pager-select select { font-family: Roboto, \"Helvetica Neue\", sans-serif; font-size: 12px; color: #757575; border: none; height: 24px; width: 34.5px; margin: 0 0 0 12px; } .q-grid.q-grid-theme-basic .q-grid-pager .q-grid-pager-select select:focus { outline: none; } .q-grid.q-grid-theme-basic .q-grid-pager .q-grid-pager-page { margin-left: 30px; margin-right: 0; width: 37.2px; display: inline-block; } .q-grid.q-grid-theme-basic .q-grid-pager button { background: transparent; border: none; font-size: 20px; width: 24px; height: 24px; line-height: 24px; padding-top: 2px; } .q-grid.q-grid-theme-basic .q-grid-pager button.q-grid-pager-prev { top: -4px; margin-left: 44px; margin-right: 0; } .q-grid.q-grid-theme-basic .q-grid-pager button.q-grid-pager-next { top: -4px; margin-right: 14px; margin-left: 0; } .q-grid.q-grid-theme-basic .q-grid-pager-target-trigger { top: -4px; } .q-grid.q-grid-theme-basic .q-grid-pager-target-trigger .q-grid-icon { font-size: 14px; color: transparent; background: transparent; } .q-grid.q-grid-theme-basic .q-grid-head-span thead tr { height: 30px; } .q-grid.q-grid-theme-basic .q-grid-head-span thead th { border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; } .q-grid.q-grid-theme-basic .q-grid-head-span thead th:nth-last-child(2) { border-right: 1px solid #e0e0e0; } .q-grid.q-grid-theme-basic .q-grid-table tr { height: 30px; } .q-grid.q-grid-theme-basic .q-grid-table td.q-grid-sorted { background-color: #f5f5f5; } .q-grid.q-grid-theme-basic .q-grid-table th { font-size: 12px !important; color: #006f8f !important; font-weight: normal !important; line-height: 14px; } .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-desc, .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-asc { display: none; } .q-grid.q-grid-theme-basic .q-grid-table th.q-grid-can-sort .q-grid-sort { cursor: pointer; } .q-grid.q-grid-theme-basic .q-grid-table th.q-grid-can-sort .q-grid-desc, .q-grid.q-grid-theme-basic .q-grid-table th.q-grid-can-sort .q-grid-asc { display: block; } .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-sort { overflow: hidden; text-overflow: ellipsis; margin-left: -16px; padding-left: 16px; } .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-sort label { display: inline; } .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-sort.q-grid-active label { color: #004559; } .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-sort.q-grid-active .q-grid-icon { color: #004559; } .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-sort .q-grid-icon { transition: opacity 0.3s; opacity: 0; position: absolute; color: #005D78; font-size: 12px; font-weight: bold; height: 16px; width: 16px; min-height: 16px; min-width: 16px; vertical-align: middle; text-align: center; } .q-grid.q-grid-theme-basic .q-grid-table th .q-grid-sort .q-grid-icon.q-grid-active { opacity: 1; } .q-grid.q-grid-theme-basic .q-grid-table td { font-weight: normal; color: #212121; font-size: 16px; line-height: 16px; padding: 0 16px; padding-top: 0px; padding-right: 16px; padding-bottom: 0px; padding-left: 16px; } .q-grid.q-grid-theme-basic .q-grid-table td.q-grid-row-expand button { width: 24px; height: 24px; line-height: 24px; min-height: 24px; margin: -1px 0 0 -6px; padding: 0; opacity: 0.54; } .q-grid.q-grid-theme-basic .q-grid-table td.q-grid-array > ul { list-style: none; margin: 0; padding: 0; overflow: hidden; } .q-grid.q-grid-theme-basic .q-grid-table td.q-grid-array > ul li { display: inline-block; min-width: 16px; padding: 4px 8px; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #e0e0e0; border-radius: 16px; margin-right: 4px; } .q-grid.q-grid-theme-basic .q-grid-table td.q-grid-image { cursor: pointer; text-align: center; } .q-grid.q-grid-theme-basic .q-grid-table td.q-grid-image img { max-height: 40px; max-width: 40px; } .q-grid.q-grid-theme-basic .q-grid-table td.q-grid-image .q-grid-icon { color: #757575; } .q-grid.q-grid-theme-basic .q-grid-table tfoot tr, .q-grid.q-grid-theme-basic .q-grid-table tbody tr { border-top: 1px solid #e0e0e0; height: 30px; } .q-grid.q-grid-theme-basic .q-grid-table tfoot tr:nth-child(2), .q-grid.q-grid-theme-basic .q-grid-table tbody tr:nth-child(2) { border-top: 0; } .q-grid.q-grid-theme-basic tfoot tr { border-bottom: 1px solid #e0e0e0; } .q-grid.q-grid-theme-basic tfoot tr td span { font-weight: bold; } "],
template: "<ng-template key=\"body-cell-array-of-date.tpl.html\" let-$cell> <ul> <li *ngFor=\"let item of $cell.value\">{{item | date: $cell.column.itemFormat}}</li> </ul> </ng-template><ng-template key=\"body-cell-array-of-number.tpl.html\" let-$cell> <ul> <li *ngFor=\"let item of $cell.value\">{{item | number: $cell.column.itemFormat}}</li> </ul> </ng-template><ng-template key=\"body-cell-array.tpl.html\" let-$cell> <ul> <li *ngFor=\"let item of $cell.value\">{{$cell.column.itemLabel(item)}}</li> </ul> </ng-template><ng-template key=\"body-cell-currency.tpl.html\" let-$cell> <span>{{$cell.value | currency: $cell.column.code}}</span> </ng-template><ng-template key=\"body-cell-date.tpl.html\" let-$cell> <span>{{$cell.label | date: $cell.column.format}}</span> </ng-template> <ng-template key=\"body-cell-group.tpl.html\" let-$cell let-$view=\"$view\"> <div [ngStyle]=\"{'padding-left': $view.group.offset($cell.row, $cell.column) + 'px'}\" *ngIf=\"$view.group.isVisible($cell.row, $cell.column)\"> <button (mouseup)=\"$view.group.toggleStatus.execute($cell.row, $cell.column)\" *ngIf=\"$view.group.toggleStatus.canExecute($cell.row, $cell.column)\" [ngClass]=\"'q-grid-'+$view.group.status($cell.row, $cell.column) + ' q-grid-icon-button'\" tabindex=\"-1\"> <i class=\"q-grid-icon\">❯</i> </button> <span>{{$view.group.value($cell.row, $cell.column)}}</span> <span *ngIf=\" $view.group.toggleStatus.canExecute($cell.row, $cell.column)\">({{$view.group.count($cell.row, $cell.column)}})</span> </div> </ng-template> <ng-template key=\"body-cell-image.tpl.html\" let-$cell> <img *ngIf=\"$cell.value\" [src]=\"$cell.value\"/> </ng-template> <ng-template key=\"body-cell-number.tpl.html\" let-$cell> <span>{{$cell.label | number: $cell.column.format}}</span> </ng-template><ng-template key=\"body-cell-password.tpl.html\"> *** </ng-template><ng-template key=\"body-cell-pivot.tpl.html\" let-$cell let-$view=\"$view\"> {{$view.pivot.value($cell.rowIndex, $cell.columnIndex)}} </ng-template><ng-template key=\"body-cell-row-expand.tpl.html\" let-$cell let-$view=\"$view\"> <button (mouseup)=\"$view.rowDetails.toggleStatus.execute($cell.row)\" *ngIf=\"$view.rowDetails.toggleStatus.canExecute($cell.row)\" [ngClass]=\"'q-grid-'+$view.rowDetails.status($cell.row) + ' q-grid-icon-button'\" tabindex=\"-1\"> <i class=\"q-grid-icon\">❯</i> </button> </ng-template><ng-template key=\"body-cell-row-indicator.tpl.html\" let-$cell let-$view=\"$view\"> <ng-container *ngIf=\"$view.row.canMove\"> <div [q-grid-drag]=\"$view.row.drag\" [q-grid-drag-data]=\"$cell.rowIndex\" q-grid-drop-area=\"body\"> <i class=\"q-grid-icon\">∷</i> </div> </ng-container> <ng-container *ngIf=\"$view.row.canResize\"> <div [q-grid-drag]=\"$view.row.resize\" [q-grid-resize]=\"$cell.row\" q-grid-resize-path=\"rows\" [q-grid-can-resize]=\"$view.row.resize.canExecute\"> </div> </ng-container> </ng-template><ng-template key=\"body-cell-row-number.tpl.html\" let-$cell> {{$cell.rowIndex + 1}} </ng-template> <ng-template key=\"body-cell-select.tpl.html\" let-$cell let-$view=\"$view\"> <input type=\"checkbox\" [checked]=\"$view.selection.state($cell.row)\" [disabled]=\"!$view.selection.toggleRow.canExecute($cell.row)\" (change)=\"$view.selection.toggleRow.execute($cell.row)\" tabindex=\"-1\" class=\"q-grid-checkbox\" /> </ng-template><ng-template key=\"body-cell-text.tpl.html\" let-$cell> <span>{{$cell.label}}</span> </ng-template><ng-template key=\"body-cell-time.tpl.html\" let-$cell> {{$cell.label | date: $cell.column.format}} </ng-template><ng-template key=\"body-cell-url.tpl.html\" let-$cell let-$view=\"$view\"> <a [attr.href]=\"$cell.value\"> {{$cell.label || $cell.value}} </a> </ng-template><ng-template key=\"foot-cell-currency.tpl.html\" let-$cell> <span>{{$cell.value | currency:$cell.column.code}}</span> </ng-template> <ng-template key=\"foot-cell-number.tpl.html\" let-$cell> <span>{{$cell.value | number:$cell.column.format}}</span> </ng-template><ng-template key=\"foot-cell-text.tpl.html\" let-$cell> <span>{{$cell.value}}</span> </ng-template><ng-template key=\"head-cell-text.tpl.html\" let-$cell let-$view=\"$view\"> <q-grid-column-sort *ngIf=\"$cell.column.canSort\" [column]=\"$cell.column\" class=\"q-grid-sort\"> <ng-template> <label> {{$cell.column.title}} </label> </ng-template> </q-grid-column-sort> <label *ngIf=\"!$cell.column.canSort\"> {{$cell.column.title}} </label> </ng-template><ng-template key=\"plugin-caption.tpl.html\" let-$caption> <div class=\"q-grid-caption\"> <h3 class=\"mat-card-title\"> {{$caption.value}} </h3> </div> </ng-template><!-- https://www.w3schools.com/charsets/ref_utf_arrows.asp --> <ng-template key=\"plugin-column-sort.tpl.html\" let-$columnSort> <i class=\"q-grid-icon q-grid-asc\">↑</i> <i class=\"q-grid-icon q-grid-desc\">↓</i> <ng-container [ngTemplateOutlet]=\"$columnSort.template\"></ng-container> </ng-template><ng-template key=\"plugin-pager-target.tpl.html\" let-$target> <button tabindex=\"-1\" disabled (click)=\"$target.value = $target.current\" class=\"q-grid-pager-target-trigger q-grid-icon-button\"> <i class=\"q-grid-icon\">⚪</i> </button> </ng-template><ng-template key=\"plugin-pager.tpl.html\" let-$pager> <div class=\"q-grid-pager\" [ngSwitch]=\"$pager.scroll.mode\"> <div *ngSwitchCase=\"'virtual'\"> <label class=\"q-grid-pager-page\" [ngSwitch]=\"$pager.mode\"> <span *ngSwitchCase=\"'row'\">{{$pager.from}}-{{$pager.to}} of {{$pager.total}}</span> <span *ngSwitchDefault>{{$pager.current + 1}} of {{$pager.totalPages}}</span> </label> </div> <div *ngSwitchDefault class=\"q-grid-pager-select\"> <label class=\"q-grid-page-size hide-xs\">Rows per page:</label> <select tabindex=\"-1\" aria-label=\"Page Size List\" class=\"q-grid-page-size hide-xs\" [(ngModel)]=\"$pager.size\"> <option *ngFor=\"let size of $pager.sizeList\" [value]=\"size\">{{size}}</option> </select> <div class=\"q-grid-pager-page\"> <label class=\"hide-xs\" ng-switch=\"::$pager.mode\"> <span *ngSwitchCase=\"'row'\">{{$pager.from}}-{{$pager.to}} of {{$pager.total}}</span> <span *ngSwitchDefault>{{$pager.current + 1}} of {{$pager.totalPages}}</span> </label> </div> <button tabindex=\"-1\" class=\"q-grid-icon-button q-grid-pager-prev\" [disabled]=\"!$pager.prev.canExecute()\" (click)=\"$pager.prev.execute();\"> <i class=\"q-grid-icon\">❮</i> </button> <q-grid-pager-target></q-grid-pager-target> <button tabindex=\"-1\" class=\"q-grid-icon-button q-grid-pager-next\" [disabled]=\"!$pager.next.canExecute()\" (click)=\"$pager.next.execute();\"> <i class=\"q-grid-icon\">❯</i> </button> </div> </div> </ng-template><ng-template key=\"plugin-title.tpl.html\" let-$title> <div class=\"q-grid-title\"> <h3> {{$title.value}} </h3> </div> </ng-template><ng-template key=\"toolbar-bottom.tpl.html\"> <div class=\"layout-row\"> <div class=\"flex\"> <q-grid-legend></q-grid-legend> </div> <div class=\"flex-none\"> <q-grid-pager></q-grid-pager> </div> </div> </ng-template> <ng-template key=\"toolbar-left.tpl.html\"> </ng-template> <ng-template key=\"toolbar-right.tpl.html\"> </ng-template> <ng-template key=\"toolbar-top.tpl.html\"> <div class=\"layout-row\"> <div class=\"flex-100\" style=\"padding: 16px 0;\"> <q-grid-caption></q-grid-caption> </div> <div class=\"flex-auto layout-row\" style=\"padding: 12px 0;\"> <div class=\"flex-100\"> <q-grid-action-bar></q-grid-action-bar> </div> </div> </div> <div class=\"q-grid-progress\"> <q-grid-progress></q-grid-progress> </div> </ng-template> ",
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
},] },
];
/** @nocollapse */
ThemeComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class ThemeModule {
/**
* @param {?} theme
*/
constructor(theme) {
theme.name = 'basic';
theme.component = ThemeComponent;
}
}
ThemeModule.decorators = [
{ type: NgModule, args: [{
declarations: [
ThemeComponent
],
exports: [
ThemeComponent
],
imports: [
CommonModule,
CommonModule$1,
FormsModule,
TemplateModule,
GridModule,
PluginModule,
PipeModule,
VscrollModule
],
entryComponents: [
ThemeComponent
]
},] },
];
/** @nocollapse */
ThemeModule.ctorParameters = () => [
{ type: ThemeService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { ThemeModule, ThemeComponent as ɵa };
//# sourceMappingURL=theme-basic.js.map