@igniteui/angular-templates 13.0.906 → 13.1.910-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.component.html +4 -4
  2. package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.component.ts +6 -3
  3. package/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss +4 -4
  4. package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.html +28 -28
  5. package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss +44 -44
  6. package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.html +14 -14
  7. package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss +6 -6
  8. package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss +2 -2
  9. package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.html +15 -15
  10. package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss +6 -6
  11. package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss +2 -2
  12. package/igx-ts/grid/grid-custom/index.js +1 -2
  13. package/igx-ts/hierarchical-grid/hierarchical-grid-custom/index.js +1 -1
  14. package/igx-ts/projects/_base/files/package.json +1 -1
  15. package/igx-ts/projects/_base/index.js +4 -4
  16. package/igx-ts/projects/empty/files/src/app/home/home.component.scss +1 -1
  17. package/igx-ts/projects/side-nav-auth/files/package.json +1 -1
  18. package/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.component.html +1 -1
  19. package/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.component.ts +6 -3
  20. package/igx-ts/tree-grid/tree-grid-custom/index.js +1 -2
  21. package/package.json +2 -2
package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.component.html CHANGED
@@ -4,12 +4,12 @@
4
4
  <p>You can read more about configuring those components, using the following links:</p>
5
5
  <ul>
6
6
  <li>
7
- <b>igx-autocomplete</b> -
8
- <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md" target="_blank">README</a> or the
7
+ <b>igx-autocomplete</b> -
8
+ <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md" target="_blank">README</a> or the
9
9
  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html" target="_blank">official documentation</a>.
10
10
  </li>
11
11
  <li>
12
- <b>igx-drop-down</b> -
12
+ <b>igx-drop-down</b> -
13
13
  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/README.md" target="_blank">README</a> or the
14
14
  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop_down.html" target="_blank">official documentation</a>.
15
15
  </li>
@@ -32,6 +32,6 @@
32
32
  </igx-drop-down-item-group>
33
33
  </igx-drop-down>
34
34
 
35
- <igx-toast #message [position]="messagePosition">Postal Code: {{postalCode}}"</igx-toast>
35
+ <igx-toast #message>Postal Code: {{postalCode}}"</igx-toast>
36
36
  </div>
37
37
  </div>
package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.component.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Component, Pipe, PipeTransform, ViewChild } from '@angular/core';
2
- import { IgxToastComponent, IgxToastPosition, ISelectionEventArgs } from '<%=igxPackage%>';
2
+ import { IgxToastComponent, ISelectionEventArgs, PositionSettings, HorizontalAlignment, VerticalAlignment } from '<%=igxPackage%>';
3
3
  import { Region, Town, townsExtended } from './towns-data-extended';
4
4
 
5
5
  @Component({
@@ -11,7 +11,10 @@ export class <%=ClassName%>Component {
11
11
  public regions!: Region[];
12
12
  public townSelected!: string;
13
13
  public postalCode?: number;
14
- public messagePosition = IgxToastPosition.Middle;
14
+ private messagePositionSettings: PositionSettings = {
15
+ horizontalDirection: HorizontalAlignment.Center,
16
+ verticalDirection: VerticalAlignment.Middle
17
+ };
15
18
 
16
19
  @ViewChild(IgxToastComponent, { static: true })
17
20
  public toast!: IgxToastComponent;
@@ -28,7 +31,7 @@ export class <%=ClassName%>Component {
28
31
  const townEntry = allTowns.find(t => t.name === e.newSelection.value);
29
32
 
30
33
  this.postalCode = townEntry?.postalCode;
31
- this.toast.open();
34
+ this.toast.open(undefined, this.messagePositionSettings);
32
35
  }
33
36
  }
34
37
 
package/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss CHANGED
@@ -1,18 +1,18 @@
1
1
  @use '<%=igxPackage%>/theming' as *;
2
- $grid-sample-theme: igx-grid-theme(
2
+ $grid-sample-theme: grid-theme(
3
3
  $row-selected-background: #333,
4
4
  $row-selected-text-color: #ddd,
5
5
  $row-hover-background: #f8f8f8,
6
6
  $row-border-color: #f8f8f8,
7
7
  $cell-selected-background:
8
- igx-color(
8
+ color(
9
9
  $color: "grays",
10
10
  $variant: 800,
11
11
  ),
12
12
  $cell-selected-text-color: #fff,
13
13
  );
14
14
 
15
- $progressBar-sample-theme: igx-progress-linear-theme(
15
+ $progressBar-sample-theme: progress-linear-theme(
16
16
  $track-color: rgba(181, 181, 181, 0.5),
17
17
  $fill-color-default: orange,
18
18
  );
@@ -137,7 +137,7 @@ $progressBar-sample-theme: igx-progress-linear-theme(
137
137
  }
138
138
 
139
139
  &__player-name {
140
- color: igx-color($color: "primary", $variant: 800);
140
+ color: color($color: "primary", $variant: 800);
141
141
  font-size: 18px;
142
142
  margin: 0;
143
143
  white-space: nowrap;
package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="grid__wrapper">
2
2
  <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" height="430px" width="100%"
3
- [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true">
3
+ [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true" [moving]="true">
4
4
  <igx-grid-toolbar>
5
5
  <igx-grid-toolbar-title>
6
6
  <div class="crm-toolbar-template">
@@ -59,11 +59,11 @@
59
59
  </igx-grid-toolbar>
60
60
 
61
61
  <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false" [resizable]="true"
62
- [hidden]="true" [movable]="true">
62
+ [hidden]="true">
63
63
  </igx-column>
64
64
 
65
65
  <igx-column field="avatar" header="Photo" width="88" [pinned]="true" [resizable]="true" [searchable]="false"
66
- [movable]="true" [filterable]="false">
66
+ [filterable]="false">
67
67
  <ng-template igxCell let-cell="cell">
68
68
  <div class="cell__inner avatar-cell">
69
69
  <igx-avatar [src]="cell.row.data.avatar" [roundShape]="true" size="small"></igx-avatar>
@@ -72,18 +72,18 @@
72
72
  </igx-column>
73
73
 
74
74
  <igx-column field="name" header="Name" [sortable]="true" width="149" [pinned]="true" [resizable]="true"
75
- [hasSummary]="false" [movable]="true">
75
+ [hasSummary]="false">
76
76
  </igx-column>
77
77
 
78
78
  <igx-column field="deals_total" header="Total Deals" [sortable]="true" width="130" dataType="number"
79
- [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
79
+ [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
80
80
  </igx-column>
81
81
 
82
82
  <igx-column field="deals_won" header="Won Deals" [sortable]="true" width="130" dataType="number"
83
- [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
83
+ [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
84
84
  </igx-column>
85
85
 
86
- <igx-column field="ratio" header="Ratio" width="150" [resizable]="true" [movable]="true" [filterable]="false">
86
+ <igx-column field="ratio" header="Ratio" width="150" [resizable]="true" [filterable]="false">
87
87
  <ng-template igxCell let-val>
88
88
  <div style="width: 100%">
89
89
  <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val" [animate]="false">
@@ -101,81 +101,81 @@
101
101
  </igx-column>
102
102
 
103
103
  <igx-column field="deals_lost" header="Lost Deals" [sortable]="true" width="130" dataType="number"
104
- [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
104
+ [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
105
105
  </igx-column>
106
106
 
107
107
  <igx-column field="deals_pending" header="Pending Deals" [sortable]="true" width="130" dataType="number"
108
- [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
108
+ [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
109
109
  </igx-column>
110
110
 
111
- <igx-column field="position" header="Position" width="200" [resizable]="true" [movable]="true">
111
+ <igx-column field="position" header="Position" width="200" [resizable]="true">
112
112
  </igx-column>
113
113
 
114
114
  <igx-column field="company" header="Company" [sortable]="true" width="130" [hasSummary]="false" [resizable]="true"
115
- [movable]="true">
115
+ >
116
116
  </igx-column>
117
117
 
118
- <igx-column field="email" header="Email" width="240" [resizable]="true" [movable]="true" [filterable]="false">
118
+ <igx-column field="email" header="Email" width="240" [resizable]="true" [filterable]="false">
119
119
  </igx-column>
120
120
 
121
- <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true" [movable]="true"
121
+ <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true"
122
122
  [filterable]="false">
123
123
  </igx-column>
124
124
 
125
- <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true" [movable]="true"
125
+ <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true"
126
126
  [filterable]="false">
127
127
  </igx-column>
128
128
 
129
- <igx-column field="fax" header="Fax" width="160" [resizable]="true" [movable]="true" [filterable]="false">
129
+ <igx-column field="fax" header="Fax" width="160" [resizable]="true" [filterable]="false">
130
130
  </igx-column>
131
131
 
132
- <igx-column field="tags" header="Tags" width="160" [resizable]="true" [movable]="true">
132
+ <igx-column field="tags" header="Tags" width="160" [resizable]="true">
133
133
  </igx-column>
134
134
 
135
- <igx-column field="street" header="Street" width="160" [resizable]="true" [movable]="true" [filterable]="false">
135
+ <igx-column field="street" header="Street" width="160" [resizable]="true" [filterable]="false">
136
136
  </igx-column>
137
137
 
138
- <igx-column field="city" header="City" width="160" [resizable]="true" [movable]="true">
138
+ <igx-column field="city" header="City" width="160" [resizable]="true">
139
139
  </igx-column>
140
140
 
141
- <igx-column field="post_code" header="Post Code" width="100" [resizable]="true" [movable]="true"
141
+ <igx-column field="post_code" header="Post Code" width="100" [resizable]="true"
142
142
  [filterable]="false">
143
143
  </igx-column>
144
144
 
145
- <igx-column field="state" header="State" width="105" [resizable]="true" [movable]="true">
145
+ <igx-column field="state" header="State" width="105" [resizable]="true">
146
146
  </igx-column>
147
147
 
148
- <igx-column field="country" header="Country" [sortable]="true" width="160" [resizable]="true" [movable]="true">
148
+ <igx-column field="country" header="Country" [sortable]="true" width="160" [resizable]="true">
149
149
  </igx-column>
150
150
 
151
151
  <igx-column field="created_on" header="Created On" dataType="date" [formatter]="formatDate" [sortable]="true"
152
- width="150" [resizable]="true" [movable]="true" [filterable]="false">
152
+ width="150" [resizable]="true" [filterable]="false">
153
153
  </igx-column>
154
154
 
155
- <igx-column field="referred_by" header="Referred By" width="160" [resizable]="true" [movable]="true">
155
+ <igx-column field="referred_by" header="Referred By" width="160" [resizable]="true">
156
156
  </igx-column>
157
157
 
158
158
  <igx-column field="birthday" header="Birthday" width="160" dataType="date" [formatter]="formatDate"
159
- [hasSummary]="false" [summaries]="soonSummary" [resizable]="true" [movable]="true" [filterable]="false">
159
+ [hasSummary]="false" [summaries]="soonSummary" [resizable]="true" [filterable]="false">
160
160
  </igx-column>
161
161
 
162
162
  <igx-column field="last_activity" header="Last Activity" width="160" dataType="date" [formatter]="formatDate"
163
- [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [movable]="true" [filterable]="false">
163
+ [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
164
164
  </igx-column>
165
165
 
166
166
  <igx-column field="next_activity" header="Next Activity" width="160" dataType="date" [formatter]="formatDate"
167
- [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [movable]="true" [filterable]="false">
167
+ [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
168
168
  </igx-column>
169
169
 
170
170
  <igx-column field="estimated_sales" header="Possible Sales ($)" [sortable]="true" width="150" dataType="number"
171
- [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
171
+ [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
172
172
  <ng-template igxCell let-cell="call" let-val>
173
173
  {{ formatValue(val) }}
174
174
  </ng-template>
175
175
  </igx-column>
176
176
 
177
177
  <igx-column field="actual_sales" header="Actual Sales ($)" [sortable]="true" width="150" dataType="number"
178
- [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
178
+ [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
179
179
  <ng-template igxCell let-val>
180
180
  {{ formatValue(val) }}
181
181
  </ng-template>
package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss CHANGED
@@ -4,67 +4,67 @@
4
4
  @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
5
5
  :host ::ng-deep {
6
6
 
7
- $crm-grid-palette: igx-palette(
7
+ $crm-grid-palette: palette(
8
8
  $primary: #09f,
9
9
  $secondary: #ffbf00
10
10
  );
11
- @include igx-theme($crm-grid-palette);
11
+ @include theme($crm-grid-palette);
12
12
 
13
- $checkbox-theme: igx-checkbox-theme(
14
- $fill-color: igx-color($crm-grid-palette, "secondary", 500),
13
+ $checkbox-theme: checkbox-theme(
14
+ $fill-color: color($crm-grid-palette, "secondary", 500),
15
15
  $tick-color: black
16
16
  );
17
17
 
18
- $summary-theme: igx-grid-summary-theme(
18
+ $summary-theme: grid-summary-theme(
19
19
  $background-color: #f0f8fe,
20
- $result-color: igx-color($crm-grid-palette, "primary", 500)
20
+ $result-color: color($crm-grid-palette, "primary", 500)
21
21
  );
22
22
 
23
- $search-theme: igx-input-group-theme(
24
- $search-background: igx-color($crm-grid-palette, "primary", 600),
25
- $idle-text-color: igx-color($crm-grid-palette, "primary", 100),
26
- $filled-text-color: igx-color($crm-grid-palette, "grays", 600),
27
- $focused-text-color: igx-color($crm-grid-palette, "grays", 600)
23
+ $search-theme: input-group-theme(
24
+ $search-background: color($crm-grid-palette, "primary", 600),
25
+ $idle-text-color: color($crm-grid-palette, "primary", 100),
26
+ $filled-text-color: color($crm-grid-palette, "grays", 600),
27
+ $focused-text-color: color($crm-grid-palette, "grays", 600)
28
28
  );
29
29
 
30
- $crm-grid-theme: igx-grid-theme(
30
+ $crm-grid-theme: grid-theme(
31
31
  $header-background: #f0f8fe,
32
32
  $header-border-color: #dde5eb
33
33
  );
34
34
 
35
- $crm-grid-toolbar: igx-grid-toolbar-theme(
36
- $background-color: igx-color($crm-grid-palette, "primary", 500)
35
+ $crm-grid-toolbar: grid-toolbar-theme(
36
+ $background-color: color($crm-grid-palette, "primary", 500)
37
37
  );
38
38
 
39
- $crm-grid-toolbar-button: igx-button-theme(
40
- $background: igx-color($crm-grid-palette, "primary", 800),
41
- $hover-background: igx-color($crm-grid-palette, "primary", 900),
39
+ $crm-grid-toolbar-button: button-theme(
40
+ $background: color($crm-grid-palette, "primary", 800),
41
+ $hover-background: color($crm-grid-palette, "primary", 900),
42
42
  $focus-foreground: #fff
43
43
  );
44
44
 
45
- $crm-grid-search-button: igx-button-theme(
45
+ $crm-grid-search-button: button-theme(
46
46
  $background: transparent,
47
- $focus-background: igx-color($crm-grid-palette, "grays", 200),
48
- $hover-background: igx-color($crm-grid-palette, "grays", 200)
47
+ $focus-background: color($crm-grid-palette, "grays", 200),
48
+ $hover-background: color($crm-grid-palette, "grays", 200)
49
49
  );
50
50
 
51
- $crm-input-drop-down: igx-input-group-theme(
52
- $placeholder-color: igx-color($crm-grid-palette, "grays", 500),
53
- $idle-text-color: igx-color($crm-grid-palette, "grays", 900)
51
+ $crm-input-drop-down: input-group-theme(
52
+ $placeholder-color: color($crm-grid-palette, "grays", 500),
53
+ $idle-text-color: color($crm-grid-palette, "grays", 900)
54
54
  );
55
55
 
56
- @include igx-grid-toolbar($crm-grid-toolbar);
56
+ @include grid-toolbar($crm-grid-toolbar);
57
57
 
58
- @include igx-grid($crm-grid-theme);
58
+ @include grid($crm-grid-theme);
59
59
 
60
- @include igx-grid-summary($summary-theme);
60
+ @include grid-summary($summary-theme);
61
61
 
62
- @include igx-input-group($search-theme);
62
+ @include input-group($search-theme);
63
63
 
64
- @include igx-grid-toolbar($crm-grid-toolbar);
64
+ @include grid-toolbar($crm-grid-toolbar);
65
65
 
66
66
  .igx-drop-down__list {
67
- @include igx-input-group($crm-input-drop-down)
67
+ @include input-group($crm-input-drop-down)
68
68
  }
69
69
 
70
70
  .igx-grid__summaries-patch {
@@ -156,7 +156,7 @@
156
156
  }
157
157
 
158
158
  .igx-grid-toolbar__actions {
159
- @include igx-button($crm-grid-toolbar-button);
159
+ @include button($crm-grid-toolbar-button);
160
160
 
161
161
  .igx-button--outlined {
162
162
  margin-left: 0.5rem;
@@ -170,14 +170,14 @@
170
170
  height: rem(36px);
171
171
  width: 100%;
172
172
  overflow: hidden;
173
- background-color: igx-color($crm-grid-palette, "primary", 800);
173
+ background-color: color($crm-grid-palette, "primary", 800);
174
174
 
175
175
  .igx-input-group__bundle-main {
176
176
  padding-top: 0.6rem;
177
177
  height: 36px;
178
178
  }
179
179
 
180
- @include igx-button($crm-grid-search-button);
180
+ @include button($crm-grid-search-button);
181
181
  }
182
182
 
183
183
  .igx-input-group--search .igx-input-group__bundle,
@@ -199,7 +199,7 @@
199
199
  font-size: 1rem;
200
200
  width: 1rem;
201
201
  height: 1rem;
202
- color: igx-color($crm-grid-palette, "primary", 200);
202
+ color: color($crm-grid-palette, "primary", 200);
203
203
  }
204
204
  }
205
205
 
@@ -211,7 +211,7 @@
211
211
 
212
212
  .igx-input-group__textarea,
213
213
  .igx-input-group__input {
214
- color: igx-color($crm-grid-palette, "primary", 100);
214
+ color: color($crm-grid-palette, "primary", 100);
215
215
  }
216
216
 
217
217
  .igx-input-group__input {
@@ -226,30 +226,30 @@
226
226
  &:focus,
227
227
  &.igx-input-group--focused {
228
228
  igx-icon {
229
- color: igx-color($crm-grid-palette, 'grays', 600);
229
+ color: color($crm-grid-palette, 'grays', 600);
230
230
  }
231
231
 
232
232
  .igx-input-group__bundle {
233
233
  background: #fff;
234
- color: igx-color($crm-grid-palette, 'grays', 600);
234
+ color: color($crm-grid-palette, 'grays', 600);
235
235
  }
236
236
 
237
237
  .igx-input-group__input {
238
238
  &::placeholder {
239
- color: igx-color($crm-grid-palette, 'grays', 600);
239
+ color: color($crm-grid-palette, 'grays', 600);
240
240
  opacity: 1;
241
241
  }
242
242
  }
243
243
 
244
244
  .igx-input-group__textarea,
245
245
  .igx-input-group__input {
246
- color: igx-color($crm-grid-palette, 'grays', 600);
246
+ color: color($crm-grid-palette, 'grays', 600);
247
247
  }
248
248
 
249
249
  .igx-button--icon {
250
250
  &:focus,
251
251
  &:active {
252
- color: igx-color($crm-grid-palette, 'grays', 600);
252
+ color: color($crm-grid-palette, 'grays', 600);
253
253
  }
254
254
  }
255
255
  }
@@ -258,7 +258,7 @@
258
258
  .igx-button--icon {
259
259
  &:focus,
260
260
  &:active {
261
- color: igx-color($crm-grid-palette, "primary", 100);
261
+ color: color($crm-grid-palette, "primary", 100);
262
262
  background: transparent;
263
263
  }
264
264
  }
@@ -298,7 +298,7 @@
298
298
  //resize handle
299
299
 
300
300
  .igx-grid__th-resize-line {
301
- background: igx-color($crm-grid-palette, "secondary", 500);
301
+ background: color($crm-grid-palette, "secondary", 500);
302
302
  }
303
303
 
304
304
 
@@ -321,7 +321,7 @@
321
321
  }
322
322
 
323
323
  .dd-title {
324
- color: igx-color($crm-grid-palette, "primary", 600);
324
+ color: color($crm-grid-palette, "primary", 600);
325
325
  margin: 0;
326
326
  padding: 16px;
327
327
  font-size: 14px;
@@ -337,11 +337,11 @@
337
337
  padding: 16px;
338
338
 
339
339
  ::ng-deep {
340
- @include igx-checkbox($checkbox-theme);
340
+ @include checkbox($checkbox-theme);
341
341
  }
342
342
 
343
343
  &:hover {
344
- background: lighten(igx-color($crm-grid-palette, "primary", 100), 10);
344
+ background: lighten(color($crm-grid-palette, "primary", 100), 10);
345
345
  }
346
346
  }
347
347
 
package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.html CHANGED
@@ -38,7 +38,7 @@
38
38
  <igx-grid #grid1 igxPreventDocumentScroll (rowSelectionChanging)="rowSelectionChanging($event)" [data]="data"
39
39
  width="100%" height="90%" [autoGenerate]="false" displayDensity="compact" primaryKey="ID" hiddenColumnsText="Hidden"
40
40
  [rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter"
41
- (keydown)="gridKeydown($event)" (gridKeydown)="customKeydown($event)">
41
+ (keydown)="gridKeydown($event)" (gridKeydown)="customKeydown($event)" [moving]="true">
42
42
  <igx-grid-toolbar *ngIf="showToolbar">
43
43
  <igx-grid-toolbar-actions>
44
44
  <igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
@@ -78,8 +78,8 @@
78
78
  <igx-column field="LastUpdated" width="120px" [editable]="true" header="Last Update" dataType="date">
79
79
  </igx-column>
80
80
  <igx-column field="Open Price" width="120px" dataType="number" [formatter]="formatCurrency"
81
- [movable]="true" [sortable]="true"></igx-column>
82
- <igx-column field="Price" width="110px" dataType="number" [cellClasses]="trends" [movable]="true"
81
+ [sortable]="true"></igx-column>
82
+ <igx-column field="Price" width="110px" dataType="number" [cellClasses]="trends"
83
83
  [sortable]="true">
84
84
  <ng-template igxCell let-cell="cell">
85
85
  <div class="fintech-icons">
@@ -98,31 +98,31 @@
98
98
  </igx-column>
99
99
 
100
100
  <igx-column field="Change" width="120px" dataType="number" headerClasses="headerAlignSyle"
101
- [sortable]="true" [cellClasses]="trendsChange" [formatter]="formatNumber" [movable]="true">
101
+ [sortable]="true" [cellClasses]="trendsChange" [formatter]="formatNumber" >
102
102
  </igx-column>
103
103
 
104
- <igx-column field="Change(%)" width="110px" dataType="number" [formatter]="percentage" [movable]="true"
104
+ <igx-column field="Change(%)" width="110px" dataType="number" [formatter]="percentage"
105
105
  [sortable]="true" [cellClasses]="trendsChange">
106
106
  </igx-column>
107
107
 
108
- <igx-column field="Buy" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true"
108
+ <igx-column field="Buy" width="110px" dataType="number" [formatter]="formatCurrency"
109
109
  [sortable]="true"></igx-column>
110
- <igx-column field="Sell" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true"
110
+ <igx-column field="Sell" width="110px" dataType="number" [formatter]="formatCurrency"
111
111
  [sortable]="true"></igx-column>
112
- <igx-column field="Spread" width="110px" dataType="number" [formatter]="formatNumber" [movable]="true">
112
+ <igx-column field="Spread" width="110px" dataType="number" [formatter]="formatNumber" >
113
113
  </igx-column>
114
- <igx-column field="Volume" width="110px" dataType="number" [formatter]="formatNumber" [movable]="true"
114
+ <igx-column field="Volume" width="110px" dataType="number" [formatter]="formatNumber"
115
115
  [sortable]="true"></igx-column>
116
116
  <igx-column field="High(D)" width="110px" dataType="number" [formatter]="formatCurrency"
117
- [movable]="true" [sortable]="true"></igx-column>
118
- <igx-column field="Low(D)" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true"
117
+ [sortable]="true"></igx-column>
118
+ <igx-column field="Low(D)" width="110px" dataType="number" [formatter]="formatCurrency"
119
119
  [sortable]="true"></igx-column>
120
120
  <igx-column field="High(Y)" width="110px" dataType="number" [formatter]="formatCurrency"
121
- [movable]="true" [sortable]="true"></igx-column>
122
- <igx-column field="Low(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true"
121
+ [sortable]="true"></igx-column>
122
+ <igx-column field="Low(Y)" width="110px" dataType="number" [formatter]="formatCurrency"
123
123
  [sortable]="true"></igx-column>
124
124
  <igx-column field="Start(Y)" width="110px" dataType="number" [formatter]="formatCurrency"
125
- [movable]="true" [sortable]="true"></igx-column>
125
+ [sortable]="true"></igx-column>
126
126
 
127
127
  <igx-column field="IndGrou" width="100px" [filterable]="false"></igx-column>
128
128
  <igx-column field="IndSect" width="120px" [filterable]="false" [resizable]="true"></igx-column>
package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss CHANGED
@@ -227,14 +227,14 @@
227
227
  height: 100%;
228
228
  }
229
229
 
230
- @include igx-core();
231
- @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
232
- @include igx-theme($default-palette);
230
+ @include core();
231
+ @include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
232
+ @include theme($default-palette);
233
233
 
234
234
 
235
235
  @include scrollbar-love();
236
236
 
237
- $green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
237
+ $green-palette: palette($primary: #09f,$secondary: #72da67, $surface: #333);
238
238
 
239
239
  :host {
240
240
  ::ng-deep {
@@ -242,8 +242,8 @@ $green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
242
242
  @include scrollbar-love();
243
243
 
244
244
  .fin-dark-theme {
245
- @include igx-dark-theme($green-palette);
246
- @include scrollbar-love(igx-color($green-palette, 'surface'));
245
+ @include dark-theme($green-palette);
246
+ @include scrollbar-love(color($green-palette, 'surface'));
247
247
  background: #333;
248
248
 
249
249
  igx-grid-cell {
package/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  @use '<%=igxPackage%>/theming' as *;
2
2
 
3
3
  @mixin scrollbar-love($scrollbar-color: null) {
4
- $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
5
- $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
4
+ $scrollbar-track: hexrgba(color($default-palette, 'grays', 200));
5
+ $scrollbar-thumb: hexrgba(color($default-palette, 'grays', 400));
6
6
 
7
7
  @if $scrollbar-color and luminance($scrollbar-color) < .5 {
8
8
  $scrollbar-track: darken($scrollbar-color, 8%);
package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.html CHANGED
@@ -30,7 +30,7 @@
30
30
  [data]="data | treeGridGrouping:groupColumns:aggregations:groupColumnKey:primaryKey:childDataKey"
31
31
  height="90%" width="100%" [autoGenerate]="false" displayDensity="compact"
32
32
  [primaryKey]="primaryKey" [childDataKey]="childDataKey" hiddenColumnsText="Hidden"
33
- [rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter">
33
+ [rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter" [moving]="true">
34
34
  <igx-grid-toolbar *ngIf="showToolbar">
35
35
  <igx-grid-toolbar-actions>
36
36
  <igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
@@ -48,8 +48,8 @@
48
48
  <igx-column field="Settlement" width="100px" [sortable]="true"></igx-column>
49
49
  <igx-column field="Region" width="110px" [sortable]="true"></igx-column>
50
50
  <igx-column field="Country" width="100px" [sortable]="true"></igx-column>
51
- <igx-column field="Open Price" width="120px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
52
- <igx-column field="Price" width="130px" dataType="number" [cellClasses]="trends" [movable]="true" [sortable]="true" [disableHiding]="true">
51
+ <igx-column field="Open Price" width="120px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
52
+ <igx-column field="Price" width="130px" dataType="number" [cellClasses]="trends" [sortable]="true" [disableHiding]="true">
53
53
  <ng-template igxCell let-cell="cell">
54
54
  <div class="finjs-icons">
55
55
  <span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
@@ -59,20 +59,20 @@
59
59
  </ng-template>
60
60
  </igx-column>
61
61
 
62
- <igx-column field="Change" width="120px" dataType="number" headerClasses="headerAlignSyle" [sortable]="true" [cellClasses]="trendsChange" [formatter]="formatNumber" [movable]="true">
62
+ <igx-column field="Change" width="120px" dataType="number" headerClasses="headerAlignSyle" [sortable]="true" [cellClasses]="trendsChange" [formatter]="formatNumber">
63
63
  </igx-column>
64
64
 
65
- <igx-column field="Change(%)" width="110px" dataType="number" [formatter]="percentage" [movable]="true" [sortable]="true" [cellClasses]="trendsChange">
65
+ <igx-column field="Change(%)" width="110px" dataType="number" [formatter]="percentage" [sortable]="true" [cellClasses]="trendsChange">
66
66
  </igx-column>
67
67
 
68
- <igx-column field="Buy" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
69
- <igx-column field="Sell" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
70
- <igx-column field="Spread" width="110px" dataType="number" [formatter]="formatNumber" [movable]="true"></igx-column>
71
- <igx-column field="Volume" width="110px" dataType="number" [formatter]="formatNumber" [movable]="true" [sortable]="true"></igx-column>
72
- <igx-column field="High(D)" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
73
- <igx-column field="Low(D)" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
74
- <igx-column field="High(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
75
- <igx-column field="Low(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
76
- <igx-column field="Start(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [movable]="true" [sortable]="true"></igx-column>
68
+ <igx-column field="Buy" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
69
+ <igx-column field="Sell" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
70
+ <igx-column field="Spread" width="110px" dataType="number" [formatter]="formatNumber"></igx-column>
71
+ <igx-column field="Volume" width="110px" dataType="number" [formatter]="formatNumber" [sortable]="true"></igx-column>
72
+ <igx-column field="High(D)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
73
+ <igx-column field="Low(D)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
74
+ <igx-column field="High(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
75
+ <igx-column field="Low(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
76
+ <igx-column field="Start(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
77
77
  </igx-tree-grid>
78
- </div>
78
+ </div>
package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss CHANGED
@@ -205,12 +205,12 @@
205
205
  // Custom Dark Theme
206
206
 
207
207
  // Import the theme utilities first
208
- @include igx-core();
209
- @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
210
- @include igx-theme($default-palette);
208
+ @include core();
209
+ @include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
210
+ @include theme($default-palette);
211
211
 
212
212
 
213
- $green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
213
+ $green-palette: palette($primary: #09f,$secondary: #72da67, $surface: #333);
214
214
 
215
215
  :host {
216
216
  padding: 0 !important;
@@ -221,8 +221,8 @@ $green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
221
221
  @include scrollbar-love();
222
222
 
223
223
  .fin-dark-theme {
224
- @include igx-dark-theme($green-palette);
225
- @include scrollbar-love(igx-color($green-palette, 'surface'));
224
+ @include dark-theme($green-palette);
225
+ @include scrollbar-love(color($green-palette, 'surface'));
226
226
  background: #333;
227
227
 
228
228
  ::-moz-placeholder {
package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  @use '<%=igxPackage%>/theming' as *;
2
2
 
3
3
  @mixin scrollbar-love($scrollbar-color: null) {
4
- $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
5
- $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
4
+ $scrollbar-track: hexrgba(color($default-palette, 'grays', 200));
5
+ $scrollbar-thumb: hexrgba(color($default-palette, 'grays', 400));
6
6
 
7
7
  @if $scrollbar-color and luminance($scrollbar-color) < .5 {
8
8
  $scrollbar-track: darken($scrollbar-color, 8%);
package/igx-ts/grid/grid-custom/index.js CHANGED
@@ -67,8 +67,7 @@ class IgxCustomGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
67
67
  columnBoolFeatures.push(text);
68
68
  break;
69
69
  case "Column Moving":
70
- columnFeatures.push('[movable]="true"');
71
- columnBoolFeatures.push('[movable]="true"');
70
+ gridFeatures.push('[moving]="true"');
72
71
  break;
73
72
  case "Column Hiding":
74
73
  toolbarActions.push(" <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>");
package/igx-ts/hierarchical-grid/hierarchical-grid-custom/index.js CHANGED
@@ -93,7 +93,7 @@ class IgxHierarchicalGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIF
93
93
  columnBoolFeatures.push(text);
94
94
  break;
95
95
  case "Column Moving":
96
- columnFeatures.push('[movable]="true"');
96
+ gridFeatures.push('[moving]="true"');
97
97
  break;
98
98
  case "Column Hiding":
99
99
  toolbarActions.push(" <igx-grid-toolbar-hiding title='Column Hiding'></igx-grid-toolbar-hiding>");
package/igx-ts/projects/_base/files/package.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "@angular/platform-browser-dynamic": "~13.1.1",
20
20
  "@angular/router": "~13.1.1",
21
21
  "hammerjs": "^2.0.8",
22
- "igniteui-angular": "~13.0.0",
22
+ "igniteui-angular": "~13.1.0-beta.1",
23
23
  "core-js": "^3.6.5",
24
24
  "jszip": "^3.5.0",
25
25
  "minireset.css": "~0.0.4",
package/igx-ts/projects/_base/index.js CHANGED
@@ -38,13 +38,13 @@ class BaseIgxProject {
38
38
  $primary: #731963 !default;
39
39
  $secondary: #ce5712 !default;
40
40
 
41
- $app-palette: igx-palette($primary, $secondary);
41
+ $app-palette: palette($primary, $secondary);
42
42
 
43
43
  /* autoprefixer grid: on */
44
44
 
45
- @include igx-core();
46
- @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale);
47
- @include igx-theme($app-palette);
45
+ @include core();
46
+ @include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
47
+ @include theme($app-palette);
48
48
  `;
49
49
  this.DEFAULT_THEME = `,
50
50
  "node_modules/igniteui-angular/styles/igniteui-angular.css"`;
package/igx-ts/projects/empty/files/src/app/home/home.component.scss CHANGED
@@ -23,7 +23,7 @@
23
23
  }
24
24
 
25
25
  @include e(header) {
26
- color: igx-color($default-palette, "primary");
26
+ color: color($default-palette, "primary");
27
27
  }
28
28
 
29
29
  @include e(subject) {
package/igx-ts/projects/side-nav-auth/files/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "@angular/router": "~13.1.1",
21
21
  "angular-auth-oidc-client": "^9.0.3",
22
22
  "hammerjs": "^2.0.8",
23
- "igniteui-angular": "~13.0.0",
23
+ "igniteui-angular": "~13.1.0-beta.1",
24
24
  "core-js": "^3.6.5",
25
25
  "jszip": "^3.5.0",
26
26
  "minireset.css": "~0.0.4",
package/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.component.html CHANGED
@@ -23,6 +23,6 @@
23
23
  <div class="actions">
24
24
  <button igxButton (click)="onSubmit()">Submit</button>
25
25
  </div>
26
- <igx-toast #output [position]="outputPosition">Selected {{selected ? selected : "None"}} </igx-toast>
26
+ <igx-toast #output>Selected {{selected ? selected : "None"}} </igx-toast>
27
27
  </form>
28
28
  </div>
package/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.component.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Component, ViewChild } from '@angular/core';
2
- import { IgxSelectComponent, IgxToastComponent, IgxToastPosition } from '<%=igxPackage%>';
2
+ import { HorizontalAlignment, IgxSelectComponent, IgxToastComponent, PositionSettings, VerticalAlignment } from '<%=igxPackage%>';
3
3
 
4
4
  @Component({
5
5
  selector: 'app-<%=filePrefix%>',
@@ -15,9 +15,12 @@ export class <%=ClassName%>Component {
15
15
 
16
16
  public selected!: string;
17
17
  public fruits: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
18
- public outputPosition = IgxToastPosition.Middle;
18
+ private messagePositionSettings: PositionSettings = {
19
+ horizontalDirection: HorizontalAlignment.Center,
20
+ verticalDirection: VerticalAlignment.Middle
21
+ };
19
22
 
20
23
  public onSubmit() {
21
- this.output.open();
24
+ this.output.open(undefined, this.messagePositionSettings);
22
25
  }
23
26
  }
package/igx-ts/tree-grid/tree-grid-custom/index.js CHANGED
@@ -65,8 +65,7 @@ class IgxCustomTreeGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
65
65
  this.formatTreeGridFeatures(feature, columnFeatures, columnBoolFeatures);
66
66
  break;
67
67
  case "Column Moving":
68
- columnFeatures.push('[movable]="true"');
69
- columnBoolFeatures.push('[movable]="true"');
68
+ treeGridFeatures.push('[moving]="true"');
70
69
  break;
71
70
  case "Column Hiding":
72
71
  toolbarActions.push(" <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@igniteui/angular-templates",
3
- "version": "13.0.906",
3
+ "version": "13.1.910-beta.0",
4
4
  "description": "Templates for Ignite UI for Angular projects and components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -12,7 +12,7 @@
12
12
  "author": "Infragistics",
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@igniteui/cli-core": "~9.0.6",
15
+ "@igniteui/cli-core": "~9.1.0-beta.0",
16
16
  "typescript": "~4.4.4"
17
17
  }
18
18
  }