-
@if (searchText.length === 0) {
- search
+ search
}
@if (searchText.length > 0) {
- clear
-
+ clear
}
-
+
@if (searchText.length > 0) {
-
+
@if (grid1.lastSearchInfo) {
-
-
- 
-
-
-
-
-
-
-
+
@if (grid1.lastSearchInfo.matchInfoCache.length > 0) {
-
+
{{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
grid1.lastSearchInfo.matchInfoCache.length }} results
}
@if (grid1.lastSearchInfo.matchInfoCache.length === 0) {
-
+
No results
}
}
-
-
diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
index 5141fd0d1..0adda7d04 100644
--- a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
+++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss
@@ -1,421 +1,51 @@
@use '../../variables' as *;
-@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css');
-@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css');
-@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css');
-:host ::ng-deep {
- $light-palette: palette(
- $primary: #09f,
- $secondary: #ffbf00,
- $surface: #fff
- );
-
- @include palette($light-palette);
-
- $checkbox-theme: checkbox-theme(
- $fill-color: color($color: 'secondary', $variant: 500),
- $tick-color: contrast-color($color: 'secondary', $variant: 500)
- );
-
- $summary-theme: grid-summary-theme(
- $background-color: #f0f8fe,
- $result-color: color($color: 'primary', $variant: 500)
- );
-
- $crm-grid-theme: grid-theme(
- $header-background: #f0f8fe,
- $header-border-color: #dde5eb
- );
-
- $crm-grid-toolbar: grid-toolbar-theme(
- $background: color($color: 'primary', $variant: 500),
- $title-text-color: contrast-color($color: 'primary', $variant: 500)
- );
-
- $crm-grid-toolbar-button: outlined-button-theme(
- $background: color($light-palette, 'primary', 800),
- $hover-background: color($light-palette, 'primary', 900),
- $active-foreground: contrast-color($light-palette, 'primary', 900),
- $focus-foreground: contrast-color($light-palette, 'primary', 900)
- );
-
- $crm-grid-search-button: flat-icon-button-theme(
- $background: transparent,
- $focus-background: color($light-palette, 'gray', 200),
- $hover-background: color($light-palette, 'gray', 200)
- );
-
- $crm-input-drop-down: input-group-theme(
- $placeholder-color: color($light-palette, 'gray', 500),
- $idle-text-color: color($light-palette, 'gray', 900),
- $size: sizable(rem(24px), rem(32px), rem(40px))
- );
-
- input-group[type="search"] {
- --ig-size: var(--ig-size-small);
+:host {
+ $crm-grid-theme: grid-theme(
+ $background: #1f2836,
+ $foreground: #f5f6e6,
+ $header-background: #2f3744,
+ $header-text-color: #f5f6e6,
+ $accent-color: #f5f6e6,
+ );
+
+ $crm-toolbar-theme: grid-toolbar-theme(
+ $background: #1f2836,
+ $accent-color: #f5f6e6
+ );
+
+
+ igx-grid {
+ @include tokens($crm-grid-theme);
+ }
+
+ igx-grid-toolbar {
+ @include tokens($crm-toolbar-theme);
+
+ igx-input-group[type="search"] {
+ --ig-size: var(--ig-size-small);
+ --search-resting-elevation: none;
+ --search-hover-elevation: none;
+ --search-disabled-elevation: none;
}
+ }
- .grid__wrapper {
- --ig-size: var(--ig-size-medium);
- width: inherit;
- position: relative;
- height: 100%;
- background: transparent;
- padding: 1rem;
- }
-
- .avatar-cell {
- --ig-size: var(--ig-size-small);
-
- width: 100%;
- display: flex;
- justify-content: center;
- }
-
- // grid caption styling
- .crm-toolbar-template {
- justify-content: space-between;
- display: flex;
- flex: 1 0 0%;
- align-items: center;
- padding-right: rem(24px);
- border-radius: 2px;
-
- & span {
- margin-right: auto;
- }
-
- .igx-button--flat {
- flex-wrap: nowrap;
- white-space: nowrap;
- }
-
- .igx-button--icon {
- border-radius: 0;
- }
-
- .logo-propeller {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 10px;
- }
- }
-
- .sample-flex-container {
- display: flex;
- align-self: center;
- justify-content: flex-end;
- max-width: 500px;
- width: 70%
- }
-
- @include tokens($crm-grid-toolbar, $mode: 'scoped');
-
- .igx-grid-toolbar__actions {
- .igx-button--outlined {
- border: none;
- }
- }
-
- .igx-grid-toolbar__title {
- max-width: 68ch;
- }
-
- .igx-grid-toolbar__custom-content {
- flex: 1 0 0%;
- }
-
- .igx-grid-toolbar__actions {
- .igx-button--outlined {
- margin-left: 0.5rem;
- }
- }
-
- .igx-grid-toolbar__actions {
- .igx-button--outlined {
- border: none;
- }
- }
-
- .igx-grid-toolbar__actions {
- @include tokens($crm-grid-toolbar-button);
- }
-
- .crm-sample-toolbar__title {
- margin-right: rem(16px);
- display: flex;
- align-items: center;
- justify-self: flex-start;
- width: 30%;
- }
-
- .crm-sample-toolbar__ellipsis {
- @include ellipsis();
- opacity: 0;
- animation: slide-fade 1.25s .25s ease-out forwards;
- }
-
- .igx-input-group--search {
- width: 100%;
- }
-
- .sample-flex-container {
- .igx-input-group,
- .igx-input-group--focused {
- font-size: 13px;
- overflow: hidden;
- }
-
- .igx-input-group__input {
- &::placeholder {
- opacity: 1;
- }
- }
- }
-
- .caseSensitiveButton {
- margin-left: 8px;
- }
-
- .igx-input-group--search .igx-input-group__bundle .igx-button--icon {
- border-radius: 0;
- }
-
- .caseSensitiveIcon {
- width: 1.25rem;
- height: 1.25rem;
- font-size: 1.25rem;
- }
-
- .searchButtons {
- margin-left: 4px;
- }
-
- .case-sensitive--active {
- background: color($color: 'primary', $variant: 200);
- }
-
- .igx-grid__th-resize-line {
- background: color($color: 'secondary', $variant: 500);
- }
-
- .igx-input-group--search .igx-input-group__bundle,
- .igx-input-group--search .igx-input-group__bundle:hover {
- box-shadow: none;
- }
+ .search-extras {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
- @include tokens($crm-input-drop-down, $mode: 'scoped');
-
- .sample-flex-container {
- .igx-input-group,
- .igx-input-group--focused {
- .igx-input-group__bundle {
- transition: all 250ms ease-in-out;
- }
-
- igx-icon {
- color: color($color: 'primary', $variant: 200);
- }
- }
-
- .igx-input-group__textarea,
- .igx-input-group__input {
- color: color($color: 'primary', $variant: 100);
- }
-
- .igx-input-group {
- igx-icon {
- color: contrast-color($color: 'gray', $variant: 900);
- }
-
- &:hover,
- &:focus,
- &.igx-input-group--focused {
- igx-icon {
- color: color($color: 'gray', $variant: 600);
- }
-
- .igx-input-group__bundle {
- background: contrast-color($color: 'gray', $variant: 900);
- color: color($color: 'gray', $variant: 600);
- }
-
- .igx-input-group__input {
- &::placeholder {
- color: color($color: 'gray', $variant: 600);
- opacity: 1;
- }
- }
-
- .igx-input-group__textarea,
- .igx-input-group__input {
- color: color($color: 'gray', $variant: 600);
- }
-
- .igx-button--icon {
- &:focus,
- &:active {
- color: color($color: 'gray', $variant: 600);
- }
- }
- }
- }
-
- .igx-button--icon {
- &:focus,
- &:active {
- color: color($color: 'primary', $variant: 100);
- background: transparent;
- }
- }
-
- .igx-input-group__input {
- &::placeholder {
- color: contrast-color($color: 'gray', $variant: 900);
- opacity: 1;
- }
- }
- }
-
- .igx-input-group--search .igx-input-group__bundle {
- background-color: color($color: 'primary', $variant: 800);
-
- @include tokens($crm-grid-search-button);
- }
-
- .grid__wrapper:not(.dark_grid) {
- @include tokens($crm-grid-theme);
- @include tokens($summary-theme);
- @include tokens($checkbox-theme);
- }
-
-
- // DARK THEME
- $dark-palette: palette(
- $primary: #09f,
- $secondary: #fff,
- $surface: #222,
- );
-
- $checkbox-dark-theme: checkbox-theme(
- $fill-color: color($color: 'gray', $variant: 900),
- $tick-color: contrast-color($color: 'gray', $variant: 900)
- );
-
- $crm-dark-grid-theme: grid-theme(
- $row-selected-background: color($color: 'gray', $variant: 100),
- $row-selected-text-color: contrast-color($color: 'gray', $variant: 100),
- $row-hover-background: color($color: 'gray', $variant: 200),
- $row-hover-text-color: contrast-color($color: 'gray', $variant: 200),
- $row-selected-hover-background: color($color: 'gray', $variant: 200),
- $row-selected-hover-text-color: contrast-color($color: 'gray', $variant: 200),
- $cell-selected-background: color($color: 'gray', $variant: 900),
- $cell-selected-text-color: contrast-color($color: 'gray', $variant: 900),
- $cell-active-border-color: color($color: 'gray', $variant: 900),
- );
-
- $crm-grid-dark-button: flat-button-theme(
- $foreground: color($color: 'primary', $variant: 500),
- $hover-foreground: color($color: 'primary', $variant: 500),
- $focus-foreground: color($color: 'primary', $variant: 500),
- );
-
- $crm-grid-dark-progress: progress-linear-theme(
- $track-color: color($color: 'gray', $variant: 500)
- );
-
- .dark_grid {
- @include palette($dark-palette);
- @include tokens($checkbox-dark-theme);
- @include tokens($crm-dark-grid-theme);
- @include tokens($crm-grid-dark-button);
- @include tokens($crm-grid-dark-progress);
-
- .igx-grid-toolbar__actions {
- @include tokens($crm-grid-toolbar-button);
- }
-
- .sample-flex-container {
- .igx-input-group,
- .igx-input-group--focused {
- igx-icon {
- color: color($color: 'primary', $variant: 200);
- }
- }
-
- .igx-input-group__textarea,
- .igx-input-group__input {
- color: color($color: 'primary', $variant: 100);
- }
-
- .igx-input-group {
- igx-icon {
- color: contrast-color($color: 'gray', $variant: 50);
- }
-
- &:hover,
- &:focus,
- &.igx-input-group--focused {
- igx-icon {
- color: color($color: 'gray', $variant: 400);
- }
-
- .igx-input-group__bundle {
- background: contrast-color($color: 'gray', $variant: 50);
- color: color($color: 'gray', $variant: 400);
- }
-
- .igx-input-group__input {
- &::placeholder {
- color: color($color: 'gray', $variant: 400);
- }
- }
-
- .igx-input-group__textarea,
- .igx-input-group__input {
- color: color($color: 'gray', $variant: 400);
- }
-
- .igx-button--icon {
- &:focus,
- &:active {
- color: color($color: 'gray', $variant: 400);
- }
- }
- }
- }
-
- .igx-input-group__input {
- &::placeholder {
- color: contrast-color($color: 'gray', $variant: 50);
- }
- }
- }
+ &__inner-container {
+ display: flex;
}
-}
-
-.animated-fan {
- animation: spin-fade 1.5s cubic-bezier(0.21, 1.07, 0.99, 1) forwards;
-}
+ }
-@keyframes spin-fade {
- 0% {
- opacity: 0;
- transform: rotate(0);
- }
- 100% {
- opacity: 1;
- transform: rotate(270deg);
- }
-}
+ .search-results {
+ color: rgb(from var(--ig-grid-foreground) r g b / 0.5);
+ font-size: .875rem;
+ }
-@keyframes slide-fade {
- 0% {
- transform: translateX(-5%);
- }
- 100% {
- opacity: 1;
- transform: translateX(0);
- }
+ .case-sensitive--inactive {
+ color: rgb(from var(--ig-grid-foreground) r g b / 0.7);
+ }
}
diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.ts b/projects/app-crm/src/app/grid-crm/grid-crm.component.ts
index 8978f4933..0b76333d4 100644
--- a/projects/app-crm/src/app/grid-crm/grid-crm.component.ts
+++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.ts
@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router';
import { CloseScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
import { CellType, GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxNumberSummaryOperand, IColumnExportingEventArgs, IgxCsvExporterService, IgxExcelExporterService } from 'igniteui-angular/grids/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
-import { IgxIconButtonDirective, IgxRippleDirective, IgxToggleDirective } from 'igniteui-angular/directives';
+import { IgxIconButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives';
import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxAvatarComponent } from 'igniteui-angular/avatar';
@@ -76,7 +76,7 @@ class SoonSummary extends IgxDateSummaryOperand {
styleUrls: ['./grid-crm.component.scss'],
templateUrl: './grid-crm.component.html',
changeDetection: ChangeDetectionStrategy.Eager,
- imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent]
+ imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent]
})
export class GridCRMComponent implements OnInit, AfterViewInit {
private csvExporter = inject(IgxCsvExporterService);