fold-ng 0.15.0 → 0.16.0
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 +21 -1
- package/fesm2022/fold-ng.mjs +23 -3
- package/fesm2022/fold-ng.mjs.map +1 -1
- package/package.json +1 -1
- package/tmp-esm2022/tsconfig.lib.tsbuildinfo +1 -1
- package/types/fold-ng.d.ts +17 -1
- package/types/fold-ng.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,25 @@ All notable changes to **fold-ng** are documented here. The format follows
|
|
|
8
8
|
|
|
9
9
|
_Nothing yet._
|
|
10
10
|
|
|
11
|
+
## [0.16.0] - 2026-08-24
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- **`fold-page-layout` a un créneau `[pageSubtitle]`** — la ligne posée SERRÉE
|
|
16
|
+
sous le titre : les faits qui identifient la page (une référence, une famille,
|
|
17
|
+
un compte), pas de la prose. C'est un autre registre que `[description]`, et
|
|
18
|
+
c'est toute la raison d'être du créneau : une ligne de faits poussée dans la
|
|
19
|
+
description se lit avec l'espacement d'un paragraphe — et l'espacement d'un
|
|
20
|
+
paragraphe est une promesse de paragraphe. Les deux cohabitent : les faits
|
|
21
|
+
serrés, la prose avec sa propre respiration en dessous.
|
|
22
|
+
|
|
23
|
+
- **`fold-page-layout` gagne `separator`** — l'en-tête se ferme sur un filet.
|
|
24
|
+
Éteint par défaut : sur une page dont le corps est une pile de cartes, le
|
|
25
|
+
rythme de page sépare déjà, et le filet n'ajouterait que de l'encre. On
|
|
26
|
+
l'allume quand le corps arrive au ras de l'en-tête — un formulaire, un
|
|
27
|
+
tableau, des sections sans surface propre — là où l'en-tête se lirait sinon
|
|
28
|
+
comme la première ligne du contenu.
|
|
29
|
+
|
|
11
30
|
## [0.15.0] - 2026-08-24
|
|
12
31
|
|
|
13
32
|
### Added
|
|
@@ -1936,7 +1955,8 @@ design-token stylesheet.
|
|
|
1936
1955
|
`currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
|
|
1937
1956
|
strings localise via inputs / providers (`provideFoldPanelLabels`).
|
|
1938
1957
|
|
|
1939
|
-
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.
|
|
1958
|
+
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.16.0...HEAD
|
|
1959
|
+
[0.16.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.16.0
|
|
1940
1960
|
[0.15.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.15.0
|
|
1941
1961
|
[0.14.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.14.0
|
|
1942
1962
|
[0.13.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.13.0
|
package/fesm2022/fold-ng.mjs
CHANGED
|
@@ -11530,6 +11530,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
11530
11530
|
* string won't do (an avatar, a two-tone title). Its presence alone switches
|
|
11531
11531
|
* the header on.
|
|
11532
11532
|
* - `[titleBadge]` → an inline pill beside the title (e.g. a status/kind badge).
|
|
11533
|
+
* - `[pageSubtitle]` → the line **directly under the title**, set tight against
|
|
11534
|
+
* it: the page's identifying FACTS (a reference, a category, a count), not
|
|
11535
|
+
* prose. It is a different register from `[description]` and that is the whole
|
|
11536
|
+
* reason it exists — a facts line pushed into the description slot reads with
|
|
11537
|
+
* a paragraph's spacing, which is a paragraph's promise. Both can appear: the
|
|
11538
|
+
* facts sit tight, the prose gets its own room below.
|
|
11533
11539
|
* - `p[description]` → the intro under the title. A **slot**, not a string
|
|
11534
11540
|
* input: a description that needs a `<code>`, a link or a second sentence is
|
|
11535
11541
|
* the common case, not the exception. It must be a `<p description>` — the
|
|
@@ -11573,6 +11579,16 @@ class FoldPageLayoutComponent {
|
|
|
11573
11579
|
/** An optional leading icon shown beside the title. */
|
|
11574
11580
|
icon = input(/* @ts-ignore */
|
|
11575
11581
|
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
11582
|
+
/**
|
|
11583
|
+
* Draw a hairline rule under the header, closing it off from the body.
|
|
11584
|
+
*
|
|
11585
|
+
* Off by default: on a page whose body is a stack of cards, the header is
|
|
11586
|
+
* already separated by the page rhythm and a rule would just add ink. Turn it
|
|
11587
|
+
* on when the body runs flush against the header — a form, a table, sections
|
|
11588
|
+
* with no surface of their own — and the header would otherwise read as the
|
|
11589
|
+
* first row of the content.
|
|
11590
|
+
*/
|
|
11591
|
+
separator = input(false, { ...(ngDevMode ? { debugName: "separator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
11576
11592
|
/**
|
|
11577
11593
|
* Who owns the page's scroll:
|
|
11578
11594
|
* - `"flow"` (default) — the page flows inside its host's scroll (the shell
|
|
@@ -11587,12 +11603,16 @@ class FoldPageLayoutComponent {
|
|
|
11587
11603
|
customTitle = contentChild(FoldPageTitleDirective, /* @ts-ignore */
|
|
11588
11604
|
...(ngDevMode ? [{ debugName: "customTitle" }] : /* istanbul ignore next */ []));
|
|
11589
11605
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11590
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null", "attr.data-scroll": "scroll()" } }, queries: [{ propertyName: "customTitle", first: true, predicate: FoldPageTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (title() || customTitle()) {\n <header class=\"page-head\">\n <div class=\"page-head-text\">\n <div class=\"page-eyebrow\"><ng-content select=\"[pageEyebrow]\" /></div>\n <h1 class=\"page-title\">\n @if (title(); as t) {\n @if (icon(); as ic) {\n <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n }\n <span>{{ t }}</span>\n }\n <ng-content select=\"[pageTitle]\" />\n <span class=\"page-title-badge\"\n ><ng-content select=\"[titleBadge]\"\n /></span>\n </h1>\n <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n </div>\n <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 0 auto;min-height:0}:host([data-scroll=own]){flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-eyebrow{margin-block-end:var(--fold-space-xs)}.page-eyebrow:empty{display:none}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);line-height:var(--fold-leading-tight);color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-desc{font-size:var(--fold-text-sm);line-height:var(--fold-leading-normal);max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--fold-space-sm)}.page-actions:empty{display:none}@media(max-width:640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}@container (max-width: 640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
11606
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPageLayoutComponent, isStandalone: true, selector: "fold-page-layout", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, scroll: { classPropertyName: "scroll", publicName: "scroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.title": "null", "attr.data-scroll": "scroll()", "attr.data-separator": "separator() ? '' : null" } }, queries: [{ propertyName: "customTitle", first: true, predicate: FoldPageTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (title() || customTitle()) {\n <header class=\"page-head\">\n <div class=\"page-head-text\">\n <div class=\"page-eyebrow\"><ng-content select=\"[pageEyebrow]\" /></div>\n <h1 class=\"page-title\">\n @if (title(); as t) {\n @if (icon(); as ic) {\n <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n }\n <span>{{ t }}</span>\n }\n <ng-content select=\"[pageTitle]\" />\n <span class=\"page-title-badge\"\n ><ng-content select=\"[titleBadge]\"\n /></span>\n </h1>\n <div class=\"page-subtitle\"><ng-content select=\"[pageSubtitle]\" /></div>\n <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n </div>\n <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 0 auto;min-height:0}:host([data-scroll=own]){flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}:host([data-separator]) .page-head{padding-block-end:var(--fold-space-lg);border-block-end:1px solid var(--fold-color-border)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-eyebrow{margin-block-end:var(--fold-space-xs)}.page-eyebrow:empty{display:none}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);line-height:var(--fold-leading-tight);color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-subtitle{font-size:var(--fold-text-sm);line-height:var(--fold-leading-snug);color:var(--fold-color-text-muted)}.page-subtitle:empty{display:none}.page-subtitle>*{margin:0}.page-subtitle:not(:empty)+.page-desc{margin-block-start:var(--fold-space-xs)}.page-desc{font-size:var(--fold-text-sm);line-height:var(--fold-leading-normal);max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--fold-space-sm)}.page-actions:empty{display:none}@media(max-width:640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}@container (max-width: 640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }] });
|
|
11591
11607
|
}
|
|
11592
11608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPageLayoutComponent, decorators: [{
|
|
11593
11609
|
type: Component,
|
|
11594
|
-
args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], host: {
|
|
11595
|
-
|
|
11610
|
+
args: [{ selector: "fold-page-layout", standalone: true, imports: [FoldIconComponent], host: {
|
|
11611
|
+
"[attr.title]": "null",
|
|
11612
|
+
"[attr.data-scroll]": "scroll()",
|
|
11613
|
+
"[attr.data-separator]": "separator() ? '' : null",
|
|
11614
|
+
}, template: "@if (title() || customTitle()) {\n <header class=\"page-head\">\n <div class=\"page-head-text\">\n <div class=\"page-eyebrow\"><ng-content select=\"[pageEyebrow]\" /></div>\n <h1 class=\"page-title\">\n @if (title(); as t) {\n @if (icon(); as ic) {\n <fold-icon class=\"page-icon\" [name]=\"ic\" [size]=\"22\" />\n }\n <span>{{ t }}</span>\n }\n <ng-content select=\"[pageTitle]\" />\n <span class=\"page-title-badge\"\n ><ng-content select=\"[titleBadge]\"\n /></span>\n </h1>\n <div class=\"page-subtitle\"><ng-content select=\"[pageSubtitle]\" /></div>\n <div class=\"page-desc\"><ng-content select=\"p[description]\" /></div>\n </div>\n <div class=\"page-actions\"><ng-content select=\"[pageActions]\" /></div>\n </header>\n}\n<div class=\"page-body\"><ng-content /></div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px);box-sizing:border-box;padding-block:var(--fold-page-pad-top, 28px) var(--fold-page-pad-bottom, 40px);padding-inline:var(--fold-page-gutter, 32px);flex:1 0 auto;min-height:0}:host([data-scroll=own]){flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fold-space-lg)}:host([data-separator]) .page-head{padding-block-end:var(--fold-space-lg);border-block-end:1px solid var(--fold-color-border)}.page-head-text{display:flex;flex-direction:column;gap:var(--fold-space-xs);min-width:0}.page-eyebrow{margin-block-end:var(--fold-space-xs)}.page-eyebrow:empty{display:none}.page-title{margin:0;display:flex;align-items:center;gap:var(--fold-space-sm);font-size:var(--fold-text-xl);font-weight:var(--fold-weight-bold);letter-spacing:var(--fold-tracking-tighter);line-height:var(--fold-leading-tight);color:var(--fold-color-text)}.page-icon{flex:none;color:var(--fold-color-primary-text)}.page-title-badge{display:inline-flex;align-items:center;gap:var(--fold-space-sm)}.page-title-badge:empty{display:none}.page-subtitle{font-size:var(--fold-text-sm);line-height:var(--fold-leading-snug);color:var(--fold-color-text-muted)}.page-subtitle:empty{display:none}.page-subtitle>*{margin:0}.page-subtitle:not(:empty)+.page-desc{margin-block-start:var(--fold-space-xs)}.page-desc{font-size:var(--fold-text-sm);line-height:var(--fold-leading-normal);max-width:var(--fold-page-desc-measure, none);color:var(--fold-color-text-muted)}.page-desc:empty{display:none}.page-desc>*{margin:0}.page-actions{flex:none;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--fold-space-sm)}.page-actions:empty{display:none}@media(max-width:640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}@container (max-width: 640px){.page-head{flex-direction:column;align-items:stretch;gap:var(--fold-space-md)}.page-actions{justify-content:flex-start}:host{padding-inline:calc(var(--fold-page-gutter, 32px) / 2)}}.page-body{display:flex;flex-direction:column;gap:var(--fold-page-gap, 32px)}\n"] }]
|
|
11615
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], scroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "scroll", required: false }] }], customTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FoldPageTitleDirective), { isSignal: true }] }] } });
|
|
11596
11616
|
|
|
11597
11617
|
/**
|
|
11598
11618
|
* `<fold-page-section>` — a titled, semantic **`<section>`** grouping of page
|