UNPKG

igniteui-angular-sovn

Version:

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

578 lines (501 loc) 26.2 kB
export class GridTemplateStrings { public static basicGrid = ` <igx-grid [data]="data"> </igx-grid>`; public static gridAutoGenerate = ` <igx-grid [data]="data" [autoGenerate]="autoGenerate"> </igx-grid>`; public static gridWithSize = ` <igx-grid [data]="data" [autoGenerate]="autoGenerate" [height]="height" [width]="width"> </igx-grid>`; public static declareGrid(attributes = ``, events = ``, columnDefinitions: ColumnDefinitions = ``, toolbarDefinition = '', paginatorDefinition = '', templateDefinitions: TemplateDefinitions = '') { return `<igx-grid [data]="data" ${attributes} ${events} > ${toolbarDefinition} ${columnDefinitions} ${paginatorDefinition} ${templateDefinitions} </igx-grid>`; } public static declareBasicGridWithColumns(columnDefinitions: ColumnDefinitions) { return GridTemplateStrings.declareGrid(``, ``, columnDefinitions); } } export class ColumnDefinitions { public static idNameJobTitle = ` <igx-column field="ID"></igx-column> <igx-column field="Name"></igx-column> <igx-column field="JobTitle"></igx-column> `; public static idNameJobTitleEditable = ` <igx-column field="ID"></igx-column> <igx-column field="Name" [editable]="true"></igx-column> <igx-column field="JobTitle" [editable]="true"></igx-column> `; public static idNameJobTitleCompany = ` <igx-column field="ID"></igx-column> <igx-column field="Name"></igx-column> <igx-column field="JobTitle"></igx-column> <igx-column field="Company"></igx-column> `; public static idNameJobHireDate = ` <igx-column field="ID"></igx-column> <igx-column field="Name"></igx-column> <igx-column field="JobTitle"></igx-column> <igx-column field="HireDate"></igx-column> `; public static idNameJobHireWithTypes = ` <igx-column field="ID" dataType="number"></igx-column> <igx-column field="Name" dataType="string"></igx-column> <igx-column field="JobTitle" dataType="string"></igx-column> <igx-column field="HireDate" dataType="date"></igx-column> `; public static idNameJobHireSortable = ` <igx-column field="ID" [sortable]="true"></igx-column> <igx-column field="Name" [sortable]="true"></igx-column> <igx-column field="JobTitle" [sortable]="true"></igx-column> <igx-column field="HireDate" [sortable]="true"></igx-column> `; public static idNameHiddenJobHirePinned = ` <igx-column field="ID"></igx-column> <igx-column field="Name" hidden="true"></igx-column> <igx-column field="JobTitle"></igx-column> <igx-column field="HireDate" [pinned]="true"></igx-column> `; public static idNameJobHoursHireDatePerformance = ` <igx-column field="ID"></igx-column> <igx-column field="Name"></igx-column> <igx-column field="JobTitle"></igx-column> <igx-column field="WorkingHours"></igx-column> <igx-column field="HireDate"></igx-column> <igx-column field="Performance"></igx-column> `; public static hireDate = ` <igx-column field="HireDate" [dataType]="'date'"></igx-column> `; public static nameJobTitleId = ` <igx-column field="Name"></igx-column> <igx-column field="JobTitle"></igx-column> <igx-column field="ID"></igx-column> `; public static simpleDatePercentColumns = ` <igx-column field="Name" dataType="string"></igx-column> <igx-column field="BirthDate" dataType="date"></igx-column> <igx-column field="LastLogin" dataType="dateTime"></igx-column> <igx-column field="MeetingTime" dataType="time"></igx-column> <igx-column field="AttendanceRate" dataType="percent"></igx-column> `; public static nameAgeEditable = ` <igx-column field="FirstName" [editable]="true"></igx-column> <igx-column field="LastName"></igx-column> <igx-column field="age"></igx-column> `; public static nameAvatar = ` <igx-column [field]="'Name'" dataType="string"></igx-column> <igx-column [field]="'Avatar'" header="Photo" [searchable]="false"> <ng-template igxCell let-cell="cell"> <div class="cell__inner avatar-cell"> <img [src]="cell.row.data.Avatar" width="30px" height="30px"/> </div> </ng-template> </igx-column> `; public static idFirstLastNameSortable = ` <igx-column headerClasses="header-id" [sortable]="true" field="ID"></igx-column> <igx-column [sortable]="true" field="Name"></igx-column> <igx-column [sortable]="true" field="LastName"></igx-column> `; public static resizableThreeOfFour = ` <igx-column [resizable]="true" field="ID" width="100px"></igx-column> <igx-column [resizable]="true" [minWidth]="'70px'" [maxWidth]="'250px'" field="Name" width="100px"></igx-column> <igx-column [resizable]="false" [sortable]="true" field="LastName" width="100px"></igx-column> <igx-column [resizable]="true" field="Region" width="100px"></igx-column> `; public static pinnedTwoOfFour = ` <igx-column [pinned]="true" [resizable]="true" field="ID" width="100px"></igx-column> <igx-column [pinned]="true" [resizable]="true" field="Name" width="100px" [maxWidth]="'150px'"></igx-column> <igx-column [resizable]="true" field="LastName" width="100px"></igx-column> <igx-column [resizable]="true" field="Region" width="100px"></igx-column> `; public static pinnedThreeOfEight = ` <igx-column [field]="'Released'" [pinned]="true" width="100px" dataType="boolean" [resizable]="true"></igx-column> <igx-column [field]="'ReleaseDate'" [pinned]="true" width="100px" dataType="date" [resizable]="true"></igx-column> <igx-column [field]="'Items'" [pinned]="true" width="100px" dataType="string" [resizable]="true"></igx-column> <igx-column [field]="'ID'" [width]="'100px'" [header]="'ID'" [resizable]="true"></igx-column> <igx-column [field]="'ProductName'" width="25px" [maxWidth]="'100px'" dataType="string" [resizable]="true"></igx-column> <igx-column [field]="'Test'" width="100px" dataType="string" [resizable]="true"> <ng-template igxCell> <div></div> </ng-template> </igx-column> <igx-column [field]="'Downloads'" width="100px" dataType="number" [resizable]="true"></igx-column> <igx-column [field]="'Category'" width="100px" dataType="string" [resizable]="true"></igx-column> `; public static gridFeatures = ` <igx-column [field]="'ID'" [width]="'150px'" [sortable]="true" [resizable]="true"></igx-column> <igx-column [field]="'ProductName'" [width]="'150px'" [resizable]="true" dataType="string"></igx-column> <igx-column [field]="'Downloads'" [sortable]="true" [header]="'D'" [width]="'150px'" [resizable]="true" dataType="number"> </igx-column> <igx-column [field]="'Released'" [header]="'Re'" [resizable]="true" dataType="boolean"></igx-column> <igx-column [field]="'ReleaseDate'" [resizable]="true" dataType="date"></igx-column> <igx-column [field]="'Category'" [width]="'150px'" [resizable]="true" dataType="string"> <ng-template igxCell igxHeader> <igx-avatar initials="JS"></igx-avatar> </ng-template> </igx-column> <igx-column [field]="'Items'" [width]="'60px'" [hasSummary]="true" [resizable]="true" dataType="string"></igx-column> <igx-column [field]="'Test'" [resizable]="true" dataType="string"></igx-column> `; public static resizableColsComponent = ` <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [resizable]="c.resizable" [width]="c.width" [minWidth]="c.minWidth" [maxWidth]="c.maxWidth" [hidden]="c.hidden" [pinned]="c.pinned"> </igx-column> `; public static iterableComponent = ` <igx-column *ngFor="let each of columns" [field]="each"></igx-column> `; public static columnTemplates = ` <igx-column field="ID" [hasSummary]="true"> <ng-template igxHeader> <span class="header">Header text</span> </ng-template> <ng-template igxCell> <span class="cell">Cell text</span> </ng-template> <ng-template igxSummary> <span class="summary">Summary text</span> </ng-template> <ng-template igxFooter> <span class="footer">Footer text</span> </ng-template> </igx-column> <igx-column field="Name" [hasSummary]="true"> <ng-template igxHeader> <span class="header">Header text</span> </ng-template> <ng-template igxCell> <span class="cell">Cell text</span> </ng-template> <ng-template igxSummary> <span class="summary">Summary text</span> </ng-template> <ng-template igxFooter> <span class="footer">Footer text</span> </ng-template> </igx-column> `; public static idNameFormatter = ` <igx-column field="ID" [formatter]="multiplier"></igx-column> <igx-column field="IsEmployed" [dataType]="'boolean'"></igx-column> <igx-column field="Name"></igx-column> `; public static productHidable = ` <igx-column [field]="'ID'" [header]="'ID'"></igx-column> <igx-column [field]="'ProductName'" [disableHiding]="true" dataType="string"></igx-column> <igx-column [field]="'Downloads'" [hidden]="true" dataType="number"></igx-column> <igx-column [field]="'Released'" dataType="boolean"></igx-column> <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" dataType="date"></igx-column> `; public static productFilterable = ` <igx-column [field]="'ID'" [header]="'ID'"></igx-column> <igx-column [field]="'ProductName'" [filterable]="true" dataType="string"></igx-column> <igx-column [field]="'Downloads'" [filterable]="true" dataType="number"></igx-column> <igx-column [field]="'Released'" [filterable]="true" dataType="boolean"></igx-column> <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" [filterable]="true" dataType="date"> </igx-column> `; public static productDefaultSummaries = ` <igx-column field="ProductID" width="150px" header="Product ID"> </igx-column> <igx-column field="ProductName" width="150px" [hasSummary]="true"> </igx-column> <igx-column field="InStock" width="150px" [dataType]="'boolean'" [hasSummary]="true"> </igx-column> <igx-column field="UnitsInStock" width="150px" [dataType]="'number'" [hasSummary]="true"> </igx-column> <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true"> </igx-column> `; public static productBasic = ` <igx-column field="ProductID" header="Product ID"> </igx-column> <igx-column field="ProductName"> </igx-column> <igx-column field="InStock" [dataType]="'boolean'"> </igx-column> <igx-column field="UnitsInStock" [dataType]="'number'"> </igx-column> <igx-column field="OrderDate" width="200px" [dataType]="'date'"> </igx-column> `; public static productBasicNumberID = ` <igx-column field="ProductID" header="Product ID" [dataType]="'number'"> </igx-column> <igx-column field="ProductName"> </igx-column> <igx-column field="InStock" [dataType]="'boolean'"> </igx-column> <igx-column field="UnitsInStock" [dataType]="'number'"> </igx-column> <igx-column field="OrderDate" width="200px" [dataType]="'date'"> </igx-column> `; public static productSummariesAndFilter = ` <igx-column field="ProductID" header="Product ID"> </igx-column> <igx-column field="ProductName" [hasSummary]="true"> </igx-column> <igx-column field="InStock" [dataType]="'boolean'" [hasSummary]="true"> </igx-column> <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true" [filterable]="true"> </igx-column> <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true"> </igx-column> `; public static indexAndValue = ` <igx-column field="index" header="index" dataType="number"></igx-column> <igx-column field="value" header="value" dataType="number"></igx-column> `; public static generatedWithSummaries = ` <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.header" [hasSummary]="true"> </igx-column> `; public static generatedWithDataType = ` <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [dataType]="c.dataType"> </igx-column> `; public static generatedGroupableWithEnabledSummariesAndDataType = ` <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.header" [hasSummary]="true" [dataType]="c.dataType" [groupable]='c.groupable'> </igx-column> `; public static generatedWithColumnBasedSummariesAndDataType = ` <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.header" [hasSummary]="c.hasSummary" [dataType]="c.dataType"></igx-column> `; public static generatedEditable = ` <igx-column *ngFor="let col of columns" [field]="col.key" [header]="col.key" [dataType]="col.dataType" [editable]="col.editable"></igx-column> `; public static generatedWithWidth = ` <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [width]="c.width"> </igx-column> `; public static productFilterSortPin = ` <igx-column [field]="'ID'" [header]="'ID'"></igx-column> <igx-column [field]="'ProductName'" [filterable]="true" [sortable]="true" [pinned]="true" dataType="string"></igx-column> <igx-column [field]="'Downloads'" [filterable]="true" dataType="number"></igx-column> <igx-column [field]="'Released'" [filterable]="true" dataType="boolean"></igx-column> <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" [filterable]="true" dataType="date"> </igx-column> `; public static productAllColumnFeatures = ` <igx-column [field]="'ID'" [header]="'ID'" [pinned]="true" [resizable]="false" [disableHiding]="true"></igx-column> <igx-column [field]="'ProductName'" dataType="string" [filterable]="true" [sortable]="true" [resizable]="true" [hasSummary]="true" [editable]="true"></igx-column> <igx-column [field]="'Downloads'" dataType="number" [filterable]="true" [sortable]="true" [resizable]="true" [moveable]="true"></igx-column> <igx-column [field]="'Released'" dataType="boolean" [filterable]="true" [resizable]="true" [moveable]="true" [editable]="true"></igx-column> <igx-column [field]="'ReleaseDate'" dataType="date" [header]="'ReleaseDate'" [filterable]="true" [sortable]="true" [resizable]="true" [editable]="true"> </igx-column> `; public static movableColumns = ` <igx-column field="ID" width="150px" [resizable]="isResizable" [editable]="isEditable" [sortable]="isSortable" [hidden]="isHidden" [groupable]="isGroupable" [filterable]="isFilterable"> </igx-column> <igx-column field="Name" width="150px" [resizable]="isResizable" [editable]="isEditable" [sortable]="isSortable" [filterable]="isFilterable"> </igx-column> <igx-column field="LastName" width="150px" [resizable]="isResizable" [editable]="isEditable" [sortable]="isSortable" [filterable]="isFilterable"> </igx-column> <igx-column field="Region" width="150px" [resizable]="isResizable" [editable]="isEditable" [sortable]="isSortable" [filterable]="isFilterable"> </igx-column> `; public static multiColHeadersColumns = ` <igx-column [width]="'100px'" [resizable]="true" [pinned]="isPinned" [sortable]="true" [filterable]="true" field="Missing"></igx-column> <igx-column-group header="General Information"> <igx-column [width]="'130px'" [filterable]="true" [sortable]="true" field="CompanyName"></igx-column> <igx-column-group header="Person Details"> <igx-column [width]="'100px'" field="ContactName"></igx-column> <igx-column [filterable]="true" [sortable]="true" field="ContactTitle"></igx-column> </igx-column-group> </igx-column-group> <igx-column [resizable]="true" field="ID"></igx-column> <igx-column-group header="Address Information"> <igx-column field="Country" [width]="'90px'"> <ng-template igxHeader let-column> {{ column.field }} </ng-template> <ng-template igxCell let-cell="cell" let-val let-row> {{val}} </ng-template> </igx-column> <igx-column [width]="'150px'" field="Region"></igx-column> <igx-column field="City"></igx-column> <igx-column field="Address"></igx-column> </igx-column-group> `; public static multiColHeadersWithGroupingColumns = ` <igx-column [width]="'100px'" [resizable]="true" [pinned]="false" [sortable]="true" [filterable]="true" field="Missing"></igx-column> <igx-column-group header="General Information" [groupable]="true" [pinned]="isPinned"> <igx-column [width]="'130px'" [filterable]="true" [sortable]="true" field="CompanyName"></igx-column> <igx-column-group header="Person Details"> <igx-column [width]="'100px'" field="ContactName"></igx-column> <igx-column [width]="'100px'"[filterable]="true" [sortable]="true" field="ContactTitle"></igx-column> </igx-column-group> </igx-column-group> <igx-column [resizable]="true" field="ID" [width]="'100px'" [groupable]="true"></igx-column> `; public static contactInfoGroupableColumns = ` <igx-column [hasSummary]="true" [resizable]="true" [pinned]="true" field="Missing"></igx-column> <igx-column-group [pinned]="false" header="General Information"> <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="CompanyName"></igx-column> <igx-column-group header="Person Details"> <igx-column [pinned]="false" [filterable]="true" [sortable]="true" [resizable]="true" field="ContactName"></igx-column> <igx-column [hasSummary]="true" [filterable]="true" [sortable]="true" [resizable]="true" field="ContactTitle"></igx-column> </igx-column-group> </igx-column-group> <igx-column field="ID" [hasSummary]="true" [resizable]="true" [editable]="true"></igx-column> `; public static summariesGroupByColumns = ` <igx-column [field]="'ID'" dataType="number" width="150px" [hasSummary]="false" [groupable]="true"></igx-column> <igx-column [field]="'ParentID'" width="150px" dataType="number" [hasSummary]="true" [groupable]="true"></igx-column> <igx-column [field]="'Name'" width="150px" dataType="string" [hasSummary]="true" [groupable]="true"></igx-column> <igx-column [field]="'HireDate'" width="150px" dataType="date" [hasSummary]="true" [groupable]="true"></igx-column> <igx-column [field]="'Age'" width="150px" dataType="number" [hasSummary]="true" [groupable]="true"></igx-column> <igx-column [field]="'OnPTO'" width="150px" dataType="boolean" [hasSummary]="true" [groupable]="true"></igx-column> `; public static summariesGroupByTansColumns = ` <igx-column [field]="'ID'" dataType="number" width="150px" [hasSummary]="false" [groupable]="true"></igx-column> <igx-column [field]="'ParentID'" width="150px" dataType="number" [hasSummary]="false" [groupable]="true"></igx-column> <igx-column [field]="'Name'" width="150px" dataType="string" [hasSummary]="true" [groupable]="true"></igx-column> <igx-column [field]="'HireDate'" width="150px" dataType="date" [hasSummary]="true" [groupable]="true"></igx-column> <igx-column [field]="'Age'" width="150px" dataType="number" [hasSummary]="true" [groupable]="true" [summaries]="ageSummaryMinMax"></igx-column> <igx-column [field]="'OnPTO'" width="150px" dataType="boolean" [hasSummary]="true" [groupable]="true"></igx-column> `; public static selectionWithScrollsColumns = ` <igx-column [field]="'ID'" dataType="number" width="150px" ></igx-column> <igx-column [field]="'ParentID'" width="150px" dataType="number" ></igx-column> <igx-column [field]="'Name'" width="150px" dataType="string"></igx-column> <igx-column [field]="'HireDate'" width="150px" dataType="date"></igx-column> <igx-column [field]="'Age'" width="150px" dataType="number"></igx-column> <igx-column [field]="'OnPTO'" width="150px" dataType="boolean"></igx-column> `; public static exportGroupedDataColumns = ` <igx-column [field]="'Price'" dataType="number" [groupable]="true"></igx-column> <igx-column [field]="'Brand'" dataType="string" [groupable]="true"></igx-column> <igx-column [field]="'Model'" dataType="string" [groupable]="true"></igx-column> <igx-column [field]="'Edition'" dataType="string" [groupable]="true"></igx-column> `; public static multiColHeadersExportColumns = ` <igx-column [resizable]="true" field="ID" [filterable]="false"></igx-column> <igx-column-group header="General Information" [collapsible]="true" [expanded]="true"> <igx-column field="CompanyName" [visibleWhenCollapsed]="true"></igx-column> <igx-column-group header="Personal Details" [collapsible]="true" [expanded]="false" [visibleWhenCollapsed]="false"> <igx-column field="ContactName"></igx-column> <igx-column field="ContactTitle"></igx-column> </igx-column-group> </igx-column-group> <igx-column-group header="Address Information"> <igx-column-group header="Location" [collapsible]="true" [expanded]="false" [visibleWhenCollapsed]="true"> <igx-column field="Country" [visibleWhenCollapsed]="true" [hidden]="true"></igx-column> <igx-column field="Region" [visibleWhenCollapsed]="false" [hidden]="true"></igx-column> <igx-column field="City" [visibleWhenCollapsed]="false" [hidden]="true"></igx-column> <igx-column field="Address" [visibleWhenCollapsed]="false" [hidden]="true"></igx-column> </igx-column-group> <igx-column-group header="Contact Information"> <igx-column field="Phone"></igx-column> <igx-column field="Fax"></igx-column> <igx-column field="PostalCode"></igx-column> </igx-column-group> </igx-column-group> `; } export class TemplateDefinitions { public static sortIconTemplates = ` <ng-template igxSortHeaderIcon> <igx-icon>unfold_more</igx-icon> </ng-template> <ng-template igxSortAscendingHeaderIcon> <igx-icon>expand_less</igx-icon> </ng-template> <ng-template igxSortDescendingHeaderIcon> <igx-icon>expand_more</igx-icon> </ng-template> `; } export class ExternalTemplateDefinitions { public static sortIconTemplates = ` <ng-template #sortIcon igxSortHeaderIcon> <igx-icon>arrow_right</igx-icon> </ng-template> <ng-template #sortAscIcon igxSortAscendingHeaderIcon> <igx-icon>arrow_drop_up</igx-icon> </ng-template> <ng-template #sortDescIcon igxSortDescendingHeaderIcon> <igx-icon>arrow_drop_down</igx-icon> </ng-template> `; } export class EventSubscriptions { public static columnInit = ` (columnInit)="columnInit($event)"`; public static selected = ` (selected)="cellSelected($event)"`; public static onCellClick = ` (onCellClick)="cellClick($event)"`; public static doubleClick = ` (doubleClick)="doubleClick($event)"`; public static contextMenu = ` (contextMenu)="cellRightClick($event)"`; public static columnPin = ` (columnPin)="columnPinning($event)"`; public static rowAdded = ` (rowAdded)="rowAdded($event)"`; public static rowDeleted = ` (rowDeleted)="rowDeleted($event)"`; public static onEditDone = ` (cellEdit)="editDone($event)"`; public static rowSelectionChanging = ` (rowSelectionChanging)="rowSelectionChanging($event)"`; public static columnResized = ` (columnResized)="columnResized($event)"`; public static columnMovingStart = ` (columnMovingStart)="columnMovingStarted($event)"`; public static columnMoving = ` (columnMoving)="columnMoving($event)"`; public static columnMovingEnd = ` (columnMovingEnd)="columnMovingEnded($event)"`; }