ng2-qgrid
Version:
Angular Grid
3 lines (2 loc) • 17.2 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("ng2-qgrid")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms","ng2-qgrid"],t):t(e["theme-basic"]={},e.ng.core,e.ng.common,null,null)}(this,function(e,t,i,r,l){"use strict";"function"==typeof Symbol&&Symbol.iterator,a="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,function(){function d(e){this.value=e}function e(l){var a,g;function o(e,t){try{var i=l[e](t),r=i.value;r instanceof d?Promise.resolve(r.value).then(function(e){o("next",e)},function(e){o("throw",e)}):n(i.done?"return":"normal",i.value)}catch(e){n("throw",e)}}function n(e,t){switch(e){case"return":a.resolve({value:t,done:!0});break;case"throw":a.reject(t);break;default:a.resolve({value:t,done:!1})}(a=a.next)?o(a.key,a.arg):g=null}this._invoke=function(r,l){return new Promise(function(e,t){var i={key:r,arg:l,resolve:e,reject:t,next:null};g?g=g.next=i:(a=g=i,o(r,l))})},"function"!=typeof l.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(e){return this._invoke("next",e)},e.prototype.throw=function(e){return this._invoke("throw",e)},e.prototype.return=function(e){return this._invoke("return",e)}}();var a,g=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=(function(){function e(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}}(),Object.assign,"undefined"==typeof global?self:global,function e(){g(this,e)});o.decorators=[{type:t.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>\x3c!-- https://www.w3schools.com/charsets/ref_utf_arrows.asp --\x3e <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:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None}]}],o.ctorParameters=function(){return[]};var n=function e(t){g(this,e),t.name="basic",t.component=o};n.decorators=[{type:t.NgModule,args:[{declarations:[o],exports:[o],imports:[i.CommonModule,l.CommonModule,r.FormsModule,l.TemplateModule,l.GridModule,l.PluginModule,l.PipeModule,l.VscrollModule],entryComponents:[o]}]}],n.ctorParameters=function(){return[{type:l.ThemeService}]},e.ThemeModule=n,e.ɵa=o,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=theme-basic.umd.min.js.map