-
-
-
+
+
+ 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 @@
-
-
-
-
-
-
-
-
+
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)
+ }
+
+
+
+
+ Select a check-in and a check-out date on the calendar to enable this button.
+
+
+
+
+
+
+
+
+
+
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() {
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..bef1d1f37
--- /dev/null
+++ b/src/sample-size-reporter.ts
@@ -0,0 +1,85 @@
+/**
+ * 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.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;
+
+ 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",