@foblex/m-render 3.0.5 → 4.0.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/assets/styles/_alert.scss +9 -4
- package/assets/styles/_badge.scss +6 -5
- package/assets/styles/_button.scss +13 -4
- package/assets/styles/_code-group.scss +37 -0
- package/assets/styles/_code-highlight.scss +16 -35
- package/assets/styles/_code-view.scss +51 -33
- package/assets/styles/_doc-text.scss +27 -23
- package/assets/styles/_icons.scss +3 -3
- package/assets/styles/_table.scss +32 -11
- package/assets/styles/_variables.scss +224 -139
- package/assets/styles/styles.scss +5 -0
- package/fesm2022/foblex-m-render.mjs +53 -35
- package/fesm2022/foblex-m-render.mjs.map +1 -1
- package/package.json +1 -1
- package/types/foblex-m-render.d.ts +4 -1
|
@@ -647,13 +647,13 @@ class HeaderMenuBase {
|
|
|
647
647
|
|
|
648
648
|
class InlineMenu extends HeaderMenuBase {
|
|
649
649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InlineMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
650
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: InlineMenu, isStandalone: true, selector: "inline-menu", usesInheritance: true, ngImport: i0, template: "@for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n <span>{{ item.text }}</span>\n </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}a{padding:0 12px;font-size:14px;font-weight:500;color:var(--
|
|
650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: InlineMenu, isStandalone: true, selector: "inline-menu", usesInheritance: true, ngImport: i0, template: "@for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n <span>{{ item.text }}</span>\n </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}a{padding:0 12px;font-size:14px;font-weight:500;color:var(--secondary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:36px;border-radius:999px;transition:background-color .2s ease,color .2s ease}a:hover{color:var(--primary-text);background-color:var(--gray-soft)}a.active{color:var(--primary-text);background-color:var(--soft-background)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
651
651
|
}
|
|
652
652
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InlineMenu, decorators: [{
|
|
653
653
|
type: Component,
|
|
654
654
|
args: [{ selector: 'inline-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
655
655
|
RouterLink,
|
|
656
|
-
], template: "@for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n <span>{{ item.text }}</span>\n </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}a{padding:0 12px;font-size:14px;font-weight:500;color:var(--
|
|
656
|
+
], template: "@for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\">\n <span>{{ item.text }}</span>\n </a>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:center}a{padding:0 12px;font-size:14px;font-weight:500;color:var(--secondary-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:36px;border-radius:999px;transition:background-color .2s ease,color .2s ease}a:hover{color:var(--primary-text);background-color:var(--gray-soft)}a.active{color:var(--primary-text);background-color:var(--soft-background)}\n"] }]
|
|
657
657
|
}] });
|
|
658
658
|
|
|
659
659
|
class ThemeButtonComponent {
|
|
@@ -682,11 +682,11 @@ class ThemeButtonComponent {
|
|
|
682
682
|
this._themeService?.updateTheme();
|
|
683
683
|
}
|
|
684
684
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ThemeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
685
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: ThemeButtonComponent, isStandalone: true, selector: "button[theme-button]", host: { listeners: { "click": "_onClick()" } }, ngImport: i0, template: "<div class=\"f-icon-container\">\n <div class=\"f-icon moon\"></div>\n <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:
|
|
685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: ThemeButtonComponent, isStandalone: true, selector: "button[theme-button]", host: { listeners: { "click": "_onClick()" } }, ngImport: i0, template: "<div class=\"f-icon-container\">\n <div class=\"f-icon moon\"></div>\n <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:999px;display:block;width:46px;min-width:46px;height:24px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer;box-shadow:var(--shadow-1);transition:border-color .2s ease,transform .2s ease;overflow:hidden}:host:hover{border-color:var(--theme-button-hovered-border-color);transform:translateY(-1px)}.f-icon-container{position:absolute;top:2px;left:2px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);box-shadow:0 1px 2px var(--alpha-08);transition:transform .3s ease}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
686
686
|
}
|
|
687
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ThemeButtonComponent, decorators: [{
|
|
688
688
|
type: Component,
|
|
689
|
-
args: [{ selector: 'button[theme-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"f-icon-container\">\n <div class=\"f-icon moon\"></div>\n <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:
|
|
689
|
+
args: [{ selector: 'button[theme-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"f-icon-container\">\n <div class=\"f-icon moon\"></div>\n <div class=\"f-icon sun\"></div>\n</div>\n", styles: [":host{margin:0 8px;position:relative;border-radius:999px;display:block;width:46px;min-width:46px;height:24px;border:1px solid var(--theme-button-border-color);background-color:var(--theme-button-background);cursor:pointer;box-shadow:var(--shadow-1);transition:border-color .2s ease,transform .2s ease;overflow:hidden}:host:hover{border-color:var(--theme-button-hovered-border-color);transform:translateY(-1px)}.f-icon-container{position:absolute;top:2px;left:2px;width:18px;height:18px;padding:3px;border-radius:50%;background-color:var(--theme-button-icon-background);box-shadow:0 1px 2px var(--alpha-08);transition:transform .3s ease}.f-icon-container .f-icon{position:absolute;top:3px;left:3px;width:12px;height:12px}.f-icon-container .sun{display:block}.f-icon-container .moon{display:none}.dark :host .f-icon-container{transform:translate(22px)}.dark :host .f-icon-container .sun{display:none}.dark :host .f-icon-container .moon{display:block}\n"] }]
|
|
690
690
|
}], propDecorators: { _onClick: [{
|
|
691
691
|
type: HostListener,
|
|
692
692
|
args: ['click']
|
|
@@ -766,7 +766,7 @@ class DropdownMenu extends HeaderMenuBase {
|
|
|
766
766
|
clearTimeout(this._hoverTimeout);
|
|
767
767
|
}
|
|
768
768
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
769
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DropdownMenu, isStandalone: true, selector: "dropdown-menu", usesInheritance: true, ngImport: i0, template: "<span class=\"label\" cdk-overlay-origin\n (click)=\"toggle()\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n #overlayOrigin=\"cdkOverlayOrigin\">\n <span class=\"f-icon more-horizontal\"></span>\n</span>\n\n<ng-template\n cdk-connected-overlay\n [cdkConnectedOverlayLockPosition]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayDisableClose]=\"false\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayOffsetY]=\"-10\"\n (backdropClick)=\"close()\"\n>\n <div class=\"dropdown-panel\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\">\n @if (navigation().length) {\n <div class=\"navigation-wrapper\">\n @for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\"><span>{{ item.text }}</span></a>\n }\n </div>\n }\n <div class=\"appearance\">\n <span>Appearance</span>\n <button theme-button></button>\n </div>\n <div class=\"social-links\">\n <media-links/>\n </div>\n\n </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:
|
|
769
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DropdownMenu, isStandalone: true, selector: "dropdown-menu", usesInheritance: true, ngImport: i0, template: "<span class=\"label\" cdk-overlay-origin\n (click)=\"toggle()\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n #overlayOrigin=\"cdkOverlayOrigin\">\n <span class=\"f-icon more-horizontal\"></span>\n</span>\n\n<ng-template\n cdk-connected-overlay\n [cdkConnectedOverlayLockPosition]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayDisableClose]=\"false\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayOffsetY]=\"-10\"\n (backdropClick)=\"close()\"\n>\n <div class=\"dropdown-panel\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\">\n @if (navigation().length) {\n <div class=\"navigation-wrapper\">\n @for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\"><span>{{ item.text }}</span></a>\n }\n </div>\n }\n <div class=\"appearance\">\n <span>Appearance</span>\n <button theme-button></button>\n </div>\n <div class=\"social-links\">\n <media-links/>\n </div>\n\n </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:4px;margin-right:4px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--secondary-text);cursor:pointer;line-height:36px;border-radius:999px;padding:0 12px;transition:color .2s ease,background-color .2s ease}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--primary-text);background-color:var(--gray-soft)}.dropdown-panel{border-radius:calc(var(--border-radius) + 4px);min-width:240px;border:1px solid var(--divider-color);background-color:var(--surface-glass-strong);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--shadow-3);max-height:calc(100vh - var(--header-height));overflow-y:auto}.navigation-wrapper{display:flex;flex-direction:column;justify-content:flex-start;padding:12px;border-bottom:1px solid var(--divider-color)}.navigation-wrapper a{color:var(--primary-text);white-space:nowrap;border-radius:calc(var(--border-radius) - 2px);padding:0 12px;font-size:14px;font-weight:500;line-height:36px;display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s ease,color .2s ease}.navigation-wrapper a:hover{color:var(--primary-text);background-color:var(--gray-soft)}.navigation-wrapper a.active{color:var(--primary-text);background-color:var(--soft-background)}.appearance{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 24px;border-bottom:1px solid var(--divider-color)}.appearance span{color:var(--secondary-text);flex-grow:1;font-size:12px;font-weight:500;line-height:28px;transition:color .5s}.social-links{padding:6px 12px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MediaLinks, selector: "media-links" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
770
770
|
}
|
|
771
771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownMenu, decorators: [{
|
|
772
772
|
type: Component,
|
|
@@ -776,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
776
776
|
ThemeButtonComponent,
|
|
777
777
|
RouterLink,
|
|
778
778
|
MediaLinks,
|
|
779
|
-
], template: "<span class=\"label\" cdk-overlay-origin\n (click)=\"toggle()\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n #overlayOrigin=\"cdkOverlayOrigin\">\n <span class=\"f-icon more-horizontal\"></span>\n</span>\n\n<ng-template\n cdk-connected-overlay\n [cdkConnectedOverlayLockPosition]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayDisableClose]=\"false\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayOffsetY]=\"-10\"\n (backdropClick)=\"close()\"\n>\n <div class=\"dropdown-panel\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\">\n @if (navigation().length) {\n <div class=\"navigation-wrapper\">\n @for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\"><span>{{ item.text }}</span></a>\n }\n </div>\n }\n <div class=\"appearance\">\n <span>Appearance</span>\n <button theme-button></button>\n </div>\n <div class=\"social-links\">\n <media-links/>\n </div>\n\n </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:
|
|
779
|
+
], template: "<span class=\"label\" cdk-overlay-origin\n (click)=\"toggle()\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\"\n #overlayOrigin=\"cdkOverlayOrigin\">\n <span class=\"f-icon more-horizontal\"></span>\n</span>\n\n<ng-template\n cdk-connected-overlay\n [cdkConnectedOverlayLockPosition]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n [cdkConnectedOverlayDisableClose]=\"false\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayOffsetY]=\"-10\"\n (backdropClick)=\"close()\"\n>\n <div class=\"dropdown-panel\"\n (mouseenter)=\"mouseEnter()\"\n (mouseleave)=\"mouseLeave()\">\n @if (navigation().length) {\n <div class=\"navigation-wrapper\">\n @for (item of navigation(); track item.link) {\n <a [routerLink]=\"item.link\" [class.active]=\"item.isActive\"><span>{{ item.text }}</span></a>\n }\n </div>\n }\n <div class=\"appearance\">\n <span>Appearance</span>\n <button theme-button></button>\n </div>\n <div class=\"social-links\">\n <media-links/>\n </div>\n\n </div>\n</ng-template>\n\n", styles: [":host{overflow:hidden}.label{margin-left:4px;margin-right:4px;display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--secondary-text);cursor:pointer;line-height:36px;border-radius:999px;padding:0 12px;transition:color .2s ease,background-color .2s ease}.label .f-icon{margin-left:4px;width:14px;min-width:14px;height:14px;color:inherit}.label:hover{color:var(--primary-text);background-color:var(--gray-soft)}.dropdown-panel{border-radius:calc(var(--border-radius) + 4px);min-width:240px;border:1px solid var(--divider-color);background-color:var(--surface-glass-strong);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:var(--shadow-3);max-height:calc(100vh - var(--header-height));overflow-y:auto}.navigation-wrapper{display:flex;flex-direction:column;justify-content:flex-start;padding:12px;border-bottom:1px solid var(--divider-color)}.navigation-wrapper a{color:var(--primary-text);white-space:nowrap;border-radius:calc(var(--border-radius) - 2px);padding:0 12px;font-size:14px;font-weight:500;line-height:36px;display:block;cursor:pointer;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s ease,color .2s ease}.navigation-wrapper a:hover{color:var(--primary-text);background-color:var(--gray-soft)}.navigation-wrapper a.active{color:var(--primary-text);background-color:var(--soft-background)}.appearance{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 24px;border-bottom:1px solid var(--divider-color)}.appearance span{color:var(--secondary-text);flex-grow:1;font-size:12px;font-weight:500;line-height:28px;transition:color .5s}.social-links{padding:6px 12px}\n"] }]
|
|
780
780
|
}] });
|
|
781
781
|
|
|
782
782
|
function calculateMarkdownUrl(markdown, navigation, docsDir, notFoundMd = '') {
|
|
@@ -931,13 +931,13 @@ class FSearchButtonComponent {
|
|
|
931
931
|
this._instance = null;
|
|
932
932
|
}
|
|
933
933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FSearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
934
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FSearchButtonComponent, isStandalone: true, selector: "f-search-button", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["searchContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (configuration()) {\n <div #searchContainer class=\"search-container\"></div>\n} @else {\n <a class=\"f-icon search fallback-search\" [routerLink]=\"[]\" fragment=\"search\" aria-label=\"Search\"></a>\n}\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}.search-container{display:inline-flex;justify-content:center;align-items:center}.fallback-search{display:block;width:20px;height:20px;color:var(--sponsor);cursor:pointer}:host ::ng-deep .DocSearch-Button{margin:0;border:1px solid var(--
|
|
934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FSearchButtonComponent, isStandalone: true, selector: "f-search-button", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["searchContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (configuration()) {\n <div #searchContainer class=\"search-container\"></div>\n} @else {\n <a class=\"f-icon search fallback-search\" [routerLink]=\"[]\" fragment=\"search\" aria-label=\"Search\"></a>\n}\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}.search-container{display:inline-flex;justify-content:center;align-items:center}.fallback-search{display:block;width:20px;height:20px;color:var(--sponsor);cursor:pointer}:host ::ng-deep .DocSearch-Button{margin:0;border:1px solid var(--button-default-border);border-radius:999px;width:36px;min-width:36px;height:36px;padding:0 10px;background:var(--button-default-bg);color:var(--button-default-text);box-shadow:var(--shadow-1);transition:background-color .2s ease,border-color .2s ease,transform .2s ease;justify-content:flex-start}:host ::ng-deep .DocSearch-Button:hover{background:var(--button-default-hover-bg);border-color:var(--button-default-hover-border);transform:translateY(-1px)}:host ::ng-deep .DocSearch-Button-Placeholder,:host ::ng-deep .DocSearch-Button-Keys{display:none}:host ::ng-deep .DocSearch-Search-Icon{width:18px;height:18px}@media(min-width:768px){:host ::ng-deep .DocSearch-Button{width:min(240px,28vw);min-width:180px;padding:0 12px;gap:10px}:host ::ng-deep .DocSearch-Button-Placeholder{display:inline-block;font-size:14px;font-weight:500;color:var(--secondary-text)}}@media(min-width:1024px){:host ::ng-deep .DocSearch-Button-Keys{display:flex;align-items:center;gap:4px;margin-left:auto}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
935
935
|
}
|
|
936
936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FSearchButtonComponent, decorators: [{
|
|
937
937
|
type: Component,
|
|
938
938
|
args: [{ selector: 'f-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
939
939
|
RouterLink,
|
|
940
|
-
], template: "@if (configuration()) {\n <div #searchContainer class=\"search-container\"></div>\n} @else {\n <a class=\"f-icon search fallback-search\" [routerLink]=\"[]\" fragment=\"search\" aria-label=\"Search\"></a>\n}\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}.search-container{display:inline-flex;justify-content:center;align-items:center}.fallback-search{display:block;width:20px;height:20px;color:var(--sponsor);cursor:pointer}:host ::ng-deep .DocSearch-Button{margin:0;border:1px solid var(--
|
|
940
|
+
], template: "@if (configuration()) {\n <div #searchContainer class=\"search-container\"></div>\n} @else {\n <a class=\"f-icon search fallback-search\" [routerLink]=\"[]\" fragment=\"search\" aria-label=\"Search\"></a>\n}\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}.search-container{display:inline-flex;justify-content:center;align-items:center}.fallback-search{display:block;width:20px;height:20px;color:var(--sponsor);cursor:pointer}:host ::ng-deep .DocSearch-Button{margin:0;border:1px solid var(--button-default-border);border-radius:999px;width:36px;min-width:36px;height:36px;padding:0 10px;background:var(--button-default-bg);color:var(--button-default-text);box-shadow:var(--shadow-1);transition:background-color .2s ease,border-color .2s ease,transform .2s ease;justify-content:flex-start}:host ::ng-deep .DocSearch-Button:hover{background:var(--button-default-hover-bg);border-color:var(--button-default-hover-border);transform:translateY(-1px)}:host ::ng-deep .DocSearch-Button-Placeholder,:host ::ng-deep .DocSearch-Button-Keys{display:none}:host ::ng-deep .DocSearch-Search-Icon{width:18px;height:18px}@media(min-width:768px){:host ::ng-deep .DocSearch-Button{width:min(240px,28vw);min-width:180px;padding:0 12px;gap:10px}:host ::ng-deep .DocSearch-Button-Placeholder{display:inline-block;font-size:14px;font-weight:500;color:var(--secondary-text)}}@media(min-width:1024px){:host ::ng-deep .DocSearch-Button-Keys{display:flex;align-items:center;gap:4px;margin-left:auto}}\n"] }]
|
|
941
941
|
}], propDecorators: { configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], _containerRef: [{ type: i0.ViewChild, args: ['searchContainer', { isSignal: true }] }] } });
|
|
942
942
|
let cachedDocSearchFactory = null;
|
|
943
943
|
async function loadDocSearch(documentRef) {
|
|
@@ -1157,7 +1157,7 @@ class HeaderComponent {
|
|
|
1157
1157
|
cancelAnimationFrame(this._rafId);
|
|
1158
1158
|
}
|
|
1159
1159
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HeaderComponent, isStandalone: true, selector: "f-header", viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_targetRef", first: true, predicate: ["target"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (emptyNavigation) {\n <f-brand-link class=\"empty-navigation-title\"\n [routerLink]=\"''\"\n [title]=\"title\"\n [logo]=\"image\" />\n} @else {\n <div class=\"portal-title\">\n <button hamburger-button></button>\n <div class=\"title text-ellipsis\">{{ title }}</div>\n </div>\n}\n\n@if (config.search) {\n <f-search-button [configuration]=\"config.searchConfiguration\"></f-search-button>\n <div class=\"divider search-divider\"></div>\n}\n\n<div class=\"collapsable-row\" #container>\n <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n @if (config.navigation) {\n <inline-menu />\n <div class=\"divider\"></div>\n }\n\n <button theme-button></button>\n <div class=\"divider\"></div>\n <media-links />\n </div>\n\n <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n <dropdown-menu />\n </div>\n</div>\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:0
|
|
1160
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HeaderComponent, isStandalone: true, selector: "f-header", viewQueries: [{ propertyName: "_containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_targetRef", first: true, predicate: ["target"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (emptyNavigation) {\n <f-brand-link class=\"empty-navigation-title\"\n [routerLink]=\"''\"\n [title]=\"title\"\n [logo]=\"image\" />\n} @else {\n <div class=\"portal-title\">\n <button hamburger-button></button>\n <div class=\"title text-ellipsis\">{{ title }}</div>\n </div>\n}\n\n@if (config.search) {\n <f-search-button [configuration]=\"config.searchConfiguration\"></f-search-button>\n <div class=\"divider search-divider\"></div>\n}\n\n<div class=\"collapsable-row\" #container>\n <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n @if (config.navigation) {\n <inline-menu />\n <div class=\"divider\"></div>\n }\n\n <button theme-button></button>\n <div class=\"divider\"></div>\n <media-links />\n </div>\n\n <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n <dropdown-menu />\n </div>\n</div>\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:0 20px;font-weight:600;color:var(--primary-text);height:var(--header-height);background-color:var(--surface-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--divider-color);box-shadow:0 1px 0 var(--alpha-02);z-index:var(--z-index-header)}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}.empty-navigation-title{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:260px;margin-left:auto;cursor:pointer}.portal-title{display:flex;justify-content:flex-start;align-items:center;gap:12px}@media(min-width:960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text);min-width:0}.divider{margin-right:8px;margin-left:8px;width:1px;height:18px;background-color:var(--divider-color);content:\"\"}@media(max-width:639px){.search-divider{margin-right:6px;margin-left:6px}}.collapsable-row{position:relative;width:100%;display:flex;justify-content:flex-end}.collapsable-row .target{display:flex;justify-content:flex-start;align-items:center;width:fit-content}.collapsable-row .target.hidden{position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap}.collapsable-row .fallback.hidden{display:none}\n"], dependencies: [{ kind: "component", type: HamburgerButton, selector: "button[hamburger-button]" }, { kind: "component", type: FBrandLinkComponent, selector: "f-brand-link", inputs: ["title", "logo", "ariaLabel", "logoAlt", "href", "routerLink"] }, { kind: "component", type: FSearchButtonComponent, selector: "f-search-button", inputs: ["configuration"] }, { kind: "component", type: ThemeButtonComponent, selector: "button[theme-button]" }, { kind: "component", type: InlineMenu, selector: "inline-menu" }, { kind: "component", type: DropdownMenu, selector: "dropdown-menu" }, { kind: "component", type: MediaLinks, selector: "media-links" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1161
1161
|
}
|
|
1162
1162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
1163
1163
|
type: Component,
|
|
@@ -1169,7 +1169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
1169
1169
|
InlineMenu,
|
|
1170
1170
|
DropdownMenu,
|
|
1171
1171
|
MediaLinks,
|
|
1172
|
-
], template: "@if (emptyNavigation) {\n <f-brand-link class=\"empty-navigation-title\"\n [routerLink]=\"''\"\n [title]=\"title\"\n [logo]=\"image\" />\n} @else {\n <div class=\"portal-title\">\n <button hamburger-button></button>\n <div class=\"title text-ellipsis\">{{ title }}</div>\n </div>\n}\n\n@if (config.search) {\n <f-search-button [configuration]=\"config.searchConfiguration\"></f-search-button>\n <div class=\"divider search-divider\"></div>\n}\n\n<div class=\"collapsable-row\" #container>\n <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n @if (config.navigation) {\n <inline-menu />\n <div class=\"divider\"></div>\n }\n\n <button theme-button></button>\n <div class=\"divider\"></div>\n <media-links />\n </div>\n\n <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n <dropdown-menu />\n </div>\n</div>\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;padding:0
|
|
1172
|
+
], template: "@if (emptyNavigation) {\n <f-brand-link class=\"empty-navigation-title\"\n [routerLink]=\"''\"\n [title]=\"title\"\n [logo]=\"image\" />\n} @else {\n <div class=\"portal-title\">\n <button hamburger-button></button>\n <div class=\"title text-ellipsis\">{{ title }}</div>\n </div>\n}\n\n@if (config.search) {\n <f-search-button [configuration]=\"config.searchConfiguration\"></f-search-button>\n <div class=\"divider search-divider\"></div>\n}\n\n<div class=\"collapsable-row\" #container>\n <div #target class=\"target\" [class.hidden]=\"initialized() && overflowed()\">\n @if (config.navigation) {\n <inline-menu />\n <div class=\"divider\"></div>\n }\n\n <button theme-button></button>\n <div class=\"divider\"></div>\n <media-links />\n </div>\n\n <div class=\"fallback\" [class.hidden]=\"!initialized() || !overflowed()\">\n <dropdown-menu />\n </div>\n</div>\n", styles: [":host{position:sticky;width:100%;top:0;display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:0 20px;font-weight:600;color:var(--primary-text);height:var(--header-height);background-color:var(--surface-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--divider-color);box-shadow:0 1px 0 var(--alpha-02);z-index:var(--z-index-header)}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}.empty-navigation-title{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;max-width:260px;margin-left:auto;cursor:pointer}.portal-title{display:flex;justify-content:flex-start;align-items:center;gap:12px}@media(min-width:960px){.portal-title{display:none}}.portal-title .title{font-weight:600;color:var(--primary-text);min-width:0}.divider{margin-right:8px;margin-left:8px;width:1px;height:18px;background-color:var(--divider-color);content:\"\"}@media(max-width:639px){.search-divider{margin-right:6px;margin-left:6px}}.collapsable-row{position:relative;width:100%;display:flex;justify-content:flex-end}.collapsable-row .target{display:flex;justify-content:flex-start;align-items:center;width:fit-content}.collapsable-row .target.hidden{position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap}.collapsable-row .fallback.hidden{display:none}\n"] }]
|
|
1173
1173
|
}], propDecorators: { _containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], _targetRef: [{ type: i0.ViewChild, args: ['target', { isSignal: true }] }] } });
|
|
1174
1174
|
|
|
1175
1175
|
class NavigationGroupComponent {
|
|
@@ -1179,23 +1179,23 @@ class NavigationGroupComponent {
|
|
|
1179
1179
|
this.isCollapsed.set(!this.isCollapsed());
|
|
1180
1180
|
}
|
|
1181
1181
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1182
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.collapsed": "isCollapsed()", "class.no-title": "!title()" } }, ngImport: i0, template: "@if (title()) {\n <header (click)=\"toggle()\">\n <span>{{ title() }}</span>\n <div class=\"flex-space\"></div>\n <div class=\"caret\">\n <span class=\"chevron-right caret-icon\"></span>\n </div>\n </header>\n}\n@if (!isCollapsed()) {\n <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:
|
|
1182
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NavigationGroupComponent, isStandalone: true, selector: "f-navigation-group", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.collapsed": "isCollapsed()", "class.no-title": "!title()" } }, ngImport: i0, template: "@if (title()) {\n <header (click)=\"toggle()\">\n <span>{{ title() }}</span>\n <div class=\"flex-space\"></div>\n <div class=\"caret\">\n <span class=\"chevron-right caret-icon\"></span>\n </div>\n </header>\n}\n@if (!isCollapsed()) {\n <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:18px;padding-bottom:18px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:none;margin-left:0}:host.collapsed,:host.no-title{padding-top:12px;padding-bottom:12px}header{font-weight:700;color:var(--tertiary-text);flex-grow:1;padding:0 8px 8px;line-height:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-4px;width:28px;height:28px;border-radius:999px;color:var(--tertiary-text);cursor:pointer;transition:color .25s,background-color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text);background-color:var(--gray-soft)}:host:hover .caret:hover{color:var(--primary-text)}:host .caret-icon{font-size:18px;transform:rotate(90deg);transition:transform .25s;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:18px;height:18px}:host.collapsed .caret-icon{transform:rotate(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1183
1183
|
}
|
|
1184
1184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationGroupComponent, decorators: [{
|
|
1185
1185
|
type: Component,
|
|
1186
1186
|
args: [{ selector: 'f-navigation-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1187
1187
|
'[class.collapsed]': 'isCollapsed()',
|
|
1188
1188
|
'[class.no-title]': '!title()',
|
|
1189
|
-
}, template: "@if (title()) {\n <header (click)=\"toggle()\">\n <span>{{ title() }}</span>\n <div class=\"flex-space\"></div>\n <div class=\"caret\">\n <span class=\"chevron-right caret-icon\"></span>\n </div>\n </header>\n}\n@if (!isCollapsed()) {\n <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:
|
|
1189
|
+
}, template: "@if (title()) {\n <header (click)=\"toggle()\">\n <span>{{ title() }}</span>\n <div class=\"flex-space\"></div>\n <div class=\"caret\">\n <span class=\"chevron-right caret-icon\"></span>\n </div>\n </header>\n}\n@if (!isCollapsed()) {\n <ng-content></ng-content>\n}\n\n\n\n", styles: [":host{padding-top:18px;padding-bottom:18px;border-top:1px solid var(--divider-color);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;max-width:none;margin-left:0}:host.collapsed,:host.no-title{padding-top:12px;padding-bottom:12px}header{font-weight:700;color:var(--tertiary-text);flex-grow:1;padding:0 8px 8px;line-height:18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;width:100%}.caret{display:flex;justify-content:center;align-items:center;margin-right:-4px;width:28px;height:28px;border-radius:999px;color:var(--tertiary-text);cursor:pointer;transition:color .25s,background-color .25s;flex-shrink:0}:host:hover .caret{color:var(--secondary-text);background-color:var(--gray-soft)}:host:hover .caret:hover{color:var(--primary-text)}:host .caret-icon{font-size:18px;transform:rotate(90deg);transition:transform .25s;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:18px;height:18px}:host.collapsed .caret-icon{transform:rotate(0)}\n"] }]
|
|
1190
1190
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }] } });
|
|
1191
1191
|
|
|
1192
1192
|
class FNavigationItemComponent {
|
|
1193
1193
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FNavigationItemComponent, isStandalone: true, selector: "a[f-navigation-item]", ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:
|
|
1194
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FNavigationItemComponent, isStandalone: true, selector: "a[f-navigation-item]", ngImport: i0, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:8px 10px;line-height:20px;font-size:14px;cursor:pointer;width:100%;border-radius:calc(var(--border-radius) - 2px);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}:host:hover{text-decoration:none;color:var(--primary-text);background-color:var(--gray-soft)}:host.active{color:var(--primary-text);background-color:var(--soft-background);box-shadow:inset 0 0 0 1px var(--divider-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1195
1195
|
}
|
|
1196
1196
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FNavigationItemComponent, decorators: [{
|
|
1197
1197
|
type: Component,
|
|
1198
|
-
args: [{ selector: 'a[f-navigation-item]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:
|
|
1198
|
+
args: [{ selector: 'a[f-navigation-item]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n\n\n\n", styles: [":host{font-weight:500;color:var(--secondary-text);flex-grow:1;padding:8px 10px;line-height:20px;font-size:14px;cursor:pointer;width:100%;border-radius:calc(var(--border-radius) - 2px);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:flex-start;gap:8px}:host:hover{text-decoration:none;color:var(--primary-text);background-color:var(--gray-soft)}:host.active{color:var(--primary-text);background-color:var(--soft-background);box-shadow:inset 0 0 0 1px var(--divider-color)}\n"] }]
|
|
1199
1199
|
}] });
|
|
1200
1200
|
|
|
1201
1201
|
class NavigationPanelComponent {
|
|
@@ -1258,7 +1258,7 @@ class NavigationPanelComponent {
|
|
|
1258
1258
|
new HandleNavigationLinksHandler().handle(new HandleNavigationLinksRequest(event, this._window, this._router));
|
|
1259
1259
|
}
|
|
1260
1260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1261
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "<a routerLink class=\"navigation-header\">\n <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n <f-navigation-group [title]=\"group.text\">\n @for (item of group.items; track item.link) {\n <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n <div class=\"text-ellipsis\">{{ item.text }}</div>\n @if (item.badge) {\n <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n }\n </a>\n }\n </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:
|
|
1261
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: NavigationPanelComponent, isStandalone: true, selector: "f-navigation-panel", host: { listeners: { "click": "_onDocumentClick($event)" } }, ngImport: i0, template: "<a routerLink class=\"navigation-header\">\n <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n <f-navigation-group [title]=\"group.text\">\n @for (item of group.items; track item.link) {\n <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n <div class=\"text-ellipsis\">{{ item.text }}</div>\n @if (item.badge) {\n <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n }\n </a>\n }\n </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding) 40px;background-color:var(--navigation-panel-background);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid var(--divider-color);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none;box-shadow:var(--shadow-4)}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:var(--navigation-panel-width);box-shadow:none;transform:none!important}}@media(min-width:1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;margin-left:0;cursor:pointer}.navigation-header img{margin-right:0}\n"], dependencies: [{ kind: "component", type: FNavigationItemComponent, selector: "a[f-navigation-item]" }, { kind: "component", type: NavigationGroupComponent, selector: "f-navigation-group", inputs: ["title"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1262
1262
|
}
|
|
1263
1263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NavigationPanelComponent, decorators: [{
|
|
1264
1264
|
type: Component,
|
|
@@ -1266,7 +1266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
1266
1266
|
FNavigationItemComponent,
|
|
1267
1267
|
NavigationGroupComponent,
|
|
1268
1268
|
RouterLink,
|
|
1269
|
-
], template: "<a routerLink class=\"navigation-header\">\n <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n <f-navigation-group [title]=\"group.text\">\n @for (item of group.items; track item.link) {\n <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n <div class=\"text-ellipsis\">{{ item.text }}</div>\n @if (item.badge) {\n <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n }\n </a>\n }\n </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding);background-color:var(--navigation-panel-background);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:
|
|
1269
|
+
], template: "<a routerLink class=\"navigation-header\">\n <img [src]=\"image\" width=\"24\" height=\"24\" alt=\"logo\" class=\"logo\"/> {{ title }}\n</a>\n\n@for (group of navigation; track group) {\n <f-navigation-group [title]=\"group.text\">\n @for (item of group.items; track item.link) {\n <a f-navigation-item [href]=\"item.link\" [class.active]=\"item.link === value\">\n <div class=\"text-ellipsis\">{{ item.text }}</div>\n @if (item.badge) {\n <span class=\"f-badge {{ item.badge.type }}\">{{ item.badge.text }}</span>\n }\n </a>\n }\n </f-navigation-group>\n}\n\n", styles: [":host{height:100%;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:0 var(--navigation-panel-padding) 40px;background-color:var(--navigation-panel-background);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid var(--divider-color);overflow:hidden;overflow-y:auto;position:fixed;width:var(--navigation-panel-width);top:0;left:calc(-1 * var(--navigation-panel-width));transition:transform .2s ease-in-out;z-index:var(--z-index-navigation);transform:none;box-shadow:var(--shadow-4)}@media(min-width:960px){:host{position:unset;display:flex;min-width:var(--navigation-panel-width);width:var(--navigation-panel-width);box-shadow:none;transform:none!important}}@media(min-width:1440px){:host{min-width:calc((100% - (var(--layout-max-width) - 64px)) / 3 + var(--navigation-panel-width) - var(--navigation-panel-padding))}}:host.visible{transform:translate(var(--navigation-panel-width))}.navigation-header{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:0;font-weight:600;color:var(--primary-text);height:var(--header-height);width:100%;margin-left:0;cursor:pointer}.navigation-header img{margin-right:0}\n"] }]
|
|
1270
1270
|
}], propDecorators: { _onDocumentClick: [{
|
|
1271
1271
|
type: HostListener,
|
|
1272
1272
|
args: ['click', ['$event']]
|
|
@@ -2357,7 +2357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
2357
2357
|
class CodeView {
|
|
2358
2358
|
_httpClient = inject(HttpClient);
|
|
2359
2359
|
_destroyRef = inject(DestroyRef);
|
|
2360
|
-
|
|
2360
|
+
_copyFeedbackTimeout = null;
|
|
2361
2361
|
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
|
|
2362
2362
|
height = computed(() => {
|
|
2363
2363
|
return coerceComponentHeight(this.data()?.height);
|
|
@@ -2365,6 +2365,14 @@ class CodeView {
|
|
|
2365
2365
|
content = signal('', ...(ngDevMode ? [{ debugName: "content" }] : []));
|
|
2366
2366
|
visibleLanguage = signal('', ...(ngDevMode ? [{ debugName: "visibleLanguage" }] : []));
|
|
2367
2367
|
syntaxLanguage = signal('', ...(ngDevMode ? [{ debugName: "syntaxLanguage" }] : []));
|
|
2368
|
+
copyButtonLabel = signal('Copy', ...(ngDevMode ? [{ debugName: "copyButtonLabel" }] : []));
|
|
2369
|
+
constructor() {
|
|
2370
|
+
this._destroyRef.onDestroy(() => {
|
|
2371
|
+
if (this._copyFeedbackTimeout) {
|
|
2372
|
+
clearTimeout(this._copyFeedbackTimeout);
|
|
2373
|
+
}
|
|
2374
|
+
});
|
|
2375
|
+
}
|
|
2368
2376
|
ngOnInit() {
|
|
2369
2377
|
this._updateLanguage();
|
|
2370
2378
|
this._updateNotExistingData(this.data());
|
|
@@ -2395,10 +2403,20 @@ class CodeView {
|
|
|
2395
2403
|
this._copyContentToClipboard(this.content());
|
|
2396
2404
|
}
|
|
2397
2405
|
_copyContentToClipboard(content) {
|
|
2398
|
-
copyToClipboard(content).pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe(() => this.
|
|
2406
|
+
copyToClipboard(content).pipe(take(1), takeUntilDestroyed(this._destroyRef)).subscribe(() => this._setCopiedFeedback());
|
|
2407
|
+
}
|
|
2408
|
+
_setCopiedFeedback() {
|
|
2409
|
+
this.copyButtonLabel.set('Copied');
|
|
2410
|
+
if (this._copyFeedbackTimeout) {
|
|
2411
|
+
clearTimeout(this._copyFeedbackTimeout);
|
|
2412
|
+
}
|
|
2413
|
+
this._copyFeedbackTimeout = setTimeout(() => {
|
|
2414
|
+
this.copyButtonLabel.set('Copy');
|
|
2415
|
+
this._copyFeedbackTimeout = null;
|
|
2416
|
+
}, 1500);
|
|
2399
2417
|
}
|
|
2400
2418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodeView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CodeView, isStandalone: true, selector: "code-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height()" }, classAttribute: "f-code-view" }, ngImport: i0, template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" (click)=\"onCopyClick()\"
|
|
2419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CodeView, isStandalone: true, selector: "code-view", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height": "height()" }, classAttribute: "f-code-view" }, ngImport: i0, template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" type=\"button\" (click)=\"onCopyClick()\">{{ copyButtonLabel() }}</button>\n@if (content()) {\n <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n", dependencies: [{ kind: "component", type: Highlight, selector: "highlight", inputs: ["content", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2402
2420
|
}
|
|
2403
2421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CodeView, decorators: [{
|
|
2404
2422
|
type: Component,
|
|
@@ -2407,8 +2425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
2407
2425
|
'[style.height]': 'height()',
|
|
2408
2426
|
}, imports: [
|
|
2409
2427
|
Highlight,
|
|
2410
|
-
], template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" (click)=\"onCopyClick()\"
|
|
2411
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
2428
|
+
], template: "<span class=\"f-code-language\">{{ visibleLanguage() }}</span>\n<button class=\"f-copy-button\" type=\"button\" (click)=\"onCopyClick()\">{{ copyButtonLabel() }}</button>\n@if (content()) {\n <highlight [content]=\"content()\" [language]=\"syntaxLanguage()\"/>\n}\n" }]
|
|
2429
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
2412
2430
|
function coerceComponentHeight(value) {
|
|
2413
2431
|
if (value === undefined || value === null) {
|
|
2414
2432
|
return undefined;
|
|
@@ -3509,11 +3527,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
3509
3527
|
class TableOfContentItemsComponent {
|
|
3510
3528
|
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
3511
3529
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContentItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item.hash) {\n <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n @if (item.children) {\n <ul f-table-of-content-items [items]=\"item.children\"></ul>\n }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:
|
|
3530
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableOfContentItemsComponent, isStandalone: true, selector: "ul[f-table-of-content-items]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item.hash) {\n <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n @if (item.children) {\n <ul f-table-of-content-items [items]=\"item.children\"></ul>\n }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:200px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:13px;color:inherit;font-weight:500;transition:color .2s ease}:host li:hover{color:var(--primary-text)}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 0 0 14px}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3513
3531
|
}
|
|
3514
3532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContentItemsComponent, decorators: [{
|
|
3515
3533
|
type: Component,
|
|
3516
|
-
args: [{ selector: 'ul[f-table-of-content-items]', changeDetection: ChangeDetectionStrategy.Default, standalone: true, template: "@for (item of items(); track item.hash) {\n <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n @if (item.children) {\n <ul f-table-of-content-items [items]=\"item.children\"></ul>\n }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:
|
|
3534
|
+
args: [{ selector: 'ul[f-table-of-content-items]', changeDetection: ChangeDetectionStrategy.Default, standalone: true, template: "@for (item of items(); track item.hash) {\n <li [class.active]=\"item.isActive\"><a class=\"text-ellipsis\" [href]=\"item.hash\">{{ item.title }}</a></li>\n @if (item.children) {\n <ul f-table-of-content-items [items]=\"item.children\"></ul>\n }\n}\n", styles: [":host{list-style:none;margin:0;padding:0}:host li{overflow-wrap:break-word;color:var(--secondary-text);max-width:200px}:host li a{display:block;line-height:var(--on-page-navigation-item-height);font-size:13px;color:inherit;font-weight:500;transition:color .2s ease}:host li:hover{color:var(--primary-text)}:host li.active{color:var(--primary-text)}:host li+ul{padding:0 0 0 14px}\n"] }]
|
|
3517
3535
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
|
|
3518
3536
|
|
|
3519
3537
|
const TABLE_OF_CONTENT_MODULE_PROVIDERS = [
|
|
@@ -3554,11 +3572,11 @@ class TableOfContent {
|
|
|
3554
3572
|
this._mediatr.execute(new ScrollToElementInContainerRequest(hash));
|
|
3555
3573
|
}
|
|
3556
3574
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3557
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableOfContent, isStandalone: true, selector: "table-of-content", host: { listeners: { "click": "_click($event)" } }, ngImport: i0, template: "@let data = tocData();\n@if (data) {\n <div class=\"title\">{{ title || 'In this article' }}</div>\n <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height:
|
|
3575
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableOfContent, isStandalone: true, selector: "table-of-content", host: { listeners: { "click": "_click($event)" } }, ngImport: i0, template: "@let data = tocData();\n@if (data) {\n <div class=\"title\">{{ title || 'In this article' }}</div>\n <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 30px;display:none;padding-left:18px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative;max-height:calc(100vh - var(--header-height) - 48px);overflow-y:auto}:host .title{line-height:20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tertiary-text);margin-bottom:12px}@media(min-width:1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 32px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-text);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"], dependencies: [{ kind: "component", type: TableOfContentItemsComponent, selector: "ul[f-table-of-content-items]", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3558
3576
|
}
|
|
3559
3577
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableOfContent, decorators: [{
|
|
3560
3578
|
type: Component,
|
|
3561
|
-
args: [{ selector: 'table-of-content', standalone: true, imports: [TableOfContentItemsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let data = tocData();\n@if (data) {\n <div class=\"title\">{{ title || 'In this article' }}</div>\n <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height:
|
|
3579
|
+
args: [{ selector: 'table-of-content', standalone: true, imports: [TableOfContentItemsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let data = tocData();\n@if (data) {\n <div class=\"title\">{{ title || 'In this article' }}</div>\n <ul f-table-of-content-items [items]=\"data.tree\"></ul>\n <div class=\"active-marker\" [style.top]=\"activeMarkerPosition() + 'px'\"></div>\n}\n\n", styles: [":host{--on-page-navigation-item-height: 30px;display:none;padding-left:18px;border-left:1px solid var(--divider-color);font-size:13px;font-weight:500;position:relative;max-height:calc(100vh - var(--header-height) - 48px);overflow-y:auto}:host .title{line-height:20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tertiary-text);margin-bottom:12px}@media(min-width:1280px){:host{display:block;width:var(--on-page-navigation-width);position:fixed;top:calc(var(--header-height) + 32px);right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 3)}}:host .active-marker{position:absolute;top:0;left:0;width:2px;height:calc(var(--on-page-navigation-item-height) / 2);border-radius:2px;background-color:var(--primary-text);transition:top .25s cubic-bezier(0,1,.5,1),opacity .25s}\n"] }]
|
|
3562
3580
|
}], propDecorators: { _click: [{
|
|
3563
3581
|
type: HostListener,
|
|
3564
3582
|
args: ['click', ['$event']]
|
|
@@ -3665,13 +3683,13 @@ class MarkdownRenderer {
|
|
|
3665
3683
|
this._dynamicComponents.dispose();
|
|
3666
3684
|
}
|
|
3667
3685
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MarkdownRenderer, isStandalone: true, selector: "markdown-renderer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "<div [innerHTML]=\"value()\"></div>\n@if (origin(); as pageOrigin) {\n <aside class=\"origin-link\" role=\"note\">\n <span class=\"origin-link-icon\" aria-hidden=\"true\"></span>\n <div class=\"origin-link-content\">\n <span class=\"origin-link-label\">{{ pageOrigin.label }}</span>\n <a class=\"origin-link-url\"\n [href]=\"pageOrigin.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n </div>\n </aside>\n}\n@if (value()) {\n <markdown-footer />\n}\n", styles: [":host{display:block;width:100
|
|
3686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: MarkdownRenderer, isStandalone: true, selector: "markdown-renderer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_onDocumentClick($event)" }, classAttribute: "m-render" }, ngImport: i0, template: "<div [innerHTML]=\"value()\"></div>\n@if (origin(); as pageOrigin) {\n <aside class=\"origin-link\" role=\"note\">\n <span class=\"origin-link-icon\" aria-hidden=\"true\"></span>\n <div class=\"origin-link-content\">\n <span class=\"origin-link-label\">{{ pageOrigin.label }}</span>\n <a class=\"origin-link-url\"\n [href]=\"pageOrigin.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n </div>\n </aside>\n}\n@if (value()) {\n <markdown-footer />\n}\n", styles: [":host{display:block;width:100%;max-width:960px}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:1040px}.origin-link{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin-top:28px;border:1px solid var(--divider-color);border-radius:calc(var(--border-radius) + 2px);padding:14px 16px;background:var(--surface-glass-strong);box-shadow:var(--shadow-1);line-height:20px;font-size:14px}.origin-link-icon{flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:999px;background-color:var(--primary-text);color:var(--neutral-inverse);font-size:10px;font-weight:700;letter-spacing:.06em}.origin-link-icon:before{content:\"SRC\"}.origin-link-content{min-width:0}.origin-link-label{display:block;color:var(--secondary-text);font-weight:600}.origin-link-url{display:inline-block;margin-top:2px;color:var(--primary-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .2s ease}.origin-link-url:hover{color:var(--primary-text)}@media(max-width:639px){.origin-link{margin-top:24px;border-radius:8px;padding:10px 12px;gap:10px}.origin-link-icon{width:24px;height:24px;font-size:9px}}\n"], dependencies: [{ kind: "component", type: MarkdownFooter, selector: "markdown-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3669
3687
|
}
|
|
3670
3688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRenderer, decorators: [{
|
|
3671
3689
|
type: Component,
|
|
3672
3690
|
args: [{ selector: 'markdown-renderer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MarkdownFooter], host: {
|
|
3673
3691
|
class: 'm-render',
|
|
3674
|
-
}, template: "<div [innerHTML]=\"value()\"></div>\n@if (origin(); as pageOrigin) {\n <aside class=\"origin-link\" role=\"note\">\n <span class=\"origin-link-icon\" aria-hidden=\"true\"></span>\n <div class=\"origin-link-content\">\n <span class=\"origin-link-label\">{{ pageOrigin.label }}</span>\n <a class=\"origin-link-url\"\n [href]=\"pageOrigin.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n </div>\n </aside>\n}\n@if (value()) {\n <markdown-footer />\n}\n", styles: [":host{display:block;width:100
|
|
3692
|
+
}, template: "<div [innerHTML]=\"value()\"></div>\n@if (origin(); as pageOrigin) {\n <aside class=\"origin-link\" role=\"note\">\n <span class=\"origin-link-icon\" aria-hidden=\"true\"></span>\n <div class=\"origin-link-content\">\n <span class=\"origin-link-label\">{{ pageOrigin.label }}</span>\n <a class=\"origin-link-url\"\n [href]=\"pageOrigin.url\"\n target=\"_blank\"\n rel=\"noopener noreferrer nofollow\">{{ pageOrigin.url }}</a>\n </div>\n </aside>\n}\n@if (value()) {\n <markdown-footer />\n}\n", styles: [":host{display:block;width:100%;max-width:960px}@media(min-width:1280px){:host{width:calc(100% - var(--on-page-navigation-width) - var(--page-padding))}}@media(min-width:1280px){:host.expand-no-toc{width:100%}}:host.empty-navigation{margin:auto;max-width:1040px}.origin-link{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin-top:28px;border:1px solid var(--divider-color);border-radius:calc(var(--border-radius) + 2px);padding:14px 16px;background:var(--surface-glass-strong);box-shadow:var(--shadow-1);line-height:20px;font-size:14px}.origin-link-icon{flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:999px;background-color:var(--primary-text);color:var(--neutral-inverse);font-size:10px;font-weight:700;letter-spacing:.06em}.origin-link-icon:before{content:\"SRC\"}.origin-link-content{min-width:0}.origin-link-label{display:block;color:var(--secondary-text);font-weight:600}.origin-link-url{display:inline-block;margin-top:2px;color:var(--primary-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .2s ease}.origin-link-url:hover{color:var(--primary-text)}@media(max-width:639px){.origin-link{margin-top:24px;border-radius:8px;padding:10px 12px;gap:10px}.origin-link-icon{width:24px;height:24px;font-size:9px}}\n"] }]
|
|
3675
3693
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], origin: [{ type: i0.Input, args: [{ isSignal: true, alias: "origin", required: false }] }], _onDocumentClick: [{
|
|
3676
3694
|
type: HostListener,
|
|
3677
3695
|
args: ['click', ['$event']]
|
|
@@ -3698,7 +3716,7 @@ class MarkdownRouter {
|
|
|
3698
3716
|
}), tap(() => this._metaService?.applyMarkdownSeo(this._markdown.pageSeo())));
|
|
3699
3717
|
})), { initialValue: undefined });
|
|
3700
3718
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRouter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3701
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: MarkdownRouter, isStandalone: true, selector: "markdown-router", host: { attributes: { "ngSkipHydration": "" }, properties: { "class.empty-navigation": "emptyNavigation" } }, ngImport: i0, template: "<markdown-renderer [value]=\"html()\"\n [origin]=\"pageOrigin()\"\n [class.empty-navigation]=\"emptyNavigation\"\n [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:
|
|
3719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: MarkdownRouter, isStandalone: true, selector: "markdown-router", host: { attributes: { "ngSkipHydration": "" }, properties: { "class.empty-navigation": "emptyNavigation" } }, ngImport: i0, template: "<markdown-renderer [value]=\"html()\"\n [origin]=\"pageOrigin()\"\n [class.empty-navigation]=\"emptyNavigation\"\n [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:36px var(--page-padding) 120px}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"], dependencies: [{ kind: "component", type: MarkdownRenderer, selector: "markdown-renderer", inputs: ["value", "origin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3702
3720
|
}
|
|
3703
3721
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: MarkdownRouter, decorators: [{
|
|
3704
3722
|
type: Component,
|
|
@@ -3707,7 +3725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
3707
3725
|
'[class.empty-navigation]': 'emptyNavigation',
|
|
3708
3726
|
}, imports: [
|
|
3709
3727
|
MarkdownRenderer,
|
|
3710
|
-
], template: "<markdown-renderer [value]=\"html()\"\n [origin]=\"pageOrigin()\"\n [class.empty-navigation]=\"emptyNavigation\"\n [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:
|
|
3728
|
+
], template: "<markdown-renderer [value]=\"html()\"\n [origin]=\"pageOrigin()\"\n [class.empty-navigation]=\"emptyNavigation\"\n [class.expand-no-toc]=\"shouldExpandContent()\"/>\n", styles: [":host{display:block;width:100%;padding:36px var(--page-padding) 120px}@media(min-width:1280px){:host{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 4)}}@media(min-width:1280px){:host.empty-navigation{padding-right:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2);padding-left:max(var(--page-padding),(100vw - var(--layout-max-width)) / 2)}}\n"] }]
|
|
3711
3729
|
}] });
|
|
3712
3730
|
|
|
3713
3731
|
var index$2 = /*#__PURE__*/Object.freeze({
|
|
@@ -3772,7 +3790,7 @@ class Documentation {
|
|
|
3772
3790
|
deps: [DocumentationStore],
|
|
3773
3791
|
useFactory: (store) => store.getShowcaseItems(),
|
|
3774
3792
|
},
|
|
3775
|
-
], ngImport: i0, template: "@if (!emptyNavigation) {\n <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:
|
|
3793
|
+
], ngImport: i0, template: "@if (!emptyNavigation) {\n <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:stretch;height:100%;gap:0}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media(min-width:960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--surface-glass-strong);border:1px solid var(--divider-color);box-shadow:var(--shadow-2);color:var(--primary-text);font-size:14px;padding:8px 12px;border-radius:999px;z-index:var(--z-index-popover);opacity:1}\n"], dependencies: [{ kind: "component", type: NavigationPanelComponent, selector: "f-navigation-panel" }, { kind: "component", type: ScrollableContainer, selector: "scrollable-container" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: HeaderComponent, selector: "f-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./foblex-m-render-cookie-popup-DzpgC1SS.mjs').then(m => m.CookiePopup)]] });
|
|
3776
3794
|
}
|
|
3777
3795
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.4", ngImport: i0, type: Documentation, resolveDeferredDeps: () => [import('./foblex-m-render-cookie-popup-DzpgC1SS.mjs').then(m => m.CookiePopup)], resolveMetadata: CookiePopup => ({ decorators: [{
|
|
3778
3796
|
type: Component,
|
|
@@ -3813,7 +3831,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.4", ng
|
|
|
3813
3831
|
RouterOutlet,
|
|
3814
3832
|
HeaderComponent,
|
|
3815
3833
|
CookiePopup,
|
|
3816
|
-
], template: "@if (!emptyNavigation) {\n <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:
|
|
3834
|
+
], template: "@if (!emptyNavigation) {\n <f-navigation-panel [class.visible]=\"isNavigationVisible()\"/>\n <div class=\"f-backdrop\" [class.visible]=\"isNavigationVisible()\" (click)=\"onToggleNavigation(false)\"></div>\n}\n\n<scrollable-container>\n <f-header [class.empty-navigation]=\"emptyNavigation\"/>\n <router-outlet/>\n</scrollable-container>\n\n@if (popover()) {\n <div class=\"popover\">{{ popover() }}</div>\n}\n@defer (when isBrowser) {\n <cookie-popup/>\n}\n", styles: [":host{display:flex;justify-content:flex-start;align-items:stretch;height:100%;gap:0}.f-backdrop{position:fixed;inset:0;opacity:0;z-index:var(--z-index-backdrop);background:var(--backdrop-color);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s ease-in-out;pointer-events:none}.f-backdrop.visible{opacity:1;pointer-events:all}@media(min-width:960px){.f-backdrop{position:unset}}.popover{position:fixed;min-width:120px;bottom:50%;left:50%;text-align:center;transform:translate(-50%,-50%);background-color:var(--surface-glass-strong);border:1px solid var(--divider-color);box-shadow:var(--shadow-2);color:var(--primary-text);font-size:14px;padding:8px 12px;border-radius:999px;z-index:var(--z-index-popover);opacity:1}\n"] }]
|
|
3817
3835
|
}], ctorParameters: null, propDecorators: null }) });
|
|
3818
3836
|
|
|
3819
3837
|
const DOCUMENTATION_ROUTES = [
|
|
@@ -4036,25 +4054,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
|
|
|
4036
4054
|
class FHomePageHeroComponent {
|
|
4037
4055
|
viewModel = inject(HomeStore).getHero();
|
|
4038
4056
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageHeroComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4039
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FHomePageHeroComponent, isStandalone: true, selector: "f-home-page-hero", ngImport: i0, template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media(min-width:640px){:host{padding:0;width:100%}}@media(min-width:960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media(min-width:640px){.powered,h1{line-height:56px;font-size:48px}}@media(min-width:960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background
|
|
4057
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: FHomePageHeroComponent, isStandalone: true, selector: "f-home-page-hero", ngImport: i0, template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media(min-width:640px){:host{padding:0;width:100%}}@media(min-width:960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media(min-width:640px){.powered,h1{line-height:56px;font-size:48px}}@media(min-width:960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background:linear-gradient(135deg,var(--primary-text) 0%,var(--secondary-text) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media(min-width:640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media(min-width:960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"], dependencies: [{ kind: "component", type: FHomePageButtonsRowComponent, selector: "f-home-page-buttons-row" }] });
|
|
4040
4058
|
}
|
|
4041
4059
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageHeroComponent, decorators: [{
|
|
4042
4060
|
type: Component,
|
|
4043
4061
|
args: [{ selector: 'f-home-page-hero', standalone: true, imports: [
|
|
4044
4062
|
FHomePageButtonsRowComponent,
|
|
4045
|
-
], template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media(min-width:640px){:host{padding:0;width:100%}}@media(min-width:960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media(min-width:640px){.powered,h1{line-height:56px;font-size:48px}}@media(min-width:960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background
|
|
4063
|
+
], template: "<h1>{{ viewModel.headline }}</h1>\n<p class=\"powered\">{{ viewModel.tagline1 }}</p>\n<p class=\"powered\">{{ viewModel.tagline2 }}</p>\n<p class=\"second-description\">{{ viewModel.subDescription }}</p>\n<f-home-page-buttons-row></f-home-page-buttons-row>\n", styles: [":host{display:block;width:100%;padding:0 10px}@media(min-width:640px){:host{padding:0;width:100%}}@media(min-width:960px){:host{width:50%}}.powered,h1{letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;width:fit-content;margin:0 auto;text-align:center;white-space:pre-wrap;pointer-events:all}@media(min-width:640px){.powered,h1{line-height:56px;font-size:48px}}@media(min-width:960px){.powered,h1{line-height:64px;font-size:56px;margin:0;text-align:left}}h1{background:linear-gradient(135deg,var(--primary-text) 0%,var(--secondary-text) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.second-description{line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--secondary-text);margin:0 auto;width:fit-content;pointer-events:all;text-align:center;padding:8px 16px 0}@media(min-width:640px){.second-description{padding-top:12px;line-height:32px;font-size:20px}}@media(min-width:960px){.second-description{line-height:36px;font-size:24px;margin:0;text-align:left;padding:8px 0 0}}\n"] }]
|
|
4046
4064
|
}] });
|
|
4047
4065
|
|
|
4048
4066
|
class FHomePageMembershipsComponent {
|
|
4049
4067
|
viewModel = inject(HomeStore).getMemberships();
|
|
4050
4068
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageMembershipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4051
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FHomePageMembershipsComponent, isStandalone: true, selector: "f-home-page-memberships", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"membership-list\">\n @for (membership of viewModel; track membership.id) {\n <div class=\"membership\">\n <h2>{{ membership.name }}</h2>\n <p>{{ membership.description }}</p>\n <div class=\"benefit-list\">\n @for (benefit of membership.benefits; track benefit) {\n <p class=\"benefit\">\u2705 {{ benefit }}</p>\n }\n </div>\n <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n </div>\n }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-
|
|
4069
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FHomePageMembershipsComponent, isStandalone: true, selector: "f-home-page-memberships", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"membership-list\">\n @for (membership of viewModel; track membership.id) {\n <div class=\"membership\">\n <h2>{{ membership.name }}</h2>\n <p>{{ membership.description }}</p>\n <div class=\"benefit-list\">\n @for (benefit of membership.benefits; track benefit) {\n <p class=\"benefit\">\u2705 {{ benefit }}</p>\n }\n </div>\n <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n </div>\n }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-text)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media(min-width:640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media(min-width:960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:10px}\n"] });
|
|
4052
4070
|
}
|
|
4053
4071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FHomePageMembershipsComponent, decorators: [{
|
|
4054
4072
|
type: Component,
|
|
4055
4073
|
args: [{ selector: 'f-home-page-memberships', standalone: true, host: {
|
|
4056
4074
|
'[class.display-none]': '!viewModel.length',
|
|
4057
|
-
}, template: "<div class=\"membership-list\">\n @for (membership of viewModel; track membership.id) {\n <div class=\"membership\">\n <h2>{{ membership.name }}</h2>\n <p>{{ membership.description }}</p>\n <div class=\"benefit-list\">\n @for (benefit of membership.benefits; track benefit) {\n <p class=\"benefit\">\u2705 {{ benefit }}</p>\n }\n </div>\n <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n </div>\n }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-
|
|
4075
|
+
}, template: "<div class=\"membership-list\">\n @for (membership of viewModel; track membership.id) {\n <div class=\"membership\">\n <h2>{{ membership.name }}</h2>\n <p>{{ membership.description }}</p>\n <div class=\"benefit-list\">\n @for (benefit of membership.benefits; track benefit) {\n <p class=\"benefit\">\u2705 {{ benefit }}</p>\n }\n </div>\n <a class=\"f-button\" [href]=\"membership.buttonRef\">{{ membership.buttonText }}</a>\n </div>\n }\n</div>\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .membership-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .membership{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px;position:relative;pointer-events:all}:host .membership h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .membership p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}:host .membership .price{color:var(--primary-text);font-size:1.2rem;font-weight:700;padding-top:16px}:host .membership .price span{font-weight:600;color:var(--primary-text)}:host .membership .benefit-list{display:flex;flex-direction:column;padding:16px 0}@media(min-width:640px){:host{padding:0 48px}:host .membership{width:calc(50% - 12px);min-width:unset}}@media(min-width:960px){:host{padding:0 64px}:host .membership{width:calc(25% - 12px);min-width:300px}}.ribbon{position:absolute;top:-10px;right:-10px;color:var(--button-primary-text);background-color:var(--button-primary-bg);padding:4px 8px;font-size:.8rem;border-radius:10px}\n"] }]
|
|
4058
4076
|
}] });
|
|
4059
4077
|
|
|
4060
4078
|
class HomeRootComponent {
|