diff --git a/package-lock.json b/package-lock.json index 9e6b465d63..94eb98301f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "bootstrap": "5.3.2", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "^18.1.0", + "igniteui-angular": "^18.1.7", "igniteui-angular-charts": "^18.0.0", "igniteui-angular-core": "^18.0.0", "igniteui-angular-extras": "^18.0.5", @@ -12796,13 +12796,13 @@ ] }, "node_modules/igniteui-angular": { - "version": "18.1.0", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.1.0.tgz", - "integrity": "sha512-v4R2ymeOl8IOyTuH0tO/DVhbGBMk4muBgSbsIc4DTsMhqsyxdb6E5MZVij9f1Ul7wHqtUq0ataGQXnKH++dGyQ==", + "version": "18.1.8", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-18.1.8.tgz", + "integrity": "sha512-25OpjJ/Gejx44q5VcSFVU41DwIxHViEs8Y430T0l95rvQ+WwXDRPmPFMLBf0LkHT8gvMIR7NFMcdjAlwd8A1qA==", "dependencies": { "@igniteui/material-icons-extended": "^3.0.0", "fflate": "^0.8.1", - "igniteui-theming": "^10.0.0", + "igniteui-theming": "^11.0.0", "igniteui-trial-watermark": "^3.0.2", "lodash-es": "^4.17.21", "tslib": "^2.3.0", @@ -12892,9 +12892,9 @@ "integrity": "sha512-7zDG3xFPYqcjyOCdR9JuiDh+xX3pJEMqMP2qVV/3t1NjeojcZEWEaYW8OKzDzowEttPrj7UnjAqxXOIMbRTz6Q==" }, "node_modules/igniteui-theming": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz", - "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==", + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-11.0.0.tgz", + "integrity": "sha512-t2hRgFBcS4QQFzgPwp3V8d5CFgLFWN9GY0GqnoBdTmtHQEm+2hbzrxgA//akUkO7g5Z6WEp5Y4WWaRkPJVy1HQ==", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index 5ecf351fb9..20df3130c8 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "bootstrap": "5.3.2", "file-saver": "^2.0.2", "hammerjs": "^2.0.8", - "igniteui-angular": "^18.1.0", + "igniteui-angular": "^18.1.7", "igniteui-angular-charts": "^18.0.0", "igniteui-angular-core": "^18.0.0", "igniteui-angular-extras": "^18.0.5", diff --git a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html index d8a86df190..4be0691b9b 100644 --- a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html +++ b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.html @@ -7,7 +7,7 @@ - + diff --git a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.scss b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.scss index 2da1a50246..092589f5e2 100644 --- a/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.scss +++ b/src/app/grid/grid-external-excel-style-filtering/grid-external-excel-style-filtering.component.scss @@ -2,6 +2,7 @@ display: flex; flex-flow: row; margin: 15px; + column-gap: 5px; } .flex-column { @@ -12,4 +13,4 @@ .igSelect { margin-left: 1px; -} \ No newline at end of file +} diff --git a/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html index fe51e5f52e..b809929c83 100644 --- a/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html +++ b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html @@ -7,7 +7,7 @@ - + diff --git a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html index 2f9407fa14..937c1b5a3a 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.html @@ -7,7 +7,7 @@ - + diff --git a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.scss b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.scss index 7b222bad6e..b2518d9b44 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-external-excel-style-filtering/hierarchical-grid-external-excel-style-filtering.component.scss @@ -2,6 +2,7 @@ margin: 15px; display: flex; flex-flow: row; + column-gap: 5px; } .photo { @@ -21,4 +22,4 @@ .igSelect { margin-left: 1px; -} \ No newline at end of file +} diff --git a/src/app/lists/list/list-chat-sample/list-chat-sample.component.html b/src/app/lists/list/list-chat-sample/list-chat-sample.component.html index 68f14c7d78..a5dbf0c4f9 100644 --- a/src/app/lists/list/list-chat-sample/list-chat-sample.component.html +++ b/src/app/lists/list/list-chat-sample/list-chat-sample.component.html @@ -1,53 +1,99 @@ -
-
- - - -
- - - {{ contact.name }}, {{ message.timestamp | date: 'shortTime'}} + + + + +
+ +
+
{{ contact.name }}
+ + {{ message.timestamp | date: "shortTime" }} -
- - - - {{ message.message }} - - - - - - - {{ message.timestamp | date: 'shortTime'}} + + + + +
+ {{ message.message }} +
+ + + + +
+
You
+ + {{ message.timestamp | date: "shortTime" }} - - +
+ + +
{{ message.message }} - - +
+ + - - - + + - + + + +
+ +
+ + -
- - - - -
- -
+ +
+ diff --git a/src/app/lists/list/list-chat-sample/list-chat-sample.component.scss b/src/app/lists/list/list-chat-sample/list-chat-sample.component.scss index a0b9a9b34a..91d2220639 100644 --- a/src/app/lists/list/list-chat-sample/list-chat-sample.component.scss +++ b/src/app/lists/list/list-chat-sample/list-chat-sample.component.scss @@ -1,197 +1,121 @@ -.chat-sample-wrapper { - margin: 0 auto; - height: 100%; - padding-bottom: 50px; -} +@use "igniteui-angular/theming" as *; -.chat-sample__form { - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - position: relative; +igx-avatar { + --ig-size: var(--ig-size-small); } -igx-icon { - cursor: pointer; - user-select: none; -} +igx-list { + --ig-spacing-block-small: 0; + --ig-spacing-block-medium: 0; + --ig-spacing-block-large: 0; + --item-background: transparent; + --border-color: transparent; + --item-background-hover: transparent; + --item-background-active: transparent; -.igx-input-group--border .igx-input-group__bundle, -.igx-input-group--border .igx-input-group__bundle:hover, -.igx-input-group--border .igx-input-group__bundle:focus, -.igx-input-group--focused.igx-input-group--border .igx-input-group__bundle, -.igx-input-group--focused, -.igx-input-group__bundle:focus, -.igx-input-group__bundle, -.igx-input-group:focus -{ - box-shadow: none; - outline: none; + gap: rem(4px); } -.igx-input-group--border .igx-input-group__bundle { - padding: 4px 0; -} - -.igx-list { - position: relative; - display: flex; - flex-flow: column nowrap; - background-color: #fff; - height: 100%; - overflow: auto; - z-index: 0; - flex: 1 0 0%; - padding-bottom: 10px; +.sample-form { + overflow-y: scroll; + overflow-x: auto; + max-width: rem(400px); + height: rem(580px); + background: color(null, surface, 500); + box-shadow: var(--ig-elevation-12); + margin: rem(24px) auto; + border-radius: rem(4px); + + * { + overflow-anchor: none; + } } -.chat-massage-field { - display: flex; - align-items: center; - position: fixed; - left: 0; - right: 0; +.massage-field { + position: sticky; bottom: 0; - width: 100%; - padding: 0 8px; - height: 50px; - margin: 0 auto; - border-top: 1px solid #ddd; - background: #fff; + padding-block: rem(12px); + padding-inline: rem(16px); + background: color(null, surface, 500); } -.chat-sample-wrapper { - .input-round-box { - transform: translateY(0); - font-size: 14px; - } +.overflow-anchor { + height: 1px; + overflow-anchor: auto; +} - .igx-input-group__bundle-main { - padding: 0; - } +.contact { + margin-block: rem(24px) rem(8px); - .chat-input-group { - flex: 1 0 0%; - height: 40px; + &__panel { display: flex; align-items: center; + gap: rem(8px); } - .igx-input-group__wrapper { - flex: 1; + &__panel { + display: flex; + align-items: center; } - .igx-input-group--box .igx-input-group__bundle { - padding: 0 8px; + &:active { + background: transparent; } } +.message { + @include type-style("body-2"); - -.send-message-button { - margin-left: 8px; -} - -.igx-list__item-base:active, -.igx-list__item-base { - padding: 0; - min-height: 36px; - user-select: auto!important; -} - -.others-message, -.my-message { - .igx-list__item-content { - font-weight: 600; - min-height: 16px; - border-radius: 4px; - margin: 0 0 4px 16px; - padding: 4px 8px; - font-size: 12px; - font-weight: 300; + display: flex; + align-items: center; + min-height: rem(32px); + border-radius: rem(4px); + padding-inline: rem(16px); + + &__info { + h6 { + @include type-style("body-1"); + font-weight: 600; + margin: initial; + line-height: 1; + } + + span { + @include type-style("caption"); + } } } +.own-message { + margin-inline-start: auto; + background-color: color(null, gray, 200); + color: contrast-color(null, gray, 200); - -.igx-list__item-content { - padding: .5rem 0; -} - - -.others-message--first { - .igx-list__item-content { - border-top-left-radius: 0; - } -} - -.my-message--first { - .igx-list__item-content { + &--first { border-top-right-radius: 0; } -} - -.others-message:active, -.others-message { - .igx-list__item-content { - align-self: flex-start; - background-color: #09f; - color: white; - } -} - -.my-message:active, -.my-message { - .igx-list__item-content { - align-self: flex-end; - background-color: rgb(240, 240, 240); + + &.message__info { + background: transparent; + color: color(null, gray, 700); + text-align: end; } -} - -.my-message { - .igx-list__item-content { - margin-right: 16px; + + &:active { + background-color: inherit; } } - -.message__info { - margin-left: 10px; - font-weight: 400; -} - -.my-message__info { - margin-top: 20px; - font-weight: 400; - text-align: right; -} - -.contact:active { - background: transparent; -} - -.contact { - margin: 20px 16px 5px 16px; -} - -.contact__panel { - display: flex; - align-items: center; - padding: 0; -} -@media only screen and (min-width: 960px) { - .chat-sample-wrapper { - max-width: 400px; - max-height: 600px; - margin: 20px auto; - padding: 0; - border: 1px solid #ddd; - box-shadow: 0 0 10px #999; +.other-message { + background-color: color(null, primary, 800); + color: contrast-color(null, primary, 800); + + &--first { + border-top-left-radius: 0; } - .chat-massage-field { - max-width: 400px; - position: static; - padding-bottom: 0; + + &:active { + background-color: color(null, primary, 900); + color: contrast-color(null, primary, 900); } } diff --git a/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts b/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts index d6b33d98b9..11f6699a9c 100644 --- a/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts +++ b/src/app/lists/list/list-chat-sample/list-chat-sample.component.ts @@ -1,6 +1,11 @@ -import { DOCUMENT } from '@angular/common'; -import { Component, Inject, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; -// import { IgxListComponent } from 'igniteui-angular'; +import { + AfterViewInit, + Component, + ElementRef, + TemplateRef, + ViewChild, + ViewEncapsulation +} from '@angular/core'; import { ContactsService } from './services/contacts.service'; import { IMessage, MessagesService } from './services/messages.service'; @@ -10,21 +15,23 @@ import { IMessage, MessagesService } from './services/messages.service'; styleUrls: ['./list-chat-sample.component.scss'], templateUrl: './list-chat-sample.component.html' }) -export class ListChatSampleComponent { +export class ListChatSampleComponent implements AfterViewInit { + @ViewChild('form', { static: true }) + public form: ElementRef; + @ViewChild('myMessage', { static: true }) public myMessageTemplate: TemplateRef; + @ViewChild('othersMessage', { static: true }) public othersMessageTemplate: TemplateRef; public message: string; - - // @ViewChild('list') - // public listComponent: IgxListComponent; - private myId = 4; - constructor(public messagesService: MessagesService, public contactsService: ContactsService, - @Inject(DOCUMENT) private document: any) { } + constructor( + public messagesService: MessagesService, + public contactsService: ContactsService + ) { } public getMessageTemplate(message: IMessage): TemplateRef { if (message.authorId === this.myId) { @@ -63,8 +70,6 @@ export class ListChatSampleComponent { private sendMessage() { this.addMessage(this.message); this.message = null; - - this.scrollToBottom(); } private addMessage(message: string) { @@ -78,15 +83,12 @@ export class ListChatSampleComponent { } } + public ngAfterViewInit() { + this.scrollToBottom(); + } + private scrollToBottom(): void { - try { - const listElement = this.document.querySelector('igx-list'); - if (listElement) { - listElement.scrollTop = listElement.scrollHeight; - } - - // this.listComponent.element.nativeElement.scrollTop = - // this.listComponent.element.nativeElement.scrollHeight; - } catch (err) { } + const form = this.form.nativeElement; + form.scrollTop = form.scrollHeight; } } diff --git a/src/app/pagination/paginator/pagination-sample.component.ts b/src/app/pagination/paginator/pagination-sample.component.ts index dd61627555..e32a617a01 100644 --- a/src/app/pagination/paginator/pagination-sample.component.ts +++ b/src/app/pagination/paginator/pagination-sample.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { IgxPaginatorComponent } from 'igniteui-angular'; import { DATA } from '../../data/product'; @@ -7,17 +7,14 @@ import { DATA } from '../../data/product'; styleUrls: ['./pagination-sample.component.scss'], templateUrl: './pagination-sample.component.html' }) -export class PaginationSampleComponent { - +export class PaginationSampleComponent implements AfterViewInit { @ViewChild('paginator', { static: true }) public paginator!: IgxPaginatorComponent; public productData = DATA; public itemsPerPage = [3, 4, 5]; - constructor(public cdr: ChangeDetectorRef) { - } + constructor(public cdr: ChangeDetectorRef) { } - // eslint-disable-next-line @angular-eslint/use-lifecycle-interface - ngAfterViewInit() { + public ngAfterViewInit() { this.cdr.detectChanges(); } @@ -32,5 +29,4 @@ export class PaginationSampleComponent { public navigateToFirstPage() { this.paginator.page = 0; } - } diff --git a/src/app/pivot-grid/pivot-grids.module.ts b/src/app/pivot-grid/pivot-grids.module.ts index 2d05b340c1..04e4b2f02d 100644 --- a/src/app/pivot-grid/pivot-grids.module.ts +++ b/src/app/pivot-grid/pivot-grids.module.ts @@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { IgxCheckboxModule, IgxIconModule, IgxPivotGridModule, IgxSwitchModule } from 'igniteui-angular'; +import { IgxButtonModule, IgxCheckboxModule, IgxIconModule, IgxPivotGridModule, IgxSwitchModule } from 'igniteui-angular'; import { PivotExportComponent } from './pivot-export/pivot-export.component'; import { PivotFeaturesComponent } from './pivot-features/pivot-features.component'; import { PivotGridBasicSampleComponent } from './pivot-basic-sample/pivot-grid-basic-sample.component'; @@ -29,6 +29,7 @@ import { PivotGridLayoutComponent } from './pivot-layout/pivot-layout.component' ], imports: [CommonModule, FormsModule, PivotGridsRoutingModule, + IgxButtonModule, IgxPivotGridModule, IgxCheckboxModule, IgxSwitchModule, diff --git a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html index b70db5c872..3790283e7c 100644 --- a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html +++ b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.html @@ -7,7 +7,7 @@ - + diff --git a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.scss b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.scss index 58f59cc321..efcca72c85 100644 --- a/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.scss +++ b/src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component.scss @@ -4,6 +4,7 @@ height: 650px; margin: 15px; justify-content: center; + column-gap: 5px; } .flex-column { @@ -15,4 +16,4 @@ .igSelect { margin-left: 1px; -} \ No newline at end of file +} diff --git a/src/app/tree-grid/tree-grid-save-state/about.component.html b/src/app/tree-grid/tree-grid-save-state/about.component.html index d7090f6f5c..3087a184e4 100644 --- a/src/app/tree-grid/tree-grid-save-state/about.component.html +++ b/src/app/tree-grid/tree-grid-save-state/about.component.html @@ -3,5 +3,5 @@ Navigating to the previous page, components will reinitialize as per their initial configuration, therefore the igxTreeGrid will lose its state.
What our GridSaveStateComponent does is reading the state from the window.localStorage object and applying the corresponding state in the AfterViewInit lifecycle.
- Go Back + Go Back