Skip to content

Commit d537fe5

Browse files
crisbetocrisbeto
committed
main - 9e8d631 refactor(material/timepicker): account for popover overlays
1 parent fc28135 commit d537fe5

3 files changed

Lines changed: 42 additions & 261 deletions

File tree

‎docs-content/api-docs/cdk-overlay.html‎

Lines changed: 33 additions & 252 deletions
Original file line numberDiff line numberDiff line change
@@ -756,20 +756,6 @@ <h4 id="CdkConnectedOverlay" class="docs-header-link docs-api-h4 docs-api-class-
756756

757757

758758

759-
<tr class="docs-api-properties-row">
760-
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ alias: &#39;cdkConnectedOverlayAsPopover&#39;, transform: booleanAttribute }</span>)
761-
</div><p class="docs-api-property-name">
762-
<code>asPopover: boolean</code>
763-
</p>
764-
</td>
765-
<td class="docs-api-property-description"><p>Whether the connected overlay should be rendered inside a popover element or the overlay container.</p>
766-
</td>
767-
</tr>
768-
769-
770-
771-
772-
773759
<tr class="docs-api-properties-row">
774760
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;cdkConnectedOverlayBackdropClass&#39;</span>)
775761
</div><p class="docs-api-property-name">
@@ -1051,6 +1037,20 @@ <h4 id="CdkConnectedOverlay" class="docs-header-link docs-api-h4 docs-api-class-
10511037

10521038

10531039

1040+
<tr class="docs-api-properties-row">
1041+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ alias: &#39;cdkConnectedOverlayUsePopover&#39;, transform: booleanAttribute }</span>)
1042+
</div><p class="docs-api-property-name">
1043+
<code>usePopover: boolean</code>
1044+
</p>
1045+
</td>
1046+
<td class="docs-api-property-description"><p>Whether the connected overlay should be rendered inside a popover element or the overlay container.</p>
1047+
</td>
1048+
</tr>
1049+
1050+
1051+
1052+
1053+
10541054
<tr class="docs-api-properties-row">
10551055
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;cdkConnectedOverlayViewportMargin&#39;</span>)
10561056
</div><p class="docs-api-property-name">
@@ -2608,57 +2608,6 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
26082608

26092609

26102610

2611-
<table class="docs-api-method-table">
2612-
<thead>
2613-
<tr class="docs-api-method-name-row">
2614-
<th colspan="2" class="docs-api-method-name-cell">asPopover
2615-
</th>
2616-
</tr>
2617-
</thead><tr class="docs-api-method-description-row">
2618-
<td colspan="2" class="docs-api-method-description-cell">
2619-
<p>Configures that the overlay should be rendered inside a native popover. This has the benefit
2620-
if co-locating the overlay with the trigger and being better for accessibility.</p>
2621-
2622-
</td>
2623-
</tr><thead>
2624-
<tr class="docs-api-method-parameters-header-row">
2625-
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
2626-
</tr>
2627-
</thead>
2628-
2629-
<tr class="docs-api-method-parameter-row">
2630-
<td class="docs-api-method-parameter-cell">
2631-
<p class="docs-api-method-parameter-name">
2632-
isPopover</p>
2633-
<code class="docs-api-method-parameter-type">boolean</code>
2634-
</td>
2635-
<td class="docs-api-method-parameter-description-cell">
2636-
<p class="docs-api-method-parameter-description">
2637-
<p>Whether the overlay should be a popover.</p>
2638-
2639-
</p>
2640-
</td>
2641-
</tr>
2642-
<thead>
2643-
<tr class="docs-api-method-returns-header-row">
2644-
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
2645-
</tr>
2646-
</thead>
2647-
<tr>
2648-
<td class="docs-api-method-returns-type-cell">
2649-
<code class="docs-api-method-returns-type">this</code>
2650-
</td>
2651-
<td class="docs-api-method-returns-description-cell">
2652-
<p class="docs-api-method-returns-description">
2653-
2654-
</p>
2655-
</td>
2656-
</tr></table>
2657-
2658-
2659-
2660-
2661-
26622611
<table class="docs-api-method-table">
26632612
<thead>
26642613
<tr class="docs-api-method-name-row">
@@ -3490,6 +3439,20 @@ <h4 id="OverlayConfig" class="docs-header-link docs-api-h4 docs-api-class-name">
34903439

34913440

34923441

3442+
<tr class="docs-api-properties-row">
3443+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
3444+
<code>usePopover: boolean</code>
3445+
</p>
3446+
</td>
3447+
<td class="docs-api-property-description"><p>Whether the overlay should be rendered as a native popover element,
3448+
rather than placing it inside of the overlay container.</p>
3449+
</td>
3450+
</tr>
3451+
3452+
3453+
3454+
3455+
34933456
<tr class="docs-api-properties-row">
34943457
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
34953458
<code>width: number | string</code>
@@ -4147,156 +4110,6 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
41474110

41484111

41494112

4150-
<table class="docs-api-method-table">
4151-
<thead>
4152-
<tr class="docs-api-method-name-row">
4153-
<th colspan="2" class="docs-api-method-name-cell">attachBackdrop
4154-
</th>
4155-
</tr>
4156-
</thead><tr class="docs-api-method-description-row">
4157-
<td colspan="2" class="docs-api-method-description-cell">
4158-
<p>Attaches the backdrop element to the host. The return value indicates whether the
4159-
position strategy ended up attaching the backdrop. If it didn&#39;t, it will fall back
4160-
to the default behavior.</p>
4161-
4162-
</td>
4163-
</tr><thead>
4164-
<tr class="docs-api-method-parameters-header-row">
4165-
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
4166-
</tr>
4167-
</thead>
4168-
4169-
<tr class="docs-api-method-parameter-row">
4170-
<td class="docs-api-method-parameter-cell">
4171-
<p class="docs-api-method-parameter-name">
4172-
backdrop</p>
4173-
<code class="docs-api-method-parameter-type">HTMLElement</code>
4174-
</td>
4175-
<td class="docs-api-method-parameter-description-cell">
4176-
<p class="docs-api-method-parameter-description">
4177-
4178-
</p>
4179-
</td>
4180-
</tr>
4181-
4182-
<tr class="docs-api-method-parameter-row">
4183-
<td class="docs-api-method-parameter-cell">
4184-
<p class="docs-api-method-parameter-name">
4185-
host</p>
4186-
<code class="docs-api-method-parameter-type">HTMLElement</code>
4187-
</td>
4188-
<td class="docs-api-method-parameter-description-cell">
4189-
<p class="docs-api-method-parameter-description">
4190-
4191-
</p>
4192-
</td>
4193-
</tr>
4194-
<thead>
4195-
<tr class="docs-api-method-returns-header-row">
4196-
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
4197-
</tr>
4198-
</thead>
4199-
<tr>
4200-
<td class="docs-api-method-returns-type-cell">
4201-
<code class="docs-api-method-returns-type">boolean</code>
4202-
</td>
4203-
<td class="docs-api-method-returns-description-cell">
4204-
<p class="docs-api-method-returns-description">
4205-
4206-
</p>
4207-
</td>
4208-
</tr></table>
4209-
4210-
4211-
4212-
4213-
4214-
<table class="docs-api-method-table">
4215-
<thead>
4216-
<tr class="docs-api-method-name-row">
4217-
<th colspan="2" class="docs-api-method-name-cell">attachHost
4218-
</th>
4219-
</tr>
4220-
</thead><tr class="docs-api-method-description-row">
4221-
<td colspan="2" class="docs-api-method-description-cell">
4222-
<p>Attaches the host element to the DOM. The return value indicates whether the
4223-
position strategy ended up attaching the host. If it didn&#39;t, it will fall back
4224-
to the default behavior.</p>
4225-
4226-
</td>
4227-
</tr><thead>
4228-
<tr class="docs-api-method-parameters-header-row">
4229-
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
4230-
</tr>
4231-
</thead>
4232-
4233-
<tr class="docs-api-method-parameter-row">
4234-
<td class="docs-api-method-parameter-cell">
4235-
<p class="docs-api-method-parameter-name">
4236-
host</p>
4237-
<code class="docs-api-method-parameter-type">HTMLElement</code>
4238-
</td>
4239-
<td class="docs-api-method-parameter-description-cell">
4240-
<p class="docs-api-method-parameter-description">
4241-
4242-
</p>
4243-
</td>
4244-
</tr>
4245-
<thead>
4246-
<tr class="docs-api-method-returns-header-row">
4247-
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
4248-
</tr>
4249-
</thead>
4250-
<tr>
4251-
<td class="docs-api-method-returns-type-cell">
4252-
<code class="docs-api-method-returns-type">boolean</code>
4253-
</td>
4254-
<td class="docs-api-method-returns-description-cell">
4255-
<p class="docs-api-method-returns-description">
4256-
4257-
</p>
4258-
</td>
4259-
</tr></table>
4260-
4261-
4262-
4263-
4264-
4265-
<table class="docs-api-method-table">
4266-
<thead>
4267-
<tr class="docs-api-method-name-row">
4268-
<th colspan="2" class="docs-api-method-name-cell">createStructure
4269-
</th>
4270-
</tr>
4271-
</thead><tr class="docs-api-method-description-row">
4272-
<td colspan="2" class="docs-api-method-description-cell">
4273-
<p>Creates the structure of the overlay. If not provided or if it returns null,
4274-
structure will be created inside the overlay container.</p>
4275-
4276-
</td>
4277-
</tr><thead>
4278-
<tr class="docs-api-method-returns-header-row">
4279-
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
4280-
</tr>
4281-
</thead>
4282-
<tr>
4283-
<td class="docs-api-method-returns-type-cell">
4284-
<code class="docs-api-method-returns-type">{
4285-
pane: HTMLElement;
4286-
host: HTMLElement;
4287-
} | null</code>
4288-
</td>
4289-
<td class="docs-api-method-returns-description-cell">
4290-
<p class="docs-api-method-returns-description">
4291-
4292-
</p>
4293-
</td>
4294-
</tr></table>
4295-
4296-
4297-
4298-
4299-
43004113
<table class="docs-api-method-table">
43014114
<thead>
43024115
<tr class="docs-api-method-name-row">
@@ -4334,42 +4147,23 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
43344147
<table class="docs-api-method-table">
43354148
<thead>
43364149
<tr class="docs-api-method-name-row">
4337-
<th colspan="2" class="docs-api-method-name-cell">updateStackingOrder
4150+
<th colspan="2" class="docs-api-method-name-cell">getPopoverInsertionPoint
43384151
</th>
43394152
</tr>
43404153
</thead><tr class="docs-api-method-description-row">
43414154
<td colspan="2" class="docs-api-method-description-cell">
4342-
<p>Updates the stacking order of the overlay. The return value indicates whether the
4343-
position strategy ended up updating the stacking order. If it hasn&#39;t, the overlay
4344-
will fall back to the default stacking update logic.</p>
4155+
<p>Gets the element in the DOM after which to insert
4156+
the overlay when it is rendered out as a popover.</p>
43454157

43464158
</td>
43474159
</tr><thead>
4348-
<tr class="docs-api-method-parameters-header-row">
4349-
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
4350-
</tr>
4351-
</thead>
4352-
4353-
<tr class="docs-api-method-parameter-row">
4354-
<td class="docs-api-method-parameter-cell">
4355-
<p class="docs-api-method-parameter-name">
4356-
host</p>
4357-
<code class="docs-api-method-parameter-type">HTMLElement</code>
4358-
</td>
4359-
<td class="docs-api-method-parameter-description-cell">
4360-
<p class="docs-api-method-parameter-description">
4361-
4362-
</p>
4363-
</td>
4364-
</tr>
4365-
<thead>
43664160
<tr class="docs-api-method-returns-header-row">
43674161
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
43684162
</tr>
43694163
</thead>
43704164
<tr>
43714165
<td class="docs-api-method-returns-type-cell">
4372-
<code class="docs-api-method-returns-type">boolean</code>
4166+
<code class="docs-api-method-returns-type">Element</code>
43734167
</td>
43744168
<td class="docs-api-method-returns-description-cell">
43754169
<p class="docs-api-method-returns-description">
@@ -4805,7 +4599,7 @@ <h3 id="cdk-overlay-functions" class="docs-header-link docs-api-h3">
48054599
<td class="docs-api-method-parameter-cell">
48064600
<p class="docs-api-method-parameter-name">
48074601
injector</p>
4808-
<code class="docs-api-method-parameter-type"></code>
4602+
<code class="docs-api-method-parameter-type">Injector</code>
48094603
</td>
48104604
<td class="docs-api-method-parameter-description-cell">
48114605
<p class="docs-api-method-parameter-description">
@@ -4814,19 +4608,6 @@ <h3 id="cdk-overlay-functions" class="docs-header-link docs-api-h3">
48144608
</p>
48154609
</td>
48164610
</tr>
4817-
4818-
<tr class="docs-api-method-parameter-row">
4819-
<td class="docs-api-method-parameter-cell">
4820-
<p class="docs-api-method-parameter-name">
4821-
_injector</p>
4822-
<code class="docs-api-method-parameter-type">Injector</code>
4823-
</td>
4824-
<td class="docs-api-method-parameter-description-cell">
4825-
<p class="docs-api-method-parameter-description">
4826-
4827-
</p>
4828-
</td>
4829-
</tr>
48304611
<thead>
48314612
<tr class="docs-api-method-returns-header-row">
48324613
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>

‎fesm2022/cdk-overlay.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ class CdkOverlayBasicExample {
2929
kind: "directive",
3030
type: i1.CdkConnectedOverlay,
3131
selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
32-
inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayAsPopover"],
32+
inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover"],
3333
outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"],
3434
exportAs: ["cdkConnectedOverlay"]
3535
}, {

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular/components-examples",
3-
"version": "21.1.0-next.0+sha-ecd9039",
3+
"version": "21.1.0-next.0+sha-9e8d631",
44
"description": "Angular Components Examples",
55
"private": true,
66
"repository": {
@@ -287,15 +287,15 @@
287287
},
288288
"homepage": "https://github.com/angular/components#readme",
289289
"peerDependencies": {
290-
"@angular/aria": "21.1.0-next.0+sha-ecd9039",
291-
"@angular/cdk": "21.1.0-next.0+sha-ecd9039",
292-
"@angular/cdk-experimental": "21.1.0-next.0+sha-ecd9039",
290+
"@angular/aria": "21.1.0-next.0+sha-9e8d631",
291+
"@angular/cdk": "21.1.0-next.0+sha-9e8d631",
292+
"@angular/cdk-experimental": "21.1.0-next.0+sha-9e8d631",
293293
"@angular/core": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
294294
"@angular/common": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
295-
"@angular/material": "21.1.0-next.0+sha-ecd9039",
296-
"@angular/material-experimental": "21.1.0-next.0+sha-ecd9039",
297-
"@angular/material-luxon-adapter": "21.1.0-next.0+sha-ecd9039",
298-
"@angular/material-date-fns-adapter": "21.1.0-next.0+sha-ecd9039"
295+
"@angular/material": "21.1.0-next.0+sha-9e8d631",
296+
"@angular/material-experimental": "21.1.0-next.0+sha-9e8d631",
297+
"@angular/material-luxon-adapter": "21.1.0-next.0+sha-9e8d631",
298+
"@angular/material-date-fns-adapter": "21.1.0-next.0+sha-9e8d631"
299299
},
300300
"devDependencies": {
301301
"@angular/aria": "workspace:*",

0 commit comments

Comments
 (0)