From 9544d25981f49b0bed5ed137f2cca8d10abbeaff Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Tue, 23 Jun 2026 19:02:46 +0300 Subject: [PATCH 1/9] fix(chip-variants): prevent layout jump on chip selection --- .../chip/chip-variants/chip-variants.component.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/data-display/chip/chip-variants/chip-variants.component.scss b/src/app/data-display/chip/chip-variants/chip-variants.component.scss index 3a4043d65..fce0b6a0d 100644 --- a/src/app/data-display/chip/chip-variants/chip-variants.component.scss +++ b/src/app/data-display/chip/chip-variants/chip-variants.component.scss @@ -1,8 +1,8 @@ -igx-chip { - margin-right: 5px; -} - .sample-container { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 5px; padding-top: 15px; padding-left: 10px; } From 08193c318faad35056005074188b2070f1ddd528 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Mon, 29 Jun 2026 14:48:52 +0300 Subject: [PATCH 2/9] fix(*): applying relevant migrations for 22 --- src/app/theming/styles/dark-theme.scss | 4 ++-- src/app/theming/styles/themes.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/theming/styles/dark-theme.scss b/src/app/theming/styles/dark-theme.scss index db22c73dd..0464750d5 100644 --- a/src/app/theming/styles/dark-theme.scss +++ b/src/app/theming/styles/dark-theme.scss @@ -57,8 +57,8 @@ $header-border-color: color($dark-theme-palette, "primary", 600) // Define dark theme for the paginator $dark-paginator-theme: paginator-theme( - $text-color: color($dark-theme-palette, "secondary", 700), - $background-color: color($dark-theme-palette, "primary", 500), + $foreground: color($dark-theme-palette, "secondary", 700), + $background: color($dark-theme-palette, "primary", 500), $border-color: color($dark-theme-palette, "secondary", 500) ); diff --git a/src/app/theming/styles/themes.scss b/src/app/theming/styles/themes.scss index 7c2f28d15..9ab35163a 100644 --- a/src/app/theming/styles/themes.scss +++ b/src/app/theming/styles/themes.scss @@ -203,14 +203,14 @@ $black-grid-theme: grid-theme( // Define light theme for the paginator $light-paginator-theme: paginator-theme( - $background-color:color($light-theme-palette, "primary", 100), + $background:color($light-theme-palette, "primary", 100), $border-color: color($light-theme-palette, "secondary", 500) ); // Define dark theme for the paginator $dark-paginator-theme: paginator-theme( - $text-color: color($dark-theme-palette, "secondary", 700), - $background-color:color($dark-theme-palette, "primary", 500), + $foreground: color($dark-theme-palette, "secondary", 700), + $background:color($dark-theme-palette, "primary", 500), $border-color: color($dark-theme-palette, "secondary", 500) ); From cafb88af944f96620948d1c6c5b9ce154bd0dd6b Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 1 Jul 2026 16:05:45 +0300 Subject: [PATCH 3/9] feat(pivot-grid): add styling sample --- .../configs/PivotGridConfigGenerator.ts | 6 +++ src/app/pivot-grid/pivot-grid-routes-data.ts | 1 + src/app/pivot-grid/pivot-grids.routes.ts | 8 +++- src/app/pivot-grid/pivot-styling/layout.scss | 4 ++ .../pivot-styling.component.html | 2 + .../pivot-styling.component.scss | 16 +++++++ .../pivot-styling/pivot-styling.component.ts | 45 +++++++++++++++++++ 7 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 src/app/pivot-grid/pivot-styling/layout.scss create mode 100644 src/app/pivot-grid/pivot-styling/pivot-styling.component.html create mode 100644 src/app/pivot-grid/pivot-styling/pivot-styling.component.scss create mode 100644 src/app/pivot-grid/pivot-styling/pivot-styling.component.ts diff --git a/live-editing/configs/PivotGridConfigGenerator.ts b/live-editing/configs/PivotGridConfigGenerator.ts index e2ed82c71..7f7fb25e2 100644 --- a/live-editing/configs/PivotGridConfigGenerator.ts +++ b/live-editing/configs/PivotGridConfigGenerator.ts @@ -82,6 +82,12 @@ export class PivotGridConfigGenerator implements IConfigGenerator { component: 'PivotGridLayoutComponent' })); + configs.push(new Config({ + additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/dataToAnalyze.ts'], + appConfig: BaseAppConfig, + component: 'PivotStylingComponent' + })); + return configs; } } diff --git a/src/app/pivot-grid/pivot-grid-routes-data.ts b/src/app/pivot-grid/pivot-grid-routes-data.ts index 51e0139d4..6065e0712 100644 --- a/src/app/pivot-grid/pivot-grid-routes-data.ts +++ b/src/app/pivot-grid/pivot-grid-routes-data.ts @@ -6,6 +6,7 @@ export const pivotGridsRoutesData = { 'pivot-grid-export': { displayName: 'Pivot Grid Export', parentName: 'Pivot Grid' }, 'pivot-grid-features': { displayName: 'Pivot Grid With Features', parentName: 'Pivot Grid' }, 'pivot-grid-state-persistence': { displayName: 'Pivot Grid With State Persistence', parentName: 'Pivot Grid' }, + 'pivot-grid-styling': { displayName: 'Pivot Grid Styling', parentName: 'Pivot Grid' }, 'pivot-grid-noop-persistence': { displayName: 'Pivot Noop Grid with State Persistence', parentName: 'Pivot Grid' }, 'pivot-grid-about': { displayName: 'Pivot Grid About', parentName: 'Pivot Grid' }, 'pivot-grid-layout': { displayName: 'Pivot Grid Layout', parentName: 'Pivot Grid' } diff --git a/src/app/pivot-grid/pivot-grids.routes.ts b/src/app/pivot-grid/pivot-grids.routes.ts index 13dfb2b0b..f40be47cc 100644 --- a/src/app/pivot-grid/pivot-grids.routes.ts +++ b/src/app/pivot-grid/pivot-grids.routes.ts @@ -10,6 +10,7 @@ import { pivotGridsRoutesData } from './pivot-grid-routes-data'; import { PivotGridAboutComponent } from './pivot-state-persistence/about.component'; import { PivotGridStatePersistenceSampleComponent } from './pivot-state-persistence/pivot-grid-state-persistence-sample.component'; import { PivotGridLayoutComponent } from './pivot-layout/pivot-layout.component' +import { PivotStylingComponent } from './pivot-styling/pivot-styling.component'; // tslint:enable:max-line-length export const PivotGridsRoutes: Routes = [ @@ -51,11 +52,16 @@ export const PivotGridsRoutes: Routes = [ { component: PivotGridAboutComponent, data: pivotGridsRoutesData['pivot-grid-about'], - path: 'pivot-state-about' + path: 'pivot-grid-about' }, { component: PivotGridLayoutComponent, data: pivotGridsRoutesData['pivot-grid-features'], path: 'pivot-grid-layout' + }, + { + component: PivotStylingComponent, + data: pivotGridsRoutesData['pivot-grid-styling'], + path: 'pivot-grid-styling' } ]; diff --git a/src/app/pivot-grid/pivot-styling/layout.scss b/src/app/pivot-grid/pivot-styling/layout.scss new file mode 100644 index 000000000..5ea6cde80 --- /dev/null +++ b/src/app/pivot-grid/pivot-styling/layout.scss @@ -0,0 +1,4 @@ +:host { + display: block; + padding: 8px; +} \ No newline at end of file diff --git a/src/app/pivot-grid/pivot-styling/pivot-styling.component.html b/src/app/pivot-grid/pivot-styling/pivot-styling.component.html new file mode 100644 index 000000000..08df70c02 --- /dev/null +++ b/src/app/pivot-grid/pivot-styling/pivot-styling.component.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/app/pivot-grid/pivot-styling/pivot-styling.component.scss b/src/app/pivot-grid/pivot-styling/pivot-styling.component.scss new file mode 100644 index 000000000..238acf973 --- /dev/null +++ b/src/app/pivot-grid/pivot-styling/pivot-styling.component.scss @@ -0,0 +1,16 @@ +@use "layout.scss"; +@use "igniteui-angular/theming" as *; + +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, +); + +igx-pivot-grid { + @include tokens($custom-grid); +} diff --git a/src/app/pivot-grid/pivot-styling/pivot-styling.component.ts b/src/app/pivot-grid/pivot-styling/pivot-styling.component.ts new file mode 100644 index 000000000..b85a70c4f --- /dev/null +++ b/src/app/pivot-grid/pivot-styling/pivot-styling.component.ts @@ -0,0 +1,45 @@ +import { Component, ChangeDetectionStrategy } from "@angular/core"; +import { DATA } from '../../data/pivot-data'; + +import { IPivotConfiguration, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core'; +import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; + +@Component({ + selector: 'app-pivot-styling', + styleUrls: ['./pivot-styling.component.scss'], + templateUrl: './pivot-styling.component.html', + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxPivotGridComponent] +}) + +export class PivotStylingComponent { + public data = DATA; + public pivotConfigHierarchy: IPivotConfiguration = { + columns: [ + { + memberName: 'Product', + memberFunction: (data) => data.Product.Name, + enabled: true + } + ], + rows: [ + { + memberName: 'Seller', + memberFunction: (data) => data.Seller.Name, + enabled: true + } + ], + values: [ + { + member: 'NumberOfUnits', + aggregate: { + aggregator: IgxPivotNumericAggregate.sum, + key: 'sum', + label: 'Sum' + }, + enabled: true + } + ], + filters: null + }; +} From daa56cb795ebf7e5489264bac622192b259b6071 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 7 Jul 2026 13:26:06 +0300 Subject: [PATCH 4/9] feat(bootstrap-sample): fix invisible content --- .../theming/bootstrap/bootstrap-sample.component.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/theming/bootstrap/bootstrap-sample.component.scss b/src/app/theming/bootstrap/bootstrap-sample.component.scss index a361dba19..93508a365 100644 --- a/src/app/theming/bootstrap/bootstrap-sample.component.scss +++ b/src/app/theming/bootstrap/bootstrap-sample.component.scss @@ -17,9 +17,8 @@ $custom-dark-palette: palette( $dark-primary: color($custom-dark-palette, "primary"); $dark-secondary: color($custom-dark-palette, "secondary"); -.d-flex.align-items-center { - width: 100%; - padding: 0 16px; +.d-flex { + align-items: center; } .card-wrapper { @@ -164,4 +163,8 @@ $dark-secondary: color($custom-dark-palette, "secondary"); ::ng-deep{ /* Importing Bootstrap .scss file. */ @import "bootstrap/scss/bootstrap"; + + .collapse { + visibility: visible; + } } From a42b15073221a40cadd7eb9d67869e47fe5f16d8 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 8 Jul 2026 17:58:30 +0300 Subject: [PATCH 5/9] feat(samples): add sample-size reporter for auto-fitting docs iframes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Demos on the docs site render inside cross-origin iframes. By default styles.scss pins html/body to height:100% + overflow:hidden, so an iframe can only ever echo its own height back — it can't grow to fit its content. This adds the demo-side half of a small postMessage handshake with the docs host (astro-components' sample-widget) so samples that opt into fitContent size themselves to their actual content. How it works: - the host posts { type: 'igd-sample-fit', width? } into the iframe on load; until that arrives the reporter stays completely dormant, so fixed-height demos and their percentage layouts are untouched - on enable, it injects a one-time stylesheet that releases the viewport pin (height:auto, overflow:visible) and reports content size back with { type: 'igd-sample-height', height, width? } immediately and on every resize (via ResizeObserver) - width is measured from the right-most element edge rather than the body box, mirroring the host's same-origin measurement, and is only computed when the host asks for it Notes: - no-ops outside an iframe (window.parent === window) and when there is no window (SSR/prerender) - replies target the host's captured origin instead of broadcasting to '*', and only ever emit layout dimensions - shared across all three Angular apps (src, app-crm, app-lob) via the "@shared/sample-size-reporter" tsconfig path alias so there is a single source of truth --- projects/app-crm/src/main.ts | 3 + .../src/app/index/docs-layout.component.scss | 7 +- projects/app-lob/src/main.ts | 3 + src/app/index/docs-layout.component.scss | 7 +- .../interactions/toggle/toggle-samples.scss | 11 +-- .../layouts/avatar/avatar-styling/layout.scss | 15 +--- src/main.ts | 3 + src/sample-size-reporter.ts | 79 +++++++++++++++++++ tsconfig.json | 3 + 9 files changed, 97 insertions(+), 34 deletions(-) create mode 100644 src/sample-size-reporter.ts diff --git a/projects/app-crm/src/main.ts b/projects/app-crm/src/main.ts index 17202407d..4d9f0027e 100644 --- a/projects/app-crm/src/main.ts +++ b/projects/app-crm/src/main.ts @@ -3,9 +3,12 @@ import { environment } from './environments/environment'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { AppConfig } from './app/app.config'; +import { initSampleSizeReporter } from '@shared/sample-size-reporter'; if (environment.production) { enableProdMode(); } +initSampleSizeReporter(); + bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch((err) => console.error(err)); diff --git a/projects/app-lob/src/app/index/docs-layout.component.scss b/projects/app-lob/src/app/index/docs-layout.component.scss index cf86a1df8..8b1378917 100644 --- a/projects/app-lob/src/app/index/docs-layout.component.scss +++ b/projects/app-lob/src/app/index/docs-layout.component.scss @@ -1,6 +1 @@ -::ng-deep { - .custom-body { - color: var(--ig-surface-500-contrast); - background: var(--ig-surface-500); - } -} + diff --git a/projects/app-lob/src/main.ts b/projects/app-lob/src/main.ts index 38bdcd8b5..2dfd3c689 100644 --- a/projects/app-lob/src/main.ts +++ b/projects/app-lob/src/main.ts @@ -6,11 +6,14 @@ import { environment } from './environments/environment'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { AppConfig } from './app/app.config'; +import { initSampleSizeReporter } from '@shared/sample-size-reporter'; if (environment.production) { enableProdMode(); } +initSampleSizeReporter(); + bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch(err => console.error(err)); defineCustomElements(window); diff --git a/src/app/index/docs-layout.component.scss b/src/app/index/docs-layout.component.scss index cf86a1df8..8b1378917 100644 --- a/src/app/index/docs-layout.component.scss +++ b/src/app/index/docs-layout.component.scss @@ -1,6 +1 @@ -::ng-deep { - .custom-body { - color: var(--ig-surface-500-contrast); - background: var(--ig-surface-500); - } -} + diff --git a/src/app/interactions/toggle/toggle-samples.scss b/src/app/interactions/toggle/toggle-samples.scss index 38afa5074..e7c518d3d 100644 --- a/src/app/interactions/toggle/toggle-samples.scss +++ b/src/app/interactions/toggle/toggle-samples.scss @@ -9,7 +9,7 @@ height: 260px; } -.toggle-section{ +.toggle-section { flex-flow: row wrap; display: flex; width: 100%; @@ -18,15 +18,6 @@ align-items: center; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - - .dark-theme & { - background-color: #111; - } - - .custom-body & { - color: var(--ig-surface-500-contrast); - background-color: var(--ig-surface-500); - } } img{ diff --git a/src/app/layouts/avatar/avatar-styling/layout.scss b/src/app/layouts/avatar/avatar-styling/layout.scss index 19e8de55d..d3a420849 100644 --- a/src/app/layouts/avatar/avatar-styling/layout.scss +++ b/src/app/layouts/avatar/avatar-styling/layout.scss @@ -1,13 +1,4 @@ -.avatars-wrapper { - display: flex; - flex-flow: row wrap; -} - -.avatar-sample { - display: flex; - flex: 1 0 30%; - width: 88px; - justify-content: center; - align-items: center; - margin: 15px 0; +:host { + display: inline-flex; + gap: 32px } diff --git a/src/main.ts b/src/main.ts index 67e1fd621..41e5965a4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,11 +4,14 @@ import { defineCustomElements } from 'igniteui-dockmanager/loader'; import { bootstrapApplication } from '@angular/platform-browser'; import { AppComponent } from './app/app.component'; import { AppConfig } from './app/app.config'; +import { initSampleSizeReporter } from '@shared/sample-size-reporter'; if (environment.production) { enableProdMode(); } +initSampleSizeReporter(); + bootstrapApplication(AppComponent, {...AppConfig, providers: [provideZoneChangeDetection(), ...AppConfig.providers]}).catch(err => console.log(err)); defineCustomElements(window); diff --git a/src/sample-size-reporter.ts b/src/sample-size-reporter.ts new file mode 100644 index 000000000..f9c666d28 --- /dev/null +++ b/src/sample-size-reporter.ts @@ -0,0 +1,79 @@ +/** + * Demo-side half of the docs contract + * (astro-components/src/scripts/sample-widget.ts). + * + * The docs host posts { type: 'igd-sample-fit', width?: boolean } into the + * iframe when it loads. In response we neutralize the viewport-bound sizing + * from styles.scss (html/body height: 100%, overflow: hidden — which would + * only echo the iframe's height back) and report the content's size with + * { type: 'igd-sample-height', height, width? } immediately and on every + * resize. Demos embedded at a fixed height never receive the enable message, + * so this stays dormant for them and their percentage layouts are untouched. + */ +const FIT_ENABLE = 'igd-sample-fit'; +const FIT_REPORT = 'igd-sample-height'; + +export function initSampleSizeReporter(): void { + if (typeof window === 'undefined' || window.parent === window) { + return; + } + + let reportWidth = false; + let observer: ResizeObserver | null = null; + let styled = false; + // Captured from the host's enable message so replies go back to that exact + // origin instead of being broadcast to any window that happens to listen. + let hostOrigin = '*'; + + // Right-most element edge, mirroring the host's same-origin measurement: + // block-level content stretches to the viewport width, so the intrinsic + // width has to come from the element boxes, not the body itself. + const measureWidth = (): number | undefined => { + const body = document.body; + const left = body.getBoundingClientRect().left; + let right = left; + body.querySelectorAll('*').forEach(el => { + right = Math.max(right, el.getBoundingClientRect().right); + }); + if (right <= left) { + return undefined; + } + const cs = getComputedStyle(body); + return right - left + parseFloat(cs.paddingRight || '0') + parseFloat(cs.borderRightWidth || '0'); + }; + + const report = () => { + const height = Math.max( + document.documentElement.offsetHeight, + document.body.offsetHeight, + document.body.scrollHeight, + ); + window.parent.postMessage( + { type: FIT_REPORT, height, width: reportWidth ? measureWidth() : undefined }, + hostOrigin, + ); + }; + + window.addEventListener('message', (e: MessageEvent) => { + if (!e.data || e.data.type !== FIT_ENABLE) { + return; + } + reportWidth = Boolean(e.data.width); + hostOrigin = e.origin || '*'; + + if (!styled) { + styled = true; + const style = document.createElement('style'); + style.textContent = + 'html, body { height: auto !important; overflow: visible !important; }' + + '.sample-wrapper { height: auto !important; }'; + document.head.appendChild(style); + } + + report(); + if ('ResizeObserver' in window && !observer) { + observer = new ResizeObserver(report); + observer.observe(document.body); + } + }); +} diff --git a/tsconfig.json b/tsconfig.json index a9f83e075..a57650286 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,9 @@ { "compileOnSave": false, "compilerOptions": { + "paths": { + "@shared/sample-size-reporter": ["./src/sample-size-reporter.ts"] + }, "importHelpers": true, "module": "ES2022", "outDir": "./dist/out-tsc", From a6a98b90e1db9a86850206ab9d14dcf20d15896d Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 8 Jul 2026 17:58:51 +0300 Subject: [PATCH 6/9] refactor(avatar): simplify avatar samples and styles --- .../avatar-css-variables.component.scss | 4 ---- .../avatar-sample-1.component.scss | 5 ----- .../avatar-sample-2.component.html | 2 +- .../avatar-sample-2.component.scss | 4 ---- .../avatar-sample-3.component.html | 14 +++--------- .../avatar-sample-3.component.scss | 22 ++----------------- .../avatar-sample-3.component.ts | 2 -- .../avatar-sample-4.component.scss | 4 ---- .../avatar-styling.component.html | 12 +++++----- .../avatar-styling.component.scss | 18 +++++++-------- .../avatar-tailwind-styling.component.scss | 3 --- 11 files changed, 21 insertions(+), 69 deletions(-) diff --git a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss index 030f54646..0191a88a9 100644 --- a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss +++ b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss @@ -13,7 +13,3 @@ ); } } - -igx-avatar { - margin: 8px; -} diff --git a/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss b/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss index d427839f1..e69de29bb 100644 --- a/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss +++ b/src/app/layouts/avatar/avatar-sample-1/avatar-sample-1.component.scss @@ -1,5 +0,0 @@ -.igx-avatar{ - --ig-avatar-background: #e41c77; - color: black; - margin: 15px; -} diff --git a/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html b/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html index 9bd64e707..f7028e09b 100644 --- a/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html +++ b/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.html @@ -1 +1 @@ - + diff --git a/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.scss b/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.scss index d60ae914a..e69de29bb 100644 --- a/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.scss +++ b/src/app/layouts/avatar/avatar-sample-2/avatar-sample-2.component.scss @@ -1,4 +0,0 @@ -.igx-avatar{ - margin: 5px 15px; -} - diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html index a180fe2b6..d5b250e6a 100644 --- a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html +++ b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.html @@ -1,11 +1,3 @@ -
-
- -
-
- -
-
- -
-
+ + + diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss index 4d7beea4c..5500e73dc 100644 --- a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss +++ b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.scss @@ -1,22 +1,4 @@ -.avatars-wrapper { +:host { display: flex; - flex-flow: row wrap; -} - -.avatar-sample { - display: flex; - flex: 1 0 30%; - width: 88px; - height: 88px; - justify-content: center; - align-items: center; - margin: 15px 0; -} - -.avatar-sample.initials .igx-avatar{ - --ig-avatar-background: #e41c77; -} - -.avatar-sample.icon .igx-avatar{ - --ig-avatar-background: #9e9e9e; + gap: 32px; } diff --git a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.ts b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.ts index cd6d9d61b..d85593801 100644 --- a/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.ts +++ b/src/app/layouts/avatar/avatar-sample-3/avatar-sample-3.component.ts @@ -9,7 +9,5 @@ import { IgxAvatarComponent } from 'igniteui-angular/avatar'; imports: [IgxAvatarComponent] }) export class AvatarSample3Component { - constructor() { } - } diff --git a/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss b/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss index ecedb1392..e69de29bb 100644 --- a/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss +++ b/src/app/layouts/avatar/avatar-sample-4/avatar-sample-4.component.scss @@ -1,4 +0,0 @@ -.igx-avatar{ - --ig-avatar-background: #9e9e9e; - margin: 15px; -} diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html index 3f167defa..d6baff653 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html @@ -1,8 +1,8 @@ -
-
+
-
-
+
+ +
-
-
+ + diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss index bfc2650f8..75799af41 100644 --- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss +++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss @@ -1,19 +1,19 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'layout.scss'; +@use 'igniteui-angular/theming' as *; $initials-avatar-theme: avatar-theme( - $background: #72da67, - $border-radius: 16px + $background: #72da67, + $border-radius: 16px ); $icon-avatar-theme: avatar-theme( - $background: #217346, + $background: #217346, ); -.initials{ - @include tokens($initials-avatar-theme); +.initials { + @include tokens($initials-avatar-theme); } -.icon{ - @include tokens($icon-avatar-theme); +.icon { + @include tokens($icon-avatar-theme); } diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss index 8abca650c..e69de29bb 100644 --- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss +++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss @@ -1,3 +0,0 @@ -igx-avatar { - margin: 12px; -} From 83f435d1b7a773d8dfd584a8908479e16899eb81 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 9 Jul 2026 10:43:09 +0300 Subject: [PATCH 7/9] refactor(calendar): remove card wrappers and simplify calendar samples --- .../calendar-days-view.component.html | 11 +- .../calendar-days-view.component.scss | 10 +- .../calendar-months-view.component.html | 9 +- .../calendar-months-view.component.scss | 10 +- .../calendar-rtl-sample.component.html | 19 ++- .../calendar-rtl-sample.component.scss | 30 +--- .../calendar-sample-1.component.html | 4 +- .../calendar-sample-1.component.scss | 14 +- .../calendar-sample-2.component.html | 24 ++- .../calendar-sample-2.component.scss | 22 +-- .../calendar-sample-3.component.html | 33 ++-- .../calendar-sample-3.component.scss | 141 ++++++++++++------ .../calendar-sample-3.component.ts | 47 +++--- .../calendar-sample-4.component.html | 6 +- .../calendar-sample-4.component.scss | 18 +-- .../calendar-sample-5.component.scss | 18 +-- .../calendar-sample-6.component.html | 14 +- .../calendar-sample-6.component.scss | 27 +--- .../calendar-sample-6.component.ts | 15 +- .../calendar-sample-7.component.html | 7 +- .../calendar-sample-7.component.scss | 21 +-- .../calendar-sample-8.component.html | 4 +- .../calendar-sample-8.component.scss | 14 +- .../calendar-sample-9.component.html | 67 +++++---- .../calendar-sample-9.component.scss | 51 ++----- .../calendar-styling-sample.component.html | 10 +- .../calendar-styling-sample/layout.scss | 20 +-- .../calendar-years-view.component.html | 9 +- .../calendar-years-view.component.scss | 12 +- .../multiview/multiview.component.html | 44 ++++-- .../multiview/multiview.component.scss | 61 ++++---- .../calendar/multiview/multiview.component.ts | 6 +- 32 files changed, 357 insertions(+), 441 deletions(-) diff --git a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.html b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.html index 93617457d..a93683c95 100644 --- a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.html +++ b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.html @@ -1,8 +1,3 @@ - - -
Days View
- - - - - + + + diff --git a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss index 8c81ff5d7..c06f26ccd 100644 --- a/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss +++ b/src/app/scheduling/calendar/calendar-days-view/calendar-days-view.component.scss @@ -1,9 +1,3 @@ -.igx-card { - max-width: 500px; - min-width: 200px; - margin: 8px; -} - -.igx-calendar { - --ig-size: 2; +igx-days-view { + border: 1px solid var(--ig-gray-300); } diff --git a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.html b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.html index 8c6c69a7a..192537f56 100644 --- a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.html +++ b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.html @@ -1,8 +1 @@ - - -
Months View
- - - - - + diff --git a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss index 8c81ff5d7..e8a5b5071 100644 --- a/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss +++ b/src/app/scheduling/calendar/calendar-months-view/calendar-months-view.component.scss @@ -1,9 +1,3 @@ -.igx-card { - max-width: 500px; - min-width: 200px; - margin: 8px; -} - -.igx-calendar { - --ig-size: 2; +igx-months-view { + border: 1px solid var(--ig-gray-300); } diff --git a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.html b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.html index bef716120..17bebf5d9 100644 --- a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.html +++ b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.html @@ -1,10 +1,9 @@ -
-
- -
-
-
- -
-
-
\ No newline at end of file +
+ +
+ +
+
+ +
+
diff --git a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss index e3c918a8e..8a29ca010 100644 --- a/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss +++ b/src/app/scheduling/calendar/calendar-rtl-sample/calendar-rtl-sample.component.scss @@ -1,31 +1,3 @@ -@use '../../../../variables' as *; - -$border-color: color($color: gray, $variant: 300); - igx-calendar { - --ig-size: 2; - - border: 1px solid $border-color; - border-radius: 6px; -} - -.button-sample { - display: flex; - flex-flow: row wrap; - justify-content: center; - align-items: center; - flex: 1 0 30%; - margin: 16px 0; -} - -.calendar-wrapper { - max-width: 650px; - min-width: 300px; - margin: 8px; -} - -.location-wrapper { - min-width: 200px; - max-width: 640px; - margin-bottom: 32px; + border: 1px solid var(--ig-gray-100); } diff --git a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.html b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.html index 0ebded3eb..a6f57db34 100644 --- a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.html +++ b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.html @@ -1,3 +1 @@ -
- -
+ diff --git a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss index 47698f70a..8a29ca010 100644 --- a/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-1/calendar-sample-1.component.scss @@ -1,13 +1,3 @@ -.calendar-wrapper { - max-width: 400px; - min-width: 200px; - margin: 8px; +igx-calendar { + border: 1px solid var(--ig-gray-100); } - -.igx-calendar { - --ig-size: 2; - - box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), - 0 1px 1px 0 rgba(0,0,0,.12), - 0 2px 1px -1px rgba(0,0,0,.08); - } diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html index 7f8ac5a55..be858d71b 100644 --- a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html +++ b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.html @@ -1,20 +1,18 @@ -
- - Location: + + Location: + @for (locale of locales; track locale) { - - {{ locale }} - + + {{ locale }} + } - -
-
- + + - -
+> + diff --git a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss index c2f4b9dcf..791988fa4 100644 --- a/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-2/calendar-sample-2.component.scss @@ -1,19 +1,9 @@ -@use '../../../../variables' as *; - -.calendar-wrapper { - max-width: 650px; - min-width: 300px; - margin: 8px; - border: 1px solid color($color: 'gray', $variant: 300); - border-radius: 6px; -} - -.igx-calendar { - --ig-size: 2; +:host { + display: flex; + flex-direction: column; + gap:16px; } -.location-wrapper { - min-width: 200px; - max-width: 640px; - margin-bottom: 32px; +igx-calendar { + border: 1px solid var(--ig-gray-100); } diff --git a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html index 59b43ffde..600a6aec2 100644 --- a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html +++ b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.html @@ -1,15 +1,24 @@ -
-
- -
-
-
-
-
-
- {{loggerHeader}} -
-
+

Interact with the calendar to see the events logged here in sequence:

+ +
+ + +
+
+ Event log +
+ +
    + @for (event of events; track event.id) { +
  • + {{ event.type }} + {{ event.message }} + +
    • + } @empty { +
  • No events yet — select dates or navigate the calendar.
    • + } +
diff --git a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss index 26f9f607c..df3db2e11 100644 --- a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.scss @@ -1,46 +1,95 @@ -.igx-calendar { - --ig-size: 2; - - box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), - 0 1px 1px 0 rgba(0,0,0,.12), - 0 2px 1px -1px rgba(0,0,0,.08); - } - - :host { - display: flex; - width: 100%; - gap: 16px; - flex-flow: row wrap; - } - - button { - margin: 8px 0; - } - - .calendar-wrapper { - width: 300px; - margin: 8px; - } - - .calendar-section { - height: 336px; - } - - .selected-data-area { - overflow-y: auto; - max-height: 500px; - width: 100%; - height: 100%; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); - margin-top: 8px; - } - - .logContainer { - padding: 0.2rem 0.4rem; - } - - .highlight { - background-color: rgba(0,153,255, 0.1); - margin-bottom: 0.4rem; - } - +:host { + p { + margin-block-start: 0; + } +} + +.calendar-sample { + display: flex; + gap: 16px +} + +igx-calendar { + border: 1px solid var(--ig-gray-300); +} + +.event-log { + display: flex; + flex-direction: column; + min-width: 300px; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; + overflow: hidden; +} + +.event-log__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px 8px 4px 12px; + background: var(--ig-gray-100); + border-bottom: 1px solid var(--ig-gray-300); +} + +.event-log__title { + font-weight: 600; +} + +.event-log__list { + list-style: none; + margin: 0; + padding: 0; + max-height: 320px; + overflow-y: auto; +} + +.event-log__item { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border-bottom: 1px solid var(--ig-gray-200); + border-inline-start: 3px solid var(--ig-gray-400); + font-size: 0.875rem; +} + +.event-log__item--selected { + border-inline-start-color: var(--ig-success-500); +} + +.event-log__item--viewDateChanged { + border-inline-start-color: var(--ig-info-500); +} + +.event-log__item--activeViewChanged { + border-inline-start-color: var(--ig-warn-500); +} + +.event-log__badge { + flex: 0 0 auto; + padding: 2px 8px; + border-radius: 999px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); + font-size: 0.75rem; + font-weight: 600; + white-space: nowrap; +} + +.event-log__message { + flex: 1 1 auto; + min-width: 0; +} + +.event-log__time { + flex: 0 0 auto; + color: var(--ig-gray-600); + font-variant-numeric: tabular-nums; + font-size: 0.75rem; +} + +.event-log__empty { + padding: 16px 12px; + color: var(--ig-gray-600); + text-align: center; +} diff --git a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.ts b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.ts index 1973e8bfa..1aeca91e7 100644 --- a/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.ts +++ b/src/app/scheduling/calendar/calendar-sample-3/calendar-sample-3.component.ts @@ -1,38 +1,51 @@ - -import { Component, ViewChild, DOCUMENT, inject, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { IViewDateChangeEventArgs, IgxCalendarComponent, IgxCalendarView } from 'igniteui-angular/calendar'; -import { IgxDialogComponent } from 'igniteui-angular/dialog'; +import { IgxButtonDirective } from 'igniteui-angular/directives'; +import { DatePipe } from '@angular/common'; + +type CalendarEventType = 'selected' | 'viewDateChanged' | 'activeViewChanged'; + +interface CalendarEventLog { + id: number; + type: CalendarEventType; + message: string; + time: Date; +} @Component({ selector: 'app-calendar', styleUrls: ['./calendar-sample-3.component.scss'], templateUrl: './calendar-sample-3.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCalendarComponent] + imports: [IgxCalendarComponent, IgxButtonDirective, DatePipe] }) export class CalendarSample3Component { - private document = inject(DOCUMENT); - @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; - @ViewChild('alert', { static: true }) public dialog: IgxDialogComponent; - public loggerHeader = `Interact with the calendar to see the events logged here in sequence:`; + + public events: CalendarEventLog[] = []; + + private nextId = 0; public onSelection(dates: Date | Date[]) { - const logger: HTMLElement = this.document.querySelector('.logger'); - dates = dates as Date[]; - logger.innerHTML = ` => 'onSelectionChanged': ${dates.length} dates selected.
${logger.innerHTML}`; + const selected = dates as Date[]; + const count = selected.length; + this.log('selected', `${count} date${count === 1 ? '' : 's'} selected`); } public viewDateChanged(event: IViewDateChangeEventArgs) { - const logger: HTMLElement = this.document.querySelector('.logger'); - // eslint-disable-next-line max-len - const eventArgs = `event.previousValue: ${this.parseDate(event.previousValue)} | event.currentValue: ${this.parseDate(event.currentValue)}`; - logger.innerHTML = ` => 'viewDateChanged': ${eventArgs}
${logger.innerHTML}`; + this.log('viewDateChanged', `${this.parseDate(event.previousValue)} → ${this.parseDate(event.currentValue)}`); } public activeViewChanged(event: IgxCalendarView) { - const logger: HTMLElement = this.document.querySelector('.logger'); - logger.innerHTML = ` => 'activeViewChanged':. Active view is: ${IgxCalendarView[event]}
${logger.innerHTML}`; + this.log('activeViewChanged', `Active view is: ${IgxCalendarView[event]}`); + } + + public clearLog() { + this.events = []; + } + + private log(type: CalendarEventType, message: string) { + this.events = [{ id: this.nextId++, type, message, time: new Date() }, ...this.events]; } private parseDate(date: Date) { diff --git a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html index c1f3c35e1..d3d7ea648 100644 --- a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html +++ b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.html @@ -1,6 +1,4 @@ -
-
- + @if (formatParts) { {{ parts.month.combined | titlecase }} {{ parts.day.combined }} {{ parts.weekday.combined }} @@ -25,5 +23,3 @@ -
-
diff --git a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss index 462c462c2..8a29ca010 100644 --- a/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-4/calendar-sample-4.component.scss @@ -1,17 +1,3 @@ -@use '../../../../variables' as *; - -$border-color: color($color: gray, $variant: 300); - -.calendar-wrapper { - max-width: 500px; - min-width: 300px; - border: 1px solid $border-color; - border-radius: 6px; - margin: 8px; -} - -.igx-calendar { - --ig-size: 2; - - border-radius: 4px; +igx-calendar { + border: 1px solid var(--ig-gray-100); } diff --git a/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss b/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss index ff03d1741..8a29ca010 100644 --- a/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-5/calendar-sample-5.component.scss @@ -1,17 +1,3 @@ -@use '../../../../variables' as *; - -$border-color: color($color: gray, $variant: 300); - -.calendar-wrapper { - max-width: 500px; - min-width: 200px; - border: 1px solid $border-color; - border-radius: 6px; - margin: 8px; -} - -.igx-calendar { - --ig-size: 2; - - border-radius: 4px; +igx-calendar { + border: 1px solid var(--ig-gray-100); } diff --git a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.html b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.html index 9230c39e2..f90c9d670 100644 --- a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.html +++ b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.html @@ -1,7 +1,7 @@ -
-
- Disabled dates range from {{ range[0] | date }} to {{ range[1] | date }} -
- - -
+
+ Disabled dates range from: + + {{ range[0] | date }} to {{ range[1] | date }} + +
+ diff --git a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss index c5e94e15a..fa7be08ce 100644 --- a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.scss @@ -1,29 +1,10 @@ -.calendar-wrapper { - max-width: 700px; - min-width: 200px; - margin: 8px; - box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), - 0 1px 1px 0 rgba(0,0,0,.12), - 0 2px 1px -1px rgba(0,0,0,.08); -} - -.igx-calendar { - --ig-size: 2; +igx-calendar { + border: 1px solid var(--ig-gray-300); } .info { display: flex; - justify-content: center; - background: var(--ig-surface-500); -} - -.info > span { - color: var(--ig-secondary-400); - font-weight: 600; - font-size: 0.875rem; - letter-spacing: 0.046875rem; - text-transform: uppercase; - line-height: 1rem; - margin: 16px; + flex-direction: column; + margin-bottom: 16px; } diff --git a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.ts b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.ts index de923c2e6..2fd41f523 100644 --- a/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.ts +++ b/src/app/scheduling/calendar/calendar-sample-6/calendar-sample-6.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core'; -import { DateRangeType } from 'igniteui-angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { DateRangeDescriptor, DateRangeType } from 'igniteui-angular/core'; import { IgxCalendarComponent } from 'igniteui-angular/calendar'; import { DatePipe } from '@angular/common'; @@ -10,15 +10,16 @@ import { DatePipe } from '@angular/common'; changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxCalendarComponent, DatePipe] }) -export class CalendarSample6Component implements OnInit{ - @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent; + +export class CalendarSample6Component { public today = new Date(Date.now()); + public range = [ new Date(this.today.getFullYear(), this.today.getMonth(), 3), new Date(this.today.getFullYear(), this.today.getMonth(), 8) ]; - public ngOnInit() { - this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: this.range }]; - } + public disabledDates: DateRangeDescriptor[] = [ + { type: DateRangeType.Between, dateRange: this.range } + ]; } diff --git a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.html b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.html index c0c463605..9f34a0cf0 100644 --- a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.html +++ b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.html @@ -1,7 +1,8 @@ -
+
- -
+ + + diff --git a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss index 49eeea085..274aefa3f 100644 --- a/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-7/calendar-sample-7.component.scss @@ -1,18 +1,9 @@ -.calendar-wrapper { - --ig-size: 2; - - max-width: 700px; - min-width: 200px; - margin: 8px; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), - 0 1px 1px 0 rgba(0, 0, 0, 0.12), - 0 2px 1px -1px rgba(0, 0, 0, 0.08); -} - -.igx-calendar { - border-radius: 0; +igx-calendar { + border: 1px solid var(--ig-gray-300); } -.igx-button--contained { - border-radius: 0; +.calendar-wrapper { + display: flex; + flex-direction: column; + gap: 32px; } diff --git a/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.html b/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.html index f507668e2..47ace0c93 100644 --- a/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.html +++ b/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.html @@ -1,3 +1 @@ -
- -
+ diff --git a/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss b/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss index 708dac2e1..8a29ca010 100644 --- a/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-8/calendar-sample-8.component.scss @@ -1,13 +1,3 @@ -.calendar-wrapper { - --ig-size: 2; - - max-width: 400px; - min-width: 200px; - margin: 8px; -} - -.igx-calendar{ - box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), - 0 1px 1px 0 rgba(0,0,0,.12), - 0 2px 1px -1px rgba(0,0,0,.08); +igx-calendar { + border: 1px solid var(--ig-gray-100); } diff --git a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html index 523520c4d..80326ee22 100644 --- a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html +++ b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.html @@ -1,33 +1,38 @@ -
-
- -
+
+
+ Header orientation + + @for (ho of orientations; track ho) { + + } + +
-
- Header orientation - - @for (ho of orientations; track ho) { - - } - - - View orientation - - @for (vo of orientations; track vo) { - - } - -
+
+ View orientation + + @for (vo of orientations; track vo) { + + } + +
+ + + diff --git a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.scss b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.scss index a36be7810..0594248ff 100644 --- a/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.scss +++ b/src/app/scheduling/calendar/calendar-sample-9/calendar-sample-9.component.scss @@ -1,51 +1,28 @@ -$padding: 2rem; - :host { - display: flex; - flex-direction: column; - height: calc(100vh - 90px); - overflow: hidden; -} + overflow-y: auto; -small { - &:not(:first-child) { - margin-block-start: 1rem; + igx-calendar { + overflow: auto; + border: 1px solid var(--ig-gray-300); } } -.calendar-wrapper { - flex-basis: 100px; +:host, +.settings__item { display: flex; flex-direction: column; - flex-grow: 1; - margin: 20px; } -.igx-calendar{ - box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), - 0 1px 1px 0 rgba(0,0,0,.12), - 0 2px 1px -1px rgba(0,0,0,.08); +:host { + gap: 32px; } -.preview { +.settings { display: flex; - overflow: hidden; - height: 100%; - - &__sample { - display: flex; - flex-wrap: wrap; - overflow: auto; - flex: 1; - } + flex-wrap: wrap; + gap: 16px; +} - &__settings { - display: flex; - flex-direction: column; - gap: 8px; - background: hsla(var(--ig-gray-50)); - border-left: 1px solid var(--ig-gray-300); - padding: $padding; - overflow-x: auto; - } +.settings__item { + gap: 8px; } diff --git a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html index afc5c45d1..57544203c 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html +++ b/src/app/scheduling/calendar/calendar-styling-sample/calendar-styling-sample.component.html @@ -1,4 +1,6 @@ -
- -
\ No newline at end of file + diff --git a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss index bd4d37889..4ea2d6de0 100644 --- a/src/app/scheduling/calendar/calendar-styling-sample/layout.scss +++ b/src/app/scheduling/calendar/calendar-styling-sample/layout.scss @@ -1,8 +1,9 @@ @use "igniteui-angular/theming" as *; :host { - ::ng-deep { + padding: 1rem; + ::ng-deep { // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the UI5 sample. @@ -111,12 +112,12 @@ } } -.calendar-wrapper { - max-width: rem(600px); - margin: rem(8px); -} - igx-calendar { + --ig-font-family: Arial, sans-serif; + --ig-subtitle-1-font-weight: 600; + --ig-size: 1; + --ig-radius-factor: 0.4; + --current-border: #A100C2; --primary: #0064D9; --background: #EAECEE; @@ -126,10 +127,5 @@ igx-calendar { width: rem(290px); min-height: rem(282px); box-sizing: border-box; - padding-top: rem(6px); box-shadow: elevation(4); - --ig-font-family: Arial, sans-serif; - --ig-subtitle-1-font-weight: 600; - --ig-size: 1; - --ig-radius-factor: 0.4; -} \ No newline at end of file +} diff --git a/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.html b/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.html index 8cd739024..4a3081fa9 100644 --- a/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.html +++ b/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.html @@ -1,8 +1 @@ - - -
Years View
- - - - - + diff --git a/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss b/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss index afaa03b2d..634b53767 100644 --- a/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss +++ b/src/app/scheduling/calendar/calendar-years-view/calendar-years-view.component.scss @@ -1,11 +1,3 @@ -.igx-card { - max-width: 500px; - min-width: 200px; - margin: 8px; -} - -:host { - igx-years-view { - --ig-size: 2; - } +igx-years-view { + border: 1px solid var(--ig-gray-300); } diff --git a/src/app/scheduling/calendar/multiview/multiview.component.html b/src/app/scheduling/calendar/multiview/multiview.component.html index 9fccc3ed5..5a70bcadf 100644 --- a/src/app/scheduling/calendar/multiview/multiview.component.html +++ b/src/app/scheduling/calendar/multiview/multiview.component.html @@ -1,16 +1,28 @@ -
-
- @if (range.length <= 1) { - {{ action }} - } - @if (range.length > 1) { - {{ checkin }} - {{ checkout }} ({{ this.range.length - 1 }} nights stay) - } -
- - - - - -
+
+
+
+ @if (range.length <= 1) { + {{ action }} + } + @if (range.length > 1) { + {{ checkin }} - {{ checkout }} ({{ this.range.length - 1 }} nights stay) + } +
+ + + +
+ + + +
+ + + + diff --git a/src/app/scheduling/calendar/multiview/multiview.component.scss b/src/app/scheduling/calendar/multiview/multiview.component.scss index 78c139d19..fd7f27a61 100644 --- a/src/app/scheduling/calendar/multiview/multiview.component.scss +++ b/src/app/scheduling/calendar/multiview/multiview.component.scss @@ -1,34 +1,45 @@ -.calendar-wrapper { - max-width: 900px; - min-width: 200px; - margin: 8px; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), - 0 1px 1px 0 rgba(0, 0, 0, 0.12), - 0 2px 1px -1px rgba(0, 0, 0, 0.08); -} - -.igx-calendar { - --ig-size: 2; - - border-radius: 0; +.multiview-sample { + display: flex; + flex-direction: column; + gap: 16px; } -.igx-button--contained { - border-radius: 0; +igx-calendar { + border: 1px solid var(--ig-gray-300); } -.stay__info { +.stay-info { display: flex; - justify-content: center; - background: var(--ig-surface-500); + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 16px; + padding: 8px; + border: 1px dashed var(--ig-gray-300); } -.stay__info > span { - color: var(--ig-secondary-400); - font-weight: 600; - font-size: 0.875rem; - letter-spacing: 0.046875rem; - text-transform: uppercase; +.stay-info__text { + font-size: 1rem; line-height: 1rem; - margin: 16px; + margin-inline-start: .5rem; +} + +// The button is never actually disabled: it stays fully focusable and clickable +// so that activating it always validates and opens the dialog with feedback. +// While the range is incomplete we only dim it as a visual hint (cursor stays a +// pointer, since it is clickable). +button.is-incomplete { + opacity: .6; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } diff --git a/src/app/scheduling/calendar/multiview/multiview.component.ts b/src/app/scheduling/calendar/multiview/multiview.component.ts index 370479092..4dc502858 100644 --- a/src/app/scheduling/calendar/multiview/multiview.component.ts +++ b/src/app/scheduling/calendar/multiview/multiview.component.ts @@ -16,6 +16,10 @@ export class CalendarMultiViewComponent { @ViewChild('alert', { static: true }) public dialog: IgxDialogComponent; public range = []; + public get isRangeSelected(): boolean { + return this.range.length >= 2; + } + public selectDates(dates: Date | Date[]) { this.range = dates as Date[]; } @@ -45,7 +49,7 @@ export class CalendarMultiViewComponent { } get action() { - return this.range.length < 1 ? 'CHECK-IN' : 'CHECK-OUT'; + return this.range.length < 1 ? 'Select a CHECK-IN date' : 'Now select a CHECK-OUT date'; } get checkin() { From b6aa0e23db52869b0eddd2c3bc4b60d325b0e59d Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 9 Jul 2026 10:55:22 +0300 Subject: [PATCH 8/9] fix(sample-size-reporter): validate message origin --- src/sample-size-reporter.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/sample-size-reporter.ts b/src/sample-size-reporter.ts index f9c666d28..27a136cfb 100644 --- a/src/sample-size-reporter.ts +++ b/src/sample-size-reporter.ts @@ -55,11 +55,17 @@ export function initSampleSizeReporter(): void { }; window.addEventListener('message', (e: MessageEvent) => { + if (e.source !== window.parent) { + return; + } + if (!e.origin || !/^https?:\/\//.test(e.origin)) { + return; + } if (!e.data || e.data.type !== FIT_ENABLE) { return; } reportWidth = Boolean(e.data.width); - hostOrigin = e.origin || '*'; + hostOrigin = e.origin; if (!styled) { styled = true; From 5a08f320506bc6b2c3eb3c9e97d6c3d3edc9a924 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 9 Jul 2026 11:50:21 +0300 Subject: [PATCH 9/9] fix(sample-size-reporter): remove trailing commas in postMessage parameters --- src/sample-size-reporter.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sample-size-reporter.ts b/src/sample-size-reporter.ts index 27a136cfb..bef1d1f37 100644 --- a/src/sample-size-reporter.ts +++ b/src/sample-size-reporter.ts @@ -46,11 +46,11 @@ export function initSampleSizeReporter(): void { const height = Math.max( document.documentElement.offsetHeight, document.body.offsetHeight, - document.body.scrollHeight, + document.body.scrollHeight ); window.parent.postMessage( { type: FIT_REPORT, height, width: reportWidth ? measureWidth() : undefined }, - hostOrigin, + hostOrigin ); };