fold-ng 0.27.0 → 0.27.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -1
- package/fesm2022/fold-ng.mjs +2 -2
- package/fesm2022/fold-ng.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,37 @@ All notable changes to **fold-ng** are documented here. The format follows
|
|
|
8
8
|
|
|
9
9
|
_Nothing yet._
|
|
10
10
|
|
|
11
|
+
## [0.27.2] - 2026-09-11
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- **Le scrim d'un dialogue FLOUTE, sur écran étroit seulement.** Affaire de
|
|
16
|
+
proportion, pas de goût : sur une grande fenêtre le dialogue couvre un quart
|
|
17
|
+
de la surface, et l'assombrissement suffit à dire lequel des deux plans
|
|
18
|
+
compte. Sur un téléphone il en couvre la quasi-totalité, et les deux
|
|
19
|
+
centimètres de contenu qui dépassent se lisent comme une page encore
|
|
20
|
+
atteignable. Le flou tranche : ce qui est derrière est **suspendu**, pas
|
|
21
|
+
seulement plus sombre.
|
|
22
|
+
|
|
23
|
+
`@media` et non `@container` — le dock d'un dialogue est `fixed`, donc il a la
|
|
24
|
+
taille de la fenêtre, et un élément ne peut jamais répondre à sa propre
|
|
25
|
+
requête de conteneur.
|
|
26
|
+
|
|
27
|
+
## [0.27.1] - 2026-09-11
|
|
28
|
+
|
|
29
|
+
### Fixed
|
|
30
|
+
|
|
31
|
+
- 🔴 **Le dialogue centré ne l'était pas.** `side="center"` posait
|
|
32
|
+
`place-items: center` sur un dock passé en `grid` — mais la règle de base du
|
|
33
|
+
dock porte `justify-content: flex-end`, pour coller une feuille latérale à son
|
|
34
|
+
bord, et `place-items` ne la remet pas : elle règle la place de l'élément DANS
|
|
35
|
+
sa piste, pas celle de la piste dans la grille. Le dialogue restait donc
|
|
36
|
+
plaqué au bord droit d'un dock pourtant large comme la fenêtre.
|
|
37
|
+
|
|
38
|
+
`place-content: center` par-dessus. Et le cas qui le tient lit la **feuille
|
|
39
|
+
compilée** : jsdom n'applique aucun style de composant, donc mesurer un
|
|
40
|
+
rectangle serait passé sur un dialogue décentré.
|
|
41
|
+
|
|
11
42
|
## [0.27.0] - 2026-09-11
|
|
12
43
|
|
|
13
44
|
### Added
|
|
@@ -2567,7 +2598,9 @@ design-token stylesheet.
|
|
|
2567
2598
|
`currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
|
|
2568
2599
|
strings localise via inputs / providers (`provideFoldPanelLabels`).
|
|
2569
2600
|
|
|
2570
|
-
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.27.
|
|
2601
|
+
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.27.2...HEAD
|
|
2602
|
+
[0.27.2]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.2
|
|
2603
|
+
[0.27.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.1
|
|
2571
2604
|
[0.27.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.0
|
|
2572
2605
|
[0.26.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.26.1
|
|
2573
2606
|
[0.26.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.26.0
|
package/fesm2022/fold-ng.mjs
CHANGED
|
@@ -14147,7 +14147,7 @@ class FoldPanelHostComponent {
|
|
|
14147
14147
|
this.inerted = [];
|
|
14148
14148
|
}
|
|
14149
14149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "directive", type: FoldPanelComponentOutletDirective, selector: "[foldPanelComponentOutlet]", inputs: ["foldPanelComponentOutlet"] }, { kind: "component", type: FoldPanelHeaderComponent, selector: "fold-panel-header", inputs: ["title", "subtitle", "icon", "variant", "closeLabel"], outputs: ["closed"] }] });
|
|
14150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-content:center;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}@media(max-width:640px){.panel-dock[data-side=center]{backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass))}}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "directive", type: FoldPanelComponentOutletDirective, selector: "[foldPanelComponentOutlet]", inputs: ["foldPanelComponentOutlet"] }, { kind: "component", type: FoldPanelHeaderComponent, selector: "fold-panel-header", inputs: ["title", "subtitle", "icon", "variant", "closeLabel"], outputs: ["closed"] }] });
|
|
14151
14151
|
}
|
|
14152
14152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, decorators: [{
|
|
14153
14153
|
type: Component,
|
|
@@ -14156,7 +14156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
14156
14156
|
FocusTrapDirective,
|
|
14157
14157
|
FoldPanelComponentOutletDirective,
|
|
14158
14158
|
FoldPanelHeaderComponent,
|
|
14159
|
-
], template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"] }]
|
|
14159
|
+
], template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-content:center;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}@media(max-width:640px){.panel-dock[data-side=center]{backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass))}}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"] }]
|
|
14160
14160
|
}], ctorParameters: () => [], propDecorators: { onEscape: [{
|
|
14161
14161
|
type: HostListener,
|
|
14162
14162
|
args: ["document:keydown.escape"]
|