@foblex/m-render 2.5.5 → 2.5.7

package/fesm2022/foblex-m-render.mjs

@@ -2702,69 +2702,76 @@ var index$1 = /*#__PURE__*/Object.freeze({
 const F_HOME_PAGE_ENVIRONMENT = new InjectionToken('F_HOME_PAGE_ENVIRONMENT');
 
 class FHomePageEnvironmentService {
-    environment;
-    http;
-    constructor(environment, http) {
-        this.environment = environment;
-        this.http = http;
-    }
+    _environment = inject(F_HOME_PAGE_ENVIRONMENT);
     getLogo() {
-        return this.environment.logo;
+        return this._environment.logo;
     }
     getTitle() {
-        return this.environment.title;
+        return this._environment.title;
     }
     getHero() {
-        return this.environment.hero;
+        return this._environment.hero;
     }
     getButtons() {
-        return this.environment.buttons;
+        return this._environment.buttons || [];
     }
     getFeatures() {
-        return this.environment.features;
+        return this._environment.features || [];
+    }
+    getMemberships() {
+        return this._environment.memberships || [];
     }
     getFooter() {
-        return this.environment.footer;
+        return this._environment.footer;
     }
     getBackgroundComponent() {
-        return this.environment.backgroundComponent;
+        return this._environment.backgroundComponent;
     }
     getImageComponent() {
-        return this.environment.heroImageComponent;
+        return this._environment.heroImageComponent;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, deps: [{ token: F_HOME_PAGE_ENVIRONMENT, optional: true }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageEnvironmentService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [F_HOME_PAGE_ENVIRONMENT]
-                }] }, { type: i1$1.HttpClient }] });
+        }] });
 
 class FHomePageFeaturesComponent {
     viewModel = inject(FHomePageEnvironmentService).getFeatures();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageFeaturesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", ngImport: i0, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:all}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageFeaturesComponent, isStandalone: true, selector: "f-home-page-features", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageFeaturesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'f-home-page-features', standalone: true, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:all}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] }]
+            args: [{ selector: 'f-home-page-features', standalone: true, host: {
+                        '[class.display-none]': '!viewModel.length',
+                    }, template: "<div class=\"feature-list\">\n  @for (feature of viewModel; track feature.headline) {\n    <div class=\"feature\">\n      <h2>{{ feature.headline }}</h2>\n      <p>{{ feature.description }}</p>\n    </div>\n  }\n</div>\n\n", styles: [":host{margin-top:64px;margin-bottom:64px;width:100%;display:block;padding:0 24px}:host .feature-list{margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;max-width:1248px;pointer-events:none}:host .feature{width:100%;border-radius:4px;background-color:var(--soft-background);display:flex;flex-direction:column;padding:24px}:host .feature h2{margin:0;line-height:24px;font-size:16px;font-weight:600}:host .feature p{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--secondary-text)}@media (min-width: 640px){:host{padding:0 48px}:host .feature{width:calc(50% - 12px)}}@media (min-width: 960px){:host{padding:0 64px}:host .feature{width:calc(25% - 12px)}}\n"] }]
+        }] });
+
+class FHomePageMembershipsComponent {
+    viewModel = inject(FHomePageEnvironmentService).getMemberships();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageMembershipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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}: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-color)}: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}}:host a{pointer-events:all}.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:2px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageMembershipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'f-home-page-memberships', standalone: true, host: {
+                        '[class.display-none]': '!viewModel.length',
+                    }, 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}: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-color)}: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}}:host a{pointer-events:all}.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:2px}\n"] }]
         }] });
 
 class FHomePageHeaderComponent {
     logo = inject(FHomePageEnvironmentService).getLogo();
     title = inject(FHomePageEnvironmentService).getTitle();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n  <span class=\"title\">{{ title }}</span>\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageHeaderComponent, isStandalone: true, selector: "header[f-home-page-header]", ngImport: i0, template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"/\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"], dependencies: [{ kind: "component", type: FThemeButtonComponent, selector: "button[f-theme-button]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'header[f-home-page-header]', standalone: true, imports: [
                         FThemeButtonComponent
-                    ], template: "<div class=\"content\">\n  <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n  <span class=\"title\">{{ title }}</span>\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
+                    ], template: "<div class=\"content\">\n  <a class=\"logo-link\" href=\"/\" aria-label=\"Home\">\n    <img [src]=\"logo\" class=\"logo\" alt=\"{{ title }} Logo\" width=\"24\" height=\"24\"/>\n    <span class=\"title\">{{ title }}</span>\n  </a>\n\n  <div class=\"flex-space\"></div>\n  <button f-theme-button aria-label=\"Change theme\"></button>\n</div>\n\n", styles: [":host{position:relative;z-index:5;padding:0 24px}:host .logo-link{display:flex;align-items:center;text-decoration:none}:host .content{display:flex;justify-content:flex-start;align-items:center;width:100%;height:64px;max-width:1376px;margin:0 auto}:host .logo{margin-right:8px}:host .title{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;font-size:16px;font-weight:600;color:var(--primary-text)}@media (min-width: 640px){:host{padding:0 48px}}@media (min-width: 960px){:host{padding:0 64px}}\n"] }]
         }] });
 
 class FHomePageFooterComponent {
@@ -2780,13 +2787,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class FHomePageButtonsRowComponent {
     viewModel = inject(FHomePageEnvironmentService).getButtons();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageButtonsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">{{ button.text }}</a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n\n}\n<!--<a class=\"f-button primary\" routerLink=\"/docs/get-started\">Get Started</a>-->\n<!--<a class=\"f-button\" routerLink=\"/examples/overview\">Examples</a>-->\n<!--<a class=\"f-button\" href=\"https://github.com/Foblex/m-render\">Github</a>-->\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FHomePageButtonsRowComponent, isStandalone: true, selector: "f-home-page-buttons-row", host: { properties: { "class.display-none": "!viewModel.length" } }, ngImport: i0, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}.f-button{display:flex;align-items:center;gap:6px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageButtonsRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page-buttons-row', standalone: true, imports: [
                         RouterLink
-                    ], template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">{{ button.text }}</a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n\n}\n<!--<a class=\"f-button primary\" routerLink=\"/docs/get-started\">Get Started</a>-->\n<!--<a class=\"f-button\" routerLink=\"/examples/overview\">Examples</a>-->\n<!--<a class=\"f-button\" href=\"https://github.com/Foblex/m-render\">Github</a>-->\n", styles: [":host{display:flex;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}\n"] }]
+                    ], host: {
+                        '[class.display-none]': '!viewModel.length',
+                    }, template: "@for (button of viewModel; track button.text) {\n  @if (button.routerLink) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" routerLink=\"{{ button.routerLink }}\">\n      @if (button.icon) {\n        <span class=\"f-icon {{ button.icon }}\"></span>\n      }\n      {{ button.text }}\n    </a>\n  } @else if(button.href) {\n    <a class=\"f-button\" [class.primary]=\"button.primary\" href=\"{{ button.href }}\">{{ button.text }}</a>\n  }\n}\n\n", styles: [":host{display:flex;flex-wrap:wrap;justify-content:center;padding-top:32px;gap:12px;width:fit-content;margin:0 auto}@media (min-width: 960px){:host{margin:0}}.f-button{display:flex;align-items:center;gap:6px}\n"] }]
         }] });
 
 class FHomePageHeroComponent {
@@ -2801,14 +2810,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], 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%}@media (min-width: 640px){:host{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:-webkit-linear-gradient(120deg,#bd34fe 30%,#41d1ff);background-clip:text;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"] }]
         }] });
 
-const F_HOME_PAGE_COMPONENT = new InjectionToken('F_HOME_PAGE_COMPONENT');
 class FHomePageComponent {
-    _environmentService = inject(FHomePageEnvironmentService);
+    _environment = inject(FHomePageEnvironmentService);
     _backgroundContainer;
     _heroImageContainer;
     ngAfterViewInit() {
-        this._renderImageComponent(this._environmentService.getImageComponent());
-        this._renderBackgroundComponent(this._environmentService.getBackgroundComponent());
+        this._renderImageComponent(this._environment.getImageComponent());
+        this._renderBackgroundComponent(this._environment.getBackgroundComponent());
     }
     _renderImageComponent(component) {
         if (component) {
@@ -2832,20 +2840,19 @@ class FHomePageComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FHomePageComponent, isStandalone: true, selector: "f-home-page", providers: [
             FHomePageEnvironmentService,
-            { provide: F_HOME_PAGE_COMPONENT, useExisting: FHomePageComponent }
-        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "_backgroundContainer", first: true, predicate: ["backgroundContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_heroImageContainer", first: true, predicate: ["heroImageContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"], dependencies: [{ kind: "component", type: FHomePageFooterComponent, selector: "footer[f-home-page-footer]" }, { kind: "component", type: FHomePageHeaderComponent, selector: "header[f-home-page-header]" }, { kind: "component", type: FHomePageFeaturesComponent, selector: "f-home-page-features" }, { kind: "component", type: FHomePageHeroComponent, selector: "f-home-page-hero" }, { kind: "component", type: FHomePageMembershipsComponent, selector: "f-home-page-memberships" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FHomePageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-home-page', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         FHomePageEnvironmentService,
-                        { provide: F_HOME_PAGE_COMPONENT, useExisting: FHomePageComponent }
                     ], imports: [
                         FHomePageFooterComponent,
                         FHomePageHeaderComponent,
                         FHomePageFeaturesComponent,
                         FHomePageHeroComponent,
-                    ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
+                        FHomePageMembershipsComponent,
+                    ], template: "<ng-container #backgroundContainer></ng-container>\n<header f-home-page-header></header>\n\n<div class=\"body\">\n  <div class=\"hero-row\">\n    <f-home-page-hero></f-home-page-hero>\n    <ng-container #heroImageContainer></ng-container>\n  </div>\n  <f-home-page-features></f-home-page-features>\n  <f-home-page-memberships></f-home-page-memberships>\n</div>\n\n<div class=\"flex-space\"></div>\n<footer f-home-page-footer></footer>\n", styles: [":host{display:flex;flex-direction:column;position:relative;width:100%;height:100%;min-height:100%;overflow:hidden;overflow-y:auto}.body{position:relative;z-index:3;pointer-events:none}@media (min-width: 960px){.body{margin-top:50px}}@media (min-width: 1376px){.body{margin-top:100px}}.hero-row{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 auto}@media (min-width: 960px){.hero-row{flex-direction:row;margin-left:64px;margin-right:64px}}@media (min-width: 1376px){.hero-row{flex-direction:row;margin-left:calc(50% - 624px);margin-right:calc(50% - 624px)}}\n"] }]
         }], propDecorators: { _backgroundContainer: [{
                 type: ViewChild,
                 args: ['backgroundContainer', { read: ViewContainerRef }]
@@ -2868,7 +2875,7 @@ var index = /*#__PURE__*/Object.freeze({
     FHomePageFeaturesComponent: FHomePageFeaturesComponent,
     FHomePageFooterComponent: FHomePageFooterComponent,
     FHomePageHeaderComponent: FHomePageHeaderComponent,
-    F_HOME_PAGE_COMPONENT: F_HOME_PAGE_COMPONENT,
+    FHomePageMembershipsComponent: FHomePageMembershipsComponent,
     F_HOME_PAGE_ENVIRONMENT: F_HOME_PAGE_ENVIRONMENT,
     F_HOME_PAGE_ROUTES: F_HOME_PAGE_ROUTES
 });
@@ -2877,5 +2884,5 @@ var index = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { CalculateHashFromScrollPositionHandler, CalculateHashFromScrollPositionRequest, ChangeCodeFocusedSyntaxPreProcessor, CookiePopup, EMarkdownContainerType, FAnalyticsService, FAsyncCodeViewHandler, FBadgeComponent, FCheckboxComponent, FCodeGroupBodyHandler, FCodeGroupHandler, FCodeViewHandler, FDocumentationComponent, FDocumentationEnvironmentService, FExampleViewHandler, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHamburgerButtonComponent, FHeadTagService, FHeaderComponent, FHeaderMenuComponent, FHomePageComponent, FHomePageEnvironmentService, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FJsonLdService, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationGroupComponent, FNavigationHeaderComponent, FNavigationItemComponent, FNavigationPanelComponent, FPageComponent, FPopoverService, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FScrollableContainerComponent, FSocialLinksComponent, FTableOfContentComponent, FTableOfContentItemsComponent, FThemeButtonComponent, FVersionComponent, F_ACCEPT_COOKIES_KEY, F_DOCS_ENVIRONMENT, F_DOCS_ROUTES, F_DOCUMENTATION_COMPONENT, F_HOME_PAGE_COMPONENT, F_HOME_PAGE_ENVIRONMENT, F_HOME_PAGE_ROUTES, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, GetTableOfContentDataHandler, GetTableOfContentDataRequest, GetVersionHandler, GetVersionRequest, HandleDynamicComponentsHandler, HandleDynamicComponentsRequest, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HandleParsedContainersHandler, HandleParsedContainersRequest, HighlightService, MarkCodeFocusedBlocksPostProcessor, MarkdownService, ModifyPunctuationHighlightPostProcessor, ParseAlerts, ParseCodeGroup, ParseCodeView, ParseExampleGroup, ParsePreviewGroup, ScrollToElementInContainer, SeparateCodeByLinesPostProcessor, TableOfContentData, copyToClipboard, getContent, setCookieConsent };
+export { CalculateHashFromScrollPositionHandler, CalculateHashFromScrollPositionRequest, ChangeCodeFocusedSyntaxPreProcessor, CookiePopup, EMarkdownContainerType, FAnalyticsService, FAsyncCodeViewHandler, FBadgeComponent, FCheckboxComponent, FCodeGroupBodyHandler, FCodeGroupHandler, FCodeViewHandler, FDocumentationComponent, FDocumentationEnvironmentService, FExampleViewHandler, FFooterEditInformationComponent, FFooterNavigationButtonComponent, FFooterNavigationComponent, FHamburgerButtonComponent, FHeadTagService, FHeaderComponent, FHeaderMenuComponent, FHomePageComponent, FHomePageEnvironmentService, FHomePageFeaturesComponent, FHomePageFooterComponent, FHomePageHeaderComponent, FHomePageMembershipsComponent, FJsonLdService, FMarkdownFooterComponent, FMarkdownRendererComponent, FMetaService, FNavigationGroupComponent, FNavigationHeaderComponent, FNavigationItemComponent, FNavigationPanelComponent, FPageComponent, FPopoverService, FPreviewBase, FPreviewComponent, FPreviewGroupFiltersComponent, FPreviewGroupService, FRadioButtonComponent, FScrollableContainerComponent, FSocialLinksComponent, FTableOfContentComponent, FTableOfContentItemsComponent, FThemeButtonComponent, FVersionComponent, F_ACCEPT_COOKIES_KEY, F_DOCS_ENVIRONMENT, F_DOCS_ROUTES, F_DOCUMENTATION_COMPONENT, F_HOME_PAGE_ENVIRONMENT, F_HOME_PAGE_ROUTES, GetAbsoluteTopToContainerHandler, GetAbsoluteTopToContainerRequest, GetPreviousNextPageNavigationHandler, GetPreviousNextPageNavigationRequest, GetPreviousNextPageNavigationResponse, GetTableOfContentDataHandler, GetTableOfContentDataRequest, GetVersionHandler, GetVersionRequest, HandleDynamicComponentsHandler, HandleDynamicComponentsRequest, HandleNavigationLinksHandler, HandleNavigationLinksRequest, HandleParsedContainersHandler, HandleParsedContainersRequest, HighlightService, MarkCodeFocusedBlocksPostProcessor, MarkdownService, ModifyPunctuationHighlightPostProcessor, ParseAlerts, ParseCodeGroup, ParseCodeView, ParseExampleGroup, ParsePreviewGroup, ScrollToElementInContainer, SeparateCodeByLinesPostProcessor, TableOfContentData, copyToClipboard, getContent, setCookieConsent };
 //# sourceMappingURL=foblex-m-render.mjs.map