@thescaffold/ngx-apps-blog 0.2.31 → 0.2.32

package/fesm2022/thescaffold-ngx-apps-blog-docs.module-CLrP53Ce.mjs

@@ -0,0 +1,710 @@
+import * as i0 from '@angular/core';
+import { inject, HostListener, Component, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import * as i4 from '@thescaffold/ngx-core';
+import { BaseDirective, MediaService, titleCase, SharedModule, PipesModule } from '@thescaffold/ngx-core';
+import * as i2 from '@thescaffold/ngx-ui';
+import { LayoutsModule, ElementsModule, ToolbarModule } from '@thescaffold/ngx-ui';
+import { combineLatest, map, switchMap } from 'rxjs';
+import * as i1 from '@angular/forms';
+import * as i1$2 from '@angular/common';
+
+class DocsComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.mediaService = inject(MediaService);
+        this.route = inject(ActivatedRoute);
+        this.navList = [];
+        this.showHeaders = true;
+        this.expandedSection = null;
+        this.expandedSubSection = null;
+        this.nav$ = combineLatest([
+            this.mediaService.context('blog').index(),
+            this.route.url,
+        ]).pipe(map(([content, _urlSegments]) => {
+            this.navList = content?.nav || [];
+            // Use full router URL instead of relative segments
+            const currentPath = this.router.url.split('?')[0].split('#')[0];
+            // Find and expand the section containing the current page
+            this.expandCurrentSection(this.navList, currentPath);
+            return this.navList;
+        }));
+        this.breadcrumbs$ = this.route.url.pipe(map((segments) => {
+            const breads = [
+                {
+                    title: this.translate('apps.blog.component.docs.home.title'),
+                    url: '/blog',
+                },
+                ...(segments.length > 1
+                    ? [
+                        {
+                            title: titleCase(segments[0].path.replace(/-/g, ' ')),
+                            url: `/${segments[0]}`,
+                        },
+                    ]
+                    : []),
+                ...(segments.length > 2
+                    ? [
+                        {
+                            title: titleCase(segments[1].path.replace(/-/g, ' ')),
+                            url: `/${segments[1]}`,
+                        },
+                    ]
+                    : []),
+                ...(segments.length > 3
+                    ? [
+                        {
+                            title: titleCase(segments[2].path.replace(/-/g, ' ')),
+                            url: `/${segments[2]}`,
+                        },
+                    ]
+                    : []),
+                {
+                    title: titleCase(segments[segments.length - 1].path.replace(/-/g, ' ')),
+                    url: null,
+                },
+            ];
+            return breads;
+        }));
+        this.docs$ = this.route.params.pipe(switchMap((params) => {
+            let name = '';
+            const sub1 = (this.currentNav = params['sub1']);
+            if (sub1) {
+                this.showHeaders = sub1.toLowerCase() != 'index';
+                name += sub1;
+            }
+            const sub2 = params['sub2'];
+            if (sub2) {
+                this.showHeaders = sub2.toLowerCase() != 'index';
+                name += `/${sub2}`;
+            }
+            const sub3 = params['sub3'];
+            if (sub3) {
+                this.showHeaders = sub3.toLowerCase() != 'index';
+                name += `/${sub3}`;
+            }
+            const sub4 = params['sub4'];
+            if (sub4) {
+                this.showHeaders = sub4.toLowerCase() != 'index';
+                name += `/${sub4}`;
+            }
+            const sub5 = params['sub5'];
+            if (sub5) {
+                this.showHeaders = sub5.toLowerCase() != 'index';
+                name += `/${sub5}`;
+            }
+            return this.mediaService.context('blog').article(name, true);
+        }));
+    }
+    /**
+     * Intercepts clicks on anchor tags within the documentation content
+     * and routes internal links via Angular Router instead of triggering
+     * a full page reload.
+     */
+    onContentClick(event) {
+        const target = event.target;
+        const anchor = target.closest('a');
+        if (!anchor)
+            return;
+        const href = anchor.getAttribute('href');
+        if (!href)
+            return;
+        // Check if it's an internal link (starts with /, ./, or ../)
+        if (href.startsWith('/') ||
+            href.startsWith('./') ||
+            href.startsWith('../')) {
+            event.preventDefault();
+            event.stopPropagation();
+            // Handle fragment links
+            const [path, fragment] = href.split('#');
+            const extras = {};
+            if (fragment) {
+                extras.fragment = fragment;
+            }
+            this.router.navigate([path || './'], extras);
+        }
+        else if (href.startsWith('#')) {
+            // Same-page fragment navigation
+            event.preventDefault();
+            event.stopPropagation();
+            this.router.navigate([], {
+                fragment: href.substring(1),
+                relativeTo: this.route,
+            });
+        }
+        // External links (http://, https://, etc.) will navigate normally
+    }
+    onSelectChange(event) {
+        const selectedUrl = event.target.value;
+        if (selectedUrl) {
+            this.router.navigate([selectedUrl]);
+        }
+    }
+    getLowestLevelHeaders(headers) {
+        if (headers.length === 0)
+            return [];
+        // Find the lowest level in the array
+        const minLevel = Math.min(...headers.map((header) => header.level));
+        // Filter headers by the lowest level
+        return headers.filter((header) => header.level == minLevel);
+    }
+    toggleSection(index) {
+        // Accordion behavior: close if already open, otherwise open this one and close others
+        if (this.expandedSection === index) {
+            this.expandedSection = null;
+        }
+        else {
+            this.expandedSection = index;
+            // Reset sub-section when changing main section
+            this.expandedSubSection = null;
+        }
+    }
+    toggleSubSection(sectionIndex, subIndex) {
+        const key = `${sectionIndex}-${subIndex}`;
+        // Accordion behavior: close if already open, otherwise open this one and close others
+        if (this.expandedSubSection === key) {
+            this.expandedSubSection = null;
+        }
+        else {
+            this.expandedSubSection = key;
+        }
+    }
+    expandCurrentSection(nav, currentPath) {
+        if (!nav?.length)
+            return;
+        // Normalize current path (remove trailing slash, handle base path)
+        const normalizedCurrentPath = currentPath.replace(/\/$/, '').toLowerCase();
+        for (let i = 0; i < nav.length; i++) {
+            const section = nav[i];
+            // Check if section URL matches
+            if (section.url && this.urlMatches(section.url, normalizedCurrentPath)) {
+                this.expandedSection = i;
+                return;
+            }
+            // Check links (level 2)
+            if (section.links?.length) {
+                for (let j = 0; j < section.links.length; j++) {
+                    const link = section.links[j];
+                    if (link.url && this.urlMatches(link.url, normalizedCurrentPath)) {
+                        this.expandedSection = i;
+                        if (link.links?.length) {
+                            this.expandedSubSection = `${i}-${j}`;
+                        }
+                        return;
+                    }
+                    // Check sub-links (level 3)
+                    if (link.links?.length) {
+                        for (const subLink of link.links) {
+                            if (subLink.url &&
+                                this.urlMatches(subLink.url, normalizedCurrentPath)) {
+                                this.expandedSection = i;
+                                this.expandedSubSection = `${i}-${j}`;
+                                return;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Default to first section if no match found
+        if (this.expandedSection === null && nav.length > 0) {
+            this.expandedSection = 0;
+        }
+    }
+    urlMatches(navUrl, currentPath) {
+        const normalizedNavUrl = navUrl.replace(/\/$/, '').toLowerCase();
+        return (normalizedNavUrl === currentPath ||
+            currentPath.startsWith(normalizedNavUrl + '/'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DocsComponent, isStandalone: false, selector: "x-docs", host: { listeners: { "click": "onContentClick($event)" } }, usesInheritance: true, ngImport: i0, template: `
+    <div class="x-docs row m-0 p-0">
+      <!-- Mobile Navigation Dropdown -->
+      @if (nav$ | async; as nav) {
+        <div
+          class="x-docs-mobile-nav col-12 col-lg-3 p-0 mb-3 sticky-top d-block d-lg-none"
+        >
+          @if (nav?.length) {
+            <div class="x-docs-mobile-nav-wrapper">
+              <i class="fa-solid fa-book-open x-docs-mobile-nav-icon"></i>
+              <select
+                (change)="onSelectChange($event)"
+                class="form-select x-docs-mobile-select"
+              >
+                <option value="" disabled selected>
+                  Navigate Documentation
+                </option>
+                @for (a of nav; track a) {
+                  <optgroup [label]="a.title">
+                    @if (!a?.links?.length) {
+                      <option [value]="a.url">
+                        {{ a.title }}
+                      </option>
+                    }
+                    @if (a?.links?.length) {
+                      @for (b of a.links; track b) {
+                        <option [value]="b.url">
+                          {{ b.title }}
+                        </option>
+                      }
+                      @for (b of a.links; track b) {
+                        @for (c of b.links; track c) {
+                          <option [value]="c.url">— {{ c.title }}</option>
+                        }
+                      }
+                    }
+                  </optgroup>
+                }
+              </select>
+            </div>
+          }
+        </div>
+      } @else {
+        <x-element-loader></x-element-loader>
+      }
+
+      <!-- Desktop Sidebar Navigation -->
+      @if (nav$ | async; as nav) {
+        <aside
+          class="x-docs-sidebar col-12 col-lg-3 sticky-top d-none d-lg-block p-0 m-0"
+        >
+          <nav class="x-docs-sidebar-nav" aria-label="Documentation navigation">
+            @if (nav?.length) {
+              @for (a of nav; track a; let i = $index) {
+                <div
+                  class="x-docs-nav-section"
+                  [class.collapsed]="expandedSection !== i"
+                >
+                  <button
+                    class="x-docs-nav-title-btn"
+                    type="button"
+                    (click)="toggleSection(i)"
+                    [attr.aria-expanded]="expandedSection === i"
+                    aria-controls="nav-section-{{ i }}"
+                  >
+                    <span
+                      class="x-docs-nav-title-text"
+                      [innerHTML]="a.title"
+                    ></span>
+                    <i
+                      class="fa-solid x-docs-nav-chevron"
+                      [class.fa-chevron-down]="expandedSection !== i"
+                      [class.fa-chevron-up]="expandedSection === i"
+                    ></i>
+                  </button>
+                  @if (a?.links?.length) {
+                    <ul class="x-docs-nav-list" [id]="'nav-section-' + i">
+                      @for (b of a?.links; track b; let j = $index) {
+                        <li
+                          class="x-docs-nav-item"
+                          [class.collapsed]="
+                            b?.links?.length &&
+                            expandedSubSection !== i + '-' + j
+                          "
+                        >
+                          @if (b?.links?.length) {
+                            <button
+                              class="x-docs-nav-link x-docs-nav-link-btn"
+                              type="button"
+                              (click)="toggleSubSection(i, j)"
+                              [attr.aria-expanded]="
+                                expandedSubSection === i + '-' + j
+                              "
+                              [class.has-children]="true"
+                            >
+                              <span [innerHTML]="b.title"></span>
+                              <i
+                                class="fa-solid x-docs-nav-sub-chevron"
+                                [class.fa-chevron-down]="
+                                  expandedSubSection !== i + '-' + j
+                                "
+                                [class.fa-chevron-up]="
+                                  expandedSubSection === i + '-' + j
+                                "
+                              ></i>
+                            </button>
+                            <ul class="x-docs-nav-sublist">
+                              @for (c of b.links; track c) {
+                                <li class="x-docs-nav-subitem">
+                                  <a
+                                    class="x-docs-child-nav x-docs-nav-sublink"
+                                    [routerLink]="c.url"
+                                    [routerLinkActive]="'active'"
+                                    [innerHTML]="c.title"
+                                  ></a>
+                                </li>
+                              }
+                            </ul>
+                          } @else {
+                            <a
+                              class="x-docs-parent-nav x-docs-nav-link"
+                              [routerLink]="b.url"
+                              [routerLinkActive]="'active'"
+                              [innerHTML]="b.title"
+                            ></a>
+                          }
+                        </li>
+                      }
+                    </ul>
+                  }
+                </div>
+              }
+            }
+          </nav>
+        </aside>
+      } @else {
+        <x-element-loader></x-element-loader>
+      }
+
+      <!-- Main Content Area -->
+      <main class="x-docs-main col-12 col-lg-9">
+        @if (docs$ | async; as docs) {
+          <div class="row">
+            <article class="x-docs-article col-12 col-lg-9">
+              <!-- Breadcrumbs -->
+              @if (breadcrumbs$ | async; as breadcrumbs) {
+                <nav class="x-docs-breadcrumb" aria-label="Breadcrumb">
+                  <ol class="breadcrumb mb-0">
+                    @for (
+                      breadcrumb of breadcrumbs;
+                      track breadcrumb;
+                      let last = $last
+                    ) {
+                      <li class="breadcrumb-item" [class.active]="last">
+                        @if (breadcrumb?.url) {
+                          <a
+                            [routerLink]="breadcrumb.url"
+                            class="x-docs-breadcrumb-link"
+                          >
+                            {{ breadcrumb.title }}
+                          </a>
+                        }
+                        @if (!breadcrumb?.url) {
+                          <span class="x-docs-breadcrumb-current">{{
+                            breadcrumb.title
+                          }}</span>
+                        }
+                      </li>
+                    }
+                  </ol>
+                </nav>
+              }
+
+              <!-- Documentation Content -->
+              @if (docs?.html) {
+                <div
+                  class="x-docs-content"
+                  data-bs-spy="scroll"
+                  data-bs-target="#x-docs-nav"
+                  data-bs-root-margin="0px 0px -40%"
+                  data-bs-smooth-scroll="true"
+                  tabindex="0"
+                >
+                  <div [innerHTML]="docs.html | xSafeHtml"></div>
+                </div>
+              } @else {
+                <x-element-blank></x-element-blank>
+              }
+            </article>
+
+            <!-- Table of Contents (On This Page) -->
+            @if (showHeaders && docs?.headers?.length) {
+              <aside class="x-docs-toc col-lg-3 sticky-top d-none d-lg-block">
+                <div class="x-docs-toc-wrapper">
+                  <h4 class="x-docs-toc-title">On This Page</h4>
+                  <nav class="x-docs-toc-nav" aria-label="Table of contents">
+                    <ul class="x-docs-toc-list">
+                      @for (h of getLowestLevelHeaders(docs.headers); track h) {
+                        <li class="x-docs-toc-item">
+                          <a
+                            class="x-docs-header-nav x-docs-toc-link"
+                            [routerLink]="['./']"
+                            [routerLinkActive]="'active'"
+                            [fragment]="h.id"
+                            [innerHTML]="h.text"
+                          ></a>
+                        </li>
+                      }
+                    </ul>
+                  </nav>
+                </div>
+              </aside>
+            }
+          </div>
+        } @else {
+          <x-element-loader></x-element-loader>
+        }
+      </main>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.x-docs{min-height:calc(100vh - 120px)}.x-docs-mobile-nav{z-index:100;background:var(--bs-body-bg);padding:.75rem!important;border-bottom:1px solid var(--bs-border-color-translucent)}.x-docs-mobile-nav-wrapper{position:relative;display:flex;align-items:center}.x-docs-mobile-nav-icon{position:absolute;left:1rem;color:var(--bs-secondary-color);pointer-events:none;z-index:1}.x-docs-mobile-select{padding-left:2.5rem!important;font-size:.9375rem;border-radius:.5rem;border-color:var(--bs-border-color);background-color:var(--bs-body-bg);transition:border-color .15s ease,box-shadow .15s ease}.x-docs-mobile-select:focus{border-color:var(--bs-primary);box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.15)}.x-docs-sidebar{max-height:calc(100vh - 80px);overflow-y:auto;padding:1.5rem 1rem 1.5rem 0!important;scrollbar-width:thin;scrollbar-color:var(--bs-border-color) transparent}.x-docs-sidebar::-webkit-scrollbar{width:4px}.x-docs-sidebar::-webkit-scrollbar-track{background:transparent}.x-docs-sidebar::-webkit-scrollbar-thumb{background-color:var(--bs-border-color);border-radius:4px}.x-docs-nav-section:last-child{margin-bottom:0}.x-docs-nav-title-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem .75rem;margin-bottom:.5rem;background:transparent;border:none;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease}.x-docs-nav-title-btn:hover{background-color:var(--bs-tertiary-bg)}.x-docs-nav-title-btn:focus{outline:none;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.15)}.x-docs-nav-title-text{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bs-secondary-color)}.x-docs-nav-chevron{font-size:.625rem;color:var(--bs-secondary-color);transition:transform .2s ease}.x-docs-nav-list{list-style:none;padding:0;margin:0;max-height:1000px;overflow:hidden;transition:max-height .3s ease,opacity .2s ease;opacity:1;margin-left:1rem!important}.x-docs-nav-section.collapsed .x-docs-nav-list{max-height:0;opacity:0;margin:0}.x-docs-nav-item{margin-bottom:.125rem}.x-docs-nav-link-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;cursor:pointer;text-align:left}.x-docs-nav-link-btn:focus{outline:none;box-shadow:0 0 0 .15rem rgba(var(--bs-primary-rgb),.15)}.x-docs-nav-sub-chevron{font-size:.5rem;color:var(--bs-secondary-color);margin-left:.5rem;flex-shrink:0;transition:transform .2s ease}.x-docs-nav-link{display:block;padding:.5rem .75rem;font-size:.875rem;color:var(--bs-body-color);text-decoration:none;border-radius:.375rem;transition:background-color .15s ease,color .15s ease}.x-docs-nav-link:hover{background-color:var(--bs-tertiary-bg);color:var(--bs-body-color)}.x-docs-parent-nav.active{background-color:var(--bs-primary-bg-subtle);color:var(--bs-primary);font-weight:600}.x-docs-nav-sublist{list-style:none;padding:0;margin:.25rem 0 .5rem .75rem;border-left:1px solid var(--bs-border-color);max-height:500px;overflow:hidden;transition:max-height .25s ease,opacity .2s ease,margin .25s ease;opacity:1}.x-docs-nav-item.collapsed .x-docs-nav-sublist{max-height:0;opacity:0;margin:0 0 0 .75rem}.x-docs-nav-subitem{margin:0}.x-docs-nav-sublink{display:block;padding:.375rem .75rem;font-size:.8125rem;color:var(--bs-secondary-color);text-decoration:none;border-left:2px solid transparent;margin-left:-1px;transition:color .15s ease,border-color .15s ease}.x-docs-nav-sublink:hover{color:var(--bs-body-color);border-left-color:var(--bs-border-color)}.x-docs-child-nav.active{color:var(--bs-primary);border-left-color:var(--bs-primary);font-weight:500}.x-docs-main{background-color:var(--bs-tertiary-bg);border-radius:1rem 0 0;padding:2rem!important}.x-docs-article{padding-right:2rem!important}.x-docs-breadcrumb{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--bs-border-color-translucent)}.x-docs-breadcrumb .breadcrumb{font-size:.875rem;margin:0}.x-docs-breadcrumb-link{color:var(--bs-secondary-color);text-decoration:none;transition:color .15s ease}.x-docs-breadcrumb-link:hover{color:var(--bs-primary)}.x-docs-breadcrumb-current{color:var(--bs-body-color);font-weight:500}.x-docs-content{line-height:1.7;color:var(--bs-body-color)}:host ::ng-deep .x-docs-content h1{font-size:2rem;font-weight:700;margin-top:0;margin-bottom:1.5rem;color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content h2{font-size:1.5rem;font-weight:600;margin-top:2.5rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--bs-border-color-translucent);color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content h3{font-size:1.25rem;font-weight:600;margin-top:2rem;margin-bottom:.75rem;color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content h4,:host ::ng-deep .x-docs-content h5,:host ::ng-deep .x-docs-content h6{font-size:1rem;font-weight:600;margin-top:1.5rem;margin-bottom:.5rem;color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content p{margin-bottom:1rem}:host ::ng-deep .x-docs-content a{color:var(--bs-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease}:host ::ng-deep .x-docs-content a:hover{border-bottom-color:var(--bs-primary)}:host ::ng-deep .x-docs-content ul,:host ::ng-deep .x-docs-content ol{margin-bottom:1rem;padding-left:1.5rem}:host ::ng-deep .x-docs-content li{margin-bottom:.375rem}:host ::ng-deep .x-docs-content code{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:.875em;padding:.2em .4em;background-color:var(--bs-body-bg);border-radius:.25rem;color:var(--bs-code-color, #d63384)}:host ::ng-deep .x-docs-content pre{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:.5rem;padding:1rem;margin-bottom:1.25rem;overflow-x:auto;font-size:.8125rem;line-height:1.5}:host ::ng-deep .x-docs-content pre code{background:transparent;padding:0;border-radius:0;color:inherit;font-size:inherit}:host ::ng-deep .x-docs-content blockquote{margin:1.25rem 0;padding:1rem 1.25rem;border-left:4px solid var(--bs-primary);background-color:var(--bs-body-bg);border-radius:0 .5rem .5rem 0;color:var(--bs-secondary-color)}:host ::ng-deep .x-docs-content blockquote p:last-child{margin-bottom:0}:host ::ng-deep .x-docs-content table{width:100%;margin-bottom:1.25rem;border-collapse:collapse;font-size:.875rem}:host ::ng-deep .x-docs-content th,:host ::ng-deep .x-docs-content td{padding:.625rem .75rem;border:1px solid var(--bs-border-color);text-align:left}:host ::ng-deep .x-docs-content th{background-color:var(--bs-body-bg);font-weight:600}:host ::ng-deep .x-docs-content img{max-width:100%;height:auto;border-radius:.5rem;margin:.75rem 0}:host ::ng-deep .x-docs-content hr{margin:2rem 0;border:none;border-top:1px solid var(--bs-border-color)}.x-docs-toc{max-height:calc(100vh - 160px);overflow-y:auto;padding-left:1rem!important}.x-docs-toc-wrapper{padding:1rem;background-color:var(--bs-body-bg);border-radius:.5rem;border:1px solid var(--bs-border-color-translucent)}.x-docs-toc-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bs-secondary-color);margin-bottom:.75rem}.x-docs-toc-list{list-style:none;padding:0;margin:0}.x-docs-toc-item{margin-bottom:.125rem}.x-docs-toc-link{display:block;padding:.375rem 0 .375rem .75rem;font-size:.8125rem;color:var(--bs-secondary-color);text-decoration:none;border-left:2px solid transparent;transition:color .15s ease,border-color .15s ease}.x-docs-toc-link:hover{color:var(--bs-body-color)}.x-docs-header-nav.active{color:var(--bs-primary);border-left-color:var(--bs-primary);font-weight:500}@media(max-width:575.98px){.x-docs-main{padding:1rem!important;border-radius:0}.x-docs-article{padding-right:0!important}.x-docs-breadcrumb{margin-bottom:1rem;padding-bottom:.75rem}.x-docs-breadcrumb .breadcrumb{font-size:.8125rem;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.x-docs-breadcrumb .breadcrumb::-webkit-scrollbar{display:none}:host ::ng-deep .x-docs-content h1{font-size:1.5rem}:host ::ng-deep .x-docs-content h2{font-size:1.25rem;margin-top:1.75rem}:host ::ng-deep .x-docs-content h3{font-size:1.125rem}:host ::ng-deep .x-docs-content pre{padding:.75rem;font-size:.75rem;border-radius:.375rem}:host ::ng-deep .x-docs-content table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}:host ::ng-deep .x-docs-content th,:host ::ng-deep .x-docs-content td{padding:.5rem}}@media(min-width:576px)and (max-width:991.98px){.x-docs-main{padding:1.5rem!important}.x-docs-article{padding-right:1rem!important}}@media(min-width:992px){.x-docs-sidebar{padding-right:1.5rem!important}}@media(hover:none)and (pointer:coarse){.x-docs-nav-link{padding:.625rem .75rem;min-height:44px;display:flex;align-items:center}.x-docs-nav-sublink{padding:.5rem .75rem;min-height:40px;display:flex;align-items:center}.x-docs-toc-link{padding:.5rem 0 .5rem .75rem;min-height:40px;display:flex;align-items:center}.x-docs-mobile-select{min-height:48px;font-size:1rem}}@media print{.x-docs-mobile-nav,.x-docs-sidebar,.x-docs-toc{display:none!important}.x-docs-main{padding:0!important;background:none!important}.x-docs-article{width:100%!important;max-width:100%!important;flex:0 0 100%!important}:host ::ng-deep .x-docs-content pre{white-space:pre-wrap;word-wrap:break-word}}\n"], dependencies: [{ kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2.BlankComponent, selector: "x-element-blank", inputs: ["image", "icon", "type"] }, { kind: "component", type: i2.LoaderComponent, selector: "x-element-loader", inputs: ["data"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SafeHtmlPipe, name: "xSafeHtml" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-docs', template: `
+    <div class="x-docs row m-0 p-0">
+      <!-- Mobile Navigation Dropdown -->
+      @if (nav$ | async; as nav) {
+        <div
+          class="x-docs-mobile-nav col-12 col-lg-3 p-0 mb-3 sticky-top d-block d-lg-none"
+        >
+          @if (nav?.length) {
+            <div class="x-docs-mobile-nav-wrapper">
+              <i class="fa-solid fa-book-open x-docs-mobile-nav-icon"></i>
+              <select
+                (change)="onSelectChange($event)"
+                class="form-select x-docs-mobile-select"
+              >
+                <option value="" disabled selected>
+                  Navigate Documentation
+                </option>
+                @for (a of nav; track a) {
+                  <optgroup [label]="a.title">
+                    @if (!a?.links?.length) {
+                      <option [value]="a.url">
+                        {{ a.title }}
+                      </option>
+                    }
+                    @if (a?.links?.length) {
+                      @for (b of a.links; track b) {
+                        <option [value]="b.url">
+                          {{ b.title }}
+                        </option>
+                      }
+                      @for (b of a.links; track b) {
+                        @for (c of b.links; track c) {
+                          <option [value]="c.url">— {{ c.title }}</option>
+                        }
+                      }
+                    }
+                  </optgroup>
+                }
+              </select>
+            </div>
+          }
+        </div>
+      } @else {
+        <x-element-loader></x-element-loader>
+      }
+
+      <!-- Desktop Sidebar Navigation -->
+      @if (nav$ | async; as nav) {
+        <aside
+          class="x-docs-sidebar col-12 col-lg-3 sticky-top d-none d-lg-block p-0 m-0"
+        >
+          <nav class="x-docs-sidebar-nav" aria-label="Documentation navigation">
+            @if (nav?.length) {
+              @for (a of nav; track a; let i = $index) {
+                <div
+                  class="x-docs-nav-section"
+                  [class.collapsed]="expandedSection !== i"
+                >
+                  <button
+                    class="x-docs-nav-title-btn"
+                    type="button"
+                    (click)="toggleSection(i)"
+                    [attr.aria-expanded]="expandedSection === i"
+                    aria-controls="nav-section-{{ i }}"
+                  >
+                    <span
+                      class="x-docs-nav-title-text"
+                      [innerHTML]="a.title"
+                    ></span>
+                    <i
+                      class="fa-solid x-docs-nav-chevron"
+                      [class.fa-chevron-down]="expandedSection !== i"
+                      [class.fa-chevron-up]="expandedSection === i"
+                    ></i>
+                  </button>
+                  @if (a?.links?.length) {
+                    <ul class="x-docs-nav-list" [id]="'nav-section-' + i">
+                      @for (b of a?.links; track b; let j = $index) {
+                        <li
+                          class="x-docs-nav-item"
+                          [class.collapsed]="
+                            b?.links?.length &&
+                            expandedSubSection !== i + '-' + j
+                          "
+                        >
+                          @if (b?.links?.length) {
+                            <button
+                              class="x-docs-nav-link x-docs-nav-link-btn"
+                              type="button"
+                              (click)="toggleSubSection(i, j)"
+                              [attr.aria-expanded]="
+                                expandedSubSection === i + '-' + j
+                              "
+                              [class.has-children]="true"
+                            >
+                              <span [innerHTML]="b.title"></span>
+                              <i
+                                class="fa-solid x-docs-nav-sub-chevron"
+                                [class.fa-chevron-down]="
+                                  expandedSubSection !== i + '-' + j
+                                "
+                                [class.fa-chevron-up]="
+                                  expandedSubSection === i + '-' + j
+                                "
+                              ></i>
+                            </button>
+                            <ul class="x-docs-nav-sublist">
+                              @for (c of b.links; track c) {
+                                <li class="x-docs-nav-subitem">
+                                  <a
+                                    class="x-docs-child-nav x-docs-nav-sublink"
+                                    [routerLink]="c.url"
+                                    [routerLinkActive]="'active'"
+                                    [innerHTML]="c.title"
+                                  ></a>
+                                </li>
+                              }
+                            </ul>
+                          } @else {
+                            <a
+                              class="x-docs-parent-nav x-docs-nav-link"
+                              [routerLink]="b.url"
+                              [routerLinkActive]="'active'"
+                              [innerHTML]="b.title"
+                            ></a>
+                          }
+                        </li>
+                      }
+                    </ul>
+                  }
+                </div>
+              }
+            }
+          </nav>
+        </aside>
+      } @else {
+        <x-element-loader></x-element-loader>
+      }
+
+      <!-- Main Content Area -->
+      <main class="x-docs-main col-12 col-lg-9">
+        @if (docs$ | async; as docs) {
+          <div class="row">
+            <article class="x-docs-article col-12 col-lg-9">
+              <!-- Breadcrumbs -->
+              @if (breadcrumbs$ | async; as breadcrumbs) {
+                <nav class="x-docs-breadcrumb" aria-label="Breadcrumb">
+                  <ol class="breadcrumb mb-0">
+                    @for (
+                      breadcrumb of breadcrumbs;
+                      track breadcrumb;
+                      let last = $last
+                    ) {
+                      <li class="breadcrumb-item" [class.active]="last">
+                        @if (breadcrumb?.url) {
+                          <a
+                            [routerLink]="breadcrumb.url"
+                            class="x-docs-breadcrumb-link"
+                          >
+                            {{ breadcrumb.title }}
+                          </a>
+                        }
+                        @if (!breadcrumb?.url) {
+                          <span class="x-docs-breadcrumb-current">{{
+                            breadcrumb.title
+                          }}</span>
+                        }
+                      </li>
+                    }
+                  </ol>
+                </nav>
+              }
+
+              <!-- Documentation Content -->
+              @if (docs?.html) {
+                <div
+                  class="x-docs-content"
+                  data-bs-spy="scroll"
+                  data-bs-target="#x-docs-nav"
+                  data-bs-root-margin="0px 0px -40%"
+                  data-bs-smooth-scroll="true"
+                  tabindex="0"
+                >
+                  <div [innerHTML]="docs.html | xSafeHtml"></div>
+                </div>
+              } @else {
+                <x-element-blank></x-element-blank>
+              }
+            </article>
+
+            <!-- Table of Contents (On This Page) -->
+            @if (showHeaders && docs?.headers?.length) {
+              <aside class="x-docs-toc col-lg-3 sticky-top d-none d-lg-block">
+                <div class="x-docs-toc-wrapper">
+                  <h4 class="x-docs-toc-title">On This Page</h4>
+                  <nav class="x-docs-toc-nav" aria-label="Table of contents">
+                    <ul class="x-docs-toc-list">
+                      @for (h of getLowestLevelHeaders(docs.headers); track h) {
+                        <li class="x-docs-toc-item">
+                          <a
+                            class="x-docs-header-nav x-docs-toc-link"
+                            [routerLink]="['./']"
+                            [routerLinkActive]="'active'"
+                            [fragment]="h.id"
+                            [innerHTML]="h.text"
+                          ></a>
+                        </li>
+                      }
+                    </ul>
+                  </nav>
+                </div>
+              </aside>
+            }
+          </div>
+        } @else {
+          <x-element-loader></x-element-loader>
+        }
+      </main>
+    </div>
+  `, styles: [":host{display:block}.x-docs{min-height:calc(100vh - 120px)}.x-docs-mobile-nav{z-index:100;background:var(--bs-body-bg);padding:.75rem!important;border-bottom:1px solid var(--bs-border-color-translucent)}.x-docs-mobile-nav-wrapper{position:relative;display:flex;align-items:center}.x-docs-mobile-nav-icon{position:absolute;left:1rem;color:var(--bs-secondary-color);pointer-events:none;z-index:1}.x-docs-mobile-select{padding-left:2.5rem!important;font-size:.9375rem;border-radius:.5rem;border-color:var(--bs-border-color);background-color:var(--bs-body-bg);transition:border-color .15s ease,box-shadow .15s ease}.x-docs-mobile-select:focus{border-color:var(--bs-primary);box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.15)}.x-docs-sidebar{max-height:calc(100vh - 80px);overflow-y:auto;padding:1.5rem 1rem 1.5rem 0!important;scrollbar-width:thin;scrollbar-color:var(--bs-border-color) transparent}.x-docs-sidebar::-webkit-scrollbar{width:4px}.x-docs-sidebar::-webkit-scrollbar-track{background:transparent}.x-docs-sidebar::-webkit-scrollbar-thumb{background-color:var(--bs-border-color);border-radius:4px}.x-docs-nav-section:last-child{margin-bottom:0}.x-docs-nav-title-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem .75rem;margin-bottom:.5rem;background:transparent;border:none;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease}.x-docs-nav-title-btn:hover{background-color:var(--bs-tertiary-bg)}.x-docs-nav-title-btn:focus{outline:none;box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.15)}.x-docs-nav-title-text{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bs-secondary-color)}.x-docs-nav-chevron{font-size:.625rem;color:var(--bs-secondary-color);transition:transform .2s ease}.x-docs-nav-list{list-style:none;padding:0;margin:0;max-height:1000px;overflow:hidden;transition:max-height .3s ease,opacity .2s ease;opacity:1;margin-left:1rem!important}.x-docs-nav-section.collapsed .x-docs-nav-list{max-height:0;opacity:0;margin:0}.x-docs-nav-item{margin-bottom:.125rem}.x-docs-nav-link-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;cursor:pointer;text-align:left}.x-docs-nav-link-btn:focus{outline:none;box-shadow:0 0 0 .15rem rgba(var(--bs-primary-rgb),.15)}.x-docs-nav-sub-chevron{font-size:.5rem;color:var(--bs-secondary-color);margin-left:.5rem;flex-shrink:0;transition:transform .2s ease}.x-docs-nav-link{display:block;padding:.5rem .75rem;font-size:.875rem;color:var(--bs-body-color);text-decoration:none;border-radius:.375rem;transition:background-color .15s ease,color .15s ease}.x-docs-nav-link:hover{background-color:var(--bs-tertiary-bg);color:var(--bs-body-color)}.x-docs-parent-nav.active{background-color:var(--bs-primary-bg-subtle);color:var(--bs-primary);font-weight:600}.x-docs-nav-sublist{list-style:none;padding:0;margin:.25rem 0 .5rem .75rem;border-left:1px solid var(--bs-border-color);max-height:500px;overflow:hidden;transition:max-height .25s ease,opacity .2s ease,margin .25s ease;opacity:1}.x-docs-nav-item.collapsed .x-docs-nav-sublist{max-height:0;opacity:0;margin:0 0 0 .75rem}.x-docs-nav-subitem{margin:0}.x-docs-nav-sublink{display:block;padding:.375rem .75rem;font-size:.8125rem;color:var(--bs-secondary-color);text-decoration:none;border-left:2px solid transparent;margin-left:-1px;transition:color .15s ease,border-color .15s ease}.x-docs-nav-sublink:hover{color:var(--bs-body-color);border-left-color:var(--bs-border-color)}.x-docs-child-nav.active{color:var(--bs-primary);border-left-color:var(--bs-primary);font-weight:500}.x-docs-main{background-color:var(--bs-tertiary-bg);border-radius:1rem 0 0;padding:2rem!important}.x-docs-article{padding-right:2rem!important}.x-docs-breadcrumb{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--bs-border-color-translucent)}.x-docs-breadcrumb .breadcrumb{font-size:.875rem;margin:0}.x-docs-breadcrumb-link{color:var(--bs-secondary-color);text-decoration:none;transition:color .15s ease}.x-docs-breadcrumb-link:hover{color:var(--bs-primary)}.x-docs-breadcrumb-current{color:var(--bs-body-color);font-weight:500}.x-docs-content{line-height:1.7;color:var(--bs-body-color)}:host ::ng-deep .x-docs-content h1{font-size:2rem;font-weight:700;margin-top:0;margin-bottom:1.5rem;color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content h2{font-size:1.5rem;font-weight:600;margin-top:2.5rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--bs-border-color-translucent);color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content h3{font-size:1.25rem;font-weight:600;margin-top:2rem;margin-bottom:.75rem;color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content h4,:host ::ng-deep .x-docs-content h5,:host ::ng-deep .x-docs-content h6{font-size:1rem;font-weight:600;margin-top:1.5rem;margin-bottom:.5rem;color:var(--bs-heading-color, var(--bs-body-color))}:host ::ng-deep .x-docs-content p{margin-bottom:1rem}:host ::ng-deep .x-docs-content a{color:var(--bs-primary);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease}:host ::ng-deep .x-docs-content a:hover{border-bottom-color:var(--bs-primary)}:host ::ng-deep .x-docs-content ul,:host ::ng-deep .x-docs-content ol{margin-bottom:1rem;padding-left:1.5rem}:host ::ng-deep .x-docs-content li{margin-bottom:.375rem}:host ::ng-deep .x-docs-content code{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:.875em;padding:.2em .4em;background-color:var(--bs-body-bg);border-radius:.25rem;color:var(--bs-code-color, #d63384)}:host ::ng-deep .x-docs-content pre{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:.5rem;padding:1rem;margin-bottom:1.25rem;overflow-x:auto;font-size:.8125rem;line-height:1.5}:host ::ng-deep .x-docs-content pre code{background:transparent;padding:0;border-radius:0;color:inherit;font-size:inherit}:host ::ng-deep .x-docs-content blockquote{margin:1.25rem 0;padding:1rem 1.25rem;border-left:4px solid var(--bs-primary);background-color:var(--bs-body-bg);border-radius:0 .5rem .5rem 0;color:var(--bs-secondary-color)}:host ::ng-deep .x-docs-content blockquote p:last-child{margin-bottom:0}:host ::ng-deep .x-docs-content table{width:100%;margin-bottom:1.25rem;border-collapse:collapse;font-size:.875rem}:host ::ng-deep .x-docs-content th,:host ::ng-deep .x-docs-content td{padding:.625rem .75rem;border:1px solid var(--bs-border-color);text-align:left}:host ::ng-deep .x-docs-content th{background-color:var(--bs-body-bg);font-weight:600}:host ::ng-deep .x-docs-content img{max-width:100%;height:auto;border-radius:.5rem;margin:.75rem 0}:host ::ng-deep .x-docs-content hr{margin:2rem 0;border:none;border-top:1px solid var(--bs-border-color)}.x-docs-toc{max-height:calc(100vh - 160px);overflow-y:auto;padding-left:1rem!important}.x-docs-toc-wrapper{padding:1rem;background-color:var(--bs-body-bg);border-radius:.5rem;border:1px solid var(--bs-border-color-translucent)}.x-docs-toc-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bs-secondary-color);margin-bottom:.75rem}.x-docs-toc-list{list-style:none;padding:0;margin:0}.x-docs-toc-item{margin-bottom:.125rem}.x-docs-toc-link{display:block;padding:.375rem 0 .375rem .75rem;font-size:.8125rem;color:var(--bs-secondary-color);text-decoration:none;border-left:2px solid transparent;transition:color .15s ease,border-color .15s ease}.x-docs-toc-link:hover{color:var(--bs-body-color)}.x-docs-header-nav.active{color:var(--bs-primary);border-left-color:var(--bs-primary);font-weight:500}@media(max-width:575.98px){.x-docs-main{padding:1rem!important;border-radius:0}.x-docs-article{padding-right:0!important}.x-docs-breadcrumb{margin-bottom:1rem;padding-bottom:.75rem}.x-docs-breadcrumb .breadcrumb{font-size:.8125rem;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}.x-docs-breadcrumb .breadcrumb::-webkit-scrollbar{display:none}:host ::ng-deep .x-docs-content h1{font-size:1.5rem}:host ::ng-deep .x-docs-content h2{font-size:1.25rem;margin-top:1.75rem}:host ::ng-deep .x-docs-content h3{font-size:1.125rem}:host ::ng-deep .x-docs-content pre{padding:.75rem;font-size:.75rem;border-radius:.375rem}:host ::ng-deep .x-docs-content table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}:host ::ng-deep .x-docs-content th,:host ::ng-deep .x-docs-content td{padding:.5rem}}@media(min-width:576px)and (max-width:991.98px){.x-docs-main{padding:1.5rem!important}.x-docs-article{padding-right:1rem!important}}@media(min-width:992px){.x-docs-sidebar{padding-right:1.5rem!important}}@media(hover:none)and (pointer:coarse){.x-docs-nav-link{padding:.625rem .75rem;min-height:44px;display:flex;align-items:center}.x-docs-nav-sublink{padding:.5rem .75rem;min-height:40px;display:flex;align-items:center}.x-docs-toc-link{padding:.5rem 0 .5rem .75rem;min-height:40px;display:flex;align-items:center}.x-docs-mobile-select{min-height:48px;font-size:1rem}}@media print{.x-docs-mobile-nav,.x-docs-sidebar,.x-docs-toc{display:none!important}.x-docs-main{padding:0!important;background:none!important}.x-docs-article{width:100%!important;max-width:100%!important;flex:0 0 100%!important}:host ::ng-deep .x-docs-content pre{white-space:pre-wrap;word-wrap:break-word}}\n"] }]
+        }], propDecorators: { onContentClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class DocsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: DocsModule, declarations: [DocsComponent], imports: [SharedModule, i1$1.RouterModule, LayoutsModule,
+            ElementsModule,
+            ToolbarModule,
+            PipesModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocsModule, imports: [SharedModule,
+            RouterModule.forChild([
+                { path: ':sub1/:sub2/:sub3/:sub4/:sub5', component: DocsComponent },
+                { path: ':sub1/:sub2/:sub3/:sub4', component: DocsComponent },
+                { path: ':sub1/:sub2/:sub3', component: DocsComponent },
+                { path: ':sub1/:sub2', component: DocsComponent },
+                { path: ':sub1', component: DocsComponent },
+            ]),
+            LayoutsModule,
+            ElementsModule,
+            ToolbarModule,
+            PipesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DocsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DocsComponent],
+                    imports: [
+                        SharedModule,
+                        RouterModule.forChild([
+                            { path: ':sub1/:sub2/:sub3/:sub4/:sub5', component: DocsComponent },
+                            { path: ':sub1/:sub2/:sub3/:sub4', component: DocsComponent },
+                            { path: ':sub1/:sub2/:sub3', component: DocsComponent },
+                            { path: ':sub1/:sub2', component: DocsComponent },
+                            { path: ':sub1', component: DocsComponent },
+                        ]),
+                        LayoutsModule,
+                        ElementsModule,
+                        ToolbarModule,
+                        PipesModule,
+                    ],
+                }]
+        }] });
+
+export { DocsModule };
+//# sourceMappingURL=thescaffold-ngx-apps-blog-docs.module-CLrP53Ce.mjs.map