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
text/typescript
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)"`;
}