@thescaffold/ngx-apps-blog 0.2.21 → 0.2.31

package/fesm2022/thescaffold-ngx-apps-blog-home.module-LXerbHw9.mjs

@@ -0,0 +1,1028 @@
+import * as i0 from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i4 from '@thescaffold/ngx-core';
+import { isUrl, SharedModule, CommonActionType } from '@thescaffold/ngx-core';
+import * as i2 from '@thescaffold/ngx-ui';
+import { ElementsModule, FormModule, LayoutsModule, WebgetsModule } from '@thescaffold/ngx-ui';
+import * as i1 from '@angular/common';
+
+class CardComponent {
+    constructor() {
+        this.isUrl = isUrl;
+    }
+    combinedStyle(...styles) {
+        return styles.filter((style) => !!style).join(';');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardComponent, isStandalone: false, selector: "x-card", inputs: { data: "data" }, ngImport: i0, template: `
+    @if (data) {
+      <div
+        [ngClass]="[
+          data.class ?? '',
+          data.align ?? '',
+          data.bgClass ?? '',
+          data.fgClass ?? '',
+        ]"
+        [style]="
+          combinedStyle(
+            data.style ?? '',
+            data.bgStyle ?? '',
+            data.fgStyle ?? ''
+          )
+        "
+        [ngStyle]="
+          data.bgImage
+            ? {
+                'background-image': 'url(' + data.bgImage + ')',
+                'background-size': data.bgSize ?? '50%',
+                'background-repeat': data.bgRepeat ?? 'no-repeat',
+                'background-position': data.bgPosition ?? 'right top',
+              }
+            : {}
+        "
+      >
+      <!-- header -->
+      @if (
+        data.icon ||
+        data.title ||
+        data.desc ||
+        data.links?.length ||
+        data.fgImage
+        ) {
+        <div
+          class="row"
+          >
+          <div [ngClass]="data.fgImage ? 'col-6' : 'col-12'">
+            @if (data.icon || data.title) {
+              <h1
+                [ngClass]="[data.titleClass ?? 'display-1 fw-bold']"
+                >
+                @if (data.icon && isUrl(data.icon)) {
+                  <img
+                    [src]="data.icon"
+                    height="27"
+                    width="27"
+                    />
+                }
+                @if (data.icon && !isUrl(data.icon)) {
+                  <i
+                    class="fa-2x"
+                    [ngClass]="data.icon"
+                  ></i>
+                }
+                @if (data.title) {
+                  <span class="">{{ data.title }}</span>
+                }
+              </h1>
+            }
+            @if (data.desc) {
+              <h6
+                class="display-6"
+                [innerHTML]="data.desc"
+              ></h6>
+            }
+            @if (data.links?.length) {
+              <ul
+                class="nav my-3"
+                [ngClass]="data.align ?? ''"
+                >
+                @for (link of data.links; track link) {
+                  <li
+                    class="nav-item"
+                    [ngClass]="link.class ?? ''"
+                    [style]="link.style ?? ''"
+                    >
+                    <x-element-link
+                      [data]="link | xPrepend: { class: 'btn btn-primary px-5' }"
+                    ></x-element-link>
+                  </li>
+                }
+              </ul>
+            }
+          </div>
+          @if (data.fgImage) {
+            <div
+              class="d-none d-sm-flex d-md-flex col-6"
+              [ngClass]="[data.fgClass ?? '']"
+              [style]="data.fgStyle ?? ''"
+              >
+              <img [src]="data.fgImage" height="200" width="auto" />
+            </div>
+          }
+        </div>
+      }
+      <!-- search -->
+      @if (data.placeholder) {
+        <div class="row col-12 col-sm-9 col-6 mx-auto">
+          <div class="input-group input-group-lg">
+            <input
+              type="text"
+              class="form-control"
+              [placeholder]="data.placeholder"
+              />
+          </div>
+        </div>
+      }
+      <!-- list -->
+      @if (data.list?.length) {
+        <div
+          class="row py-5 justify-content-center w-100"
+          >
+          <dl class="col-12">
+            @for (item of data.list; track item) {
+              <div
+                [ngClass]="item.class ?? ''"
+                [style]="item.style ?? ''"
+                >
+                @if (data.title) {
+                  <dt class="">{{ data.title }}</dt>
+                }
+                @if (data.desc) {
+                  <dd class="" [innerHTML]="data.desc"></dd>
+                }
+              </div>
+            }
+          </dl>
+        </div>
+      }
+      <!-- grids -->
+      @if (data.grids?.length) {
+        <div
+          class="row row-cols-1 row-cols-sm-2 row-cols-md-3"
+          [ngClass]="data.align ?? ''"
+          >
+          @for (item of data.grids; track item) {
+            <div
+              class="col"
+              [ngClass]="item.class ?? ''"
+              [style]="item.style ?? ''"
+              >
+              <div class="card">
+                @if (item.icon && isUrl(item.icon)) {
+                  <img
+                    [src]="item.icon"
+                    width="72"
+                    height="72"
+                    />
+                }
+                @if (item.icon && !isUrl(item.icon)) {
+                  <i
+                    [ngClass]="item.icon"
+                    class="fa-2x"
+                  ></i>
+                }
+                <div class="card-body">
+                  @if (item?.title) {
+                    <h5 class="card-title">{{ item.title }}</h5>
+                  }
+                  @if (item?.desc) {
+                    <p
+                      class="card-text"
+                      [innerHTML]="item.desc"
+                    ></p>
+                  }
+                </div>
+                @if (item?.links?.length) {
+                  <ul
+                    class="list-group list-group-flush"
+                    >
+                    @for (link of item?.links; track link) {
+                      <li
+                        class="list-group-item"
+                        [ngClass]="link.class ?? ''"
+                        [style]="link.style ?? ''"
+                        >
+                        <x-element-link
+                    [data]="
+                      link
+                        | xPrepend: { class: 'card-link text-decoration-none' }
+                    "
+                        ></x-element-link>
+                      </li>
+                    }
+                  </ul>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      }
+      <!-- media -->
+      @if (data.media?.length) {
+        <div
+          class="d-flex flex-column justify-content-center"
+          [ngClass]="data.align ?? ''"
+          >
+          <div class="card w-100 border-0">
+            <ul class="list-group list-group-flush">
+              @for (item of data.media; track item; let f = $first; let l = $last) {
+                <li
+                  class="list-group-item border-0 p-0 mx-0 my-3"
+                  [ngClass]="{ 'pb-5': f, 'pt-5': l, 'py-5': !f && !l }"
+                  [ngClass]="item.class ?? ''"
+                  [style]="item.style ?? ''"
+                  >
+                  <div class="d-flex">
+                    <div class="flex-shrink-0">
+                      @if (item.icon && isUrl(item.icon)) {
+                        <img
+                          [src]="item.icon"
+                          width="72"
+                          height="72"
+                          />
+                      }
+                      @if (item.icon && !isUrl(item.icon)) {
+                        <i
+                          [ngClass]="item.icon"
+                          class="fa-2x"
+                        ></i>
+                      }
+                    </div>
+                    <div class="flex-grow-1 ms-3">
+                      @if (item?.title) {
+                        <h5 class="p-0 m-0">
+                          {{ item.title }}
+                        </h5>
+                      }
+                      @if (item?.desc) {
+                        <p
+                          class="p-0 m-0"
+                          [innerHTML]="item.desc"
+                        ></p>
+                      }
+                      @if (item?.links?.length) {
+                        <ul class="nav">
+                          @for (link of item.links; track link) {
+                            <li
+                              class="nav-item"
+                              [ngClass]="link.class ?? ''"
+                              [style]="link.style ?? ''"
+                              >
+                              <x-element-link
+                          [data]="
+                            link
+                              | xPrepend
+                                : {
+                                    class:
+                                      'btn btn-primary btn-link text-decoration-none p-0 m-0',
+                                  }
+                          "
+                            ></x-element-link>
+                          </li>
+                        }
+                      </ul>
+                    }
+                  </div>
+                </div>
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+    }
+    <!-- cards -->
+    @if (data.cards?.length) {
+      <div
+        class="row my-3 row-cols-1 row-cols-sm-2 row-cols-md-3"
+        [ngClass]="data.align ?? ''"
+        >
+        @for (item of data.cards; track item) {
+          <div
+            class="col"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            <div
+              class="card card-body text-bg-light"
+              [ngClass]="data.bgClass ?? ''"
+              [style]="data.bgStyle ?? ''"
+              >
+              <div class="text-start">
+                @if (item.icon && isUrl(item.icon)) {
+                  <img
+                    [src]="item.icon"
+                    class=""
+                    width="72"
+                    height="72"
+                    />
+                }
+                @if (item.icon && !isUrl(item.icon)) {
+                  <i
+                    [ngClass]="item.icon"
+                    class="fa-2x"
+                  ></i>
+                }
+              </div>
+              @if (item?.title) {
+                <h3>
+                  {{ item.title }}
+                </h3>
+              }
+              @if (item?.desc) {
+                <p [innerHTML]="item.desc"></p>
+              }
+              @if (item?.links?.length) {
+                <div>
+                  @for (link of item?.links; track link) {
+                    <div
+                      [ngClass]="link.class ?? ''"
+                      [style]="link.style ?? ''"
+                      >
+                      <x-element-link
+                    [data]="
+                      link | xPrepend: { class: 'btn btn-primary btn-link' }
+                    "
+                      ></x-element-link>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+    <!-- doubles -->
+    @if (data.doubles?.length) {
+      <div
+        class="row"
+        [ngClass]="data.align ?? ''"
+        >
+        @for (item of data.doubles; track item; let e = $even) {
+          <div
+            class="d-flex justify-content-between"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            <div class="" [ngClass]="{ 'order-first': e, 'order-last': !e }">
+              @if (item?.title) {
+                <h3>
+                  {{ item.title }}
+                </h3>
+              }
+              @if (item?.desc) {
+                <p
+                  class="text-start py-3"
+                  [innerHTML]="item.desc"
+                ></p>
+              }
+              @if (item?.links?.length) {
+                <div class="">
+                  @for (link of item?.links; track link) {
+                    <div
+                      [ngClass]="link.class ?? ''"
+                      [style]="link.style ?? ''"
+                      >
+                      <x-element-link
+                    [data]="
+                      link
+                        | xPrepend
+                          : {
+                              class:
+                                'btn btn-primary btn-link d-flex flex-column-reverse',
+                            }
+                    "
+                    ></x-element-link>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+          @if (item?.icon) {
+            <div
+              class=""
+              [ngClass]="{ 'order-first': !e, 'order-last': e }"
+              >
+              <div class="text-start">
+                <i class="fa-5x" [ngClass]="item.icon"></i>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+    }
+    <!-- image clouds -->
+    @if (data.cloud?.length) {
+      <div
+        class="row py-5 justify-content-center w-100"
+        >
+        @for (item of data.cloud; track item; let e = $even) {
+          <div
+            class="d-flex justify-content-between"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            <div class="">
+              @if (item.icon && isUrl(item.icon)) {
+                <img
+                  [src]="item.icon"
+                  class=""
+                  width="72"
+                  height="72"
+                  />
+              }
+              @if (item.icon && !isUrl(item.icon)) {
+                <i
+                  [ngClass]="item.icon"
+                  class="fa-2x"
+                ></i>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+    <!-- lines -->
+    @if (data.lines?.length) {
+      <div class="row col-12 container">
+        @for (item of data.lines; track item) {
+          <div
+            class="pt-3 px-0 border-bottom"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            @if (item.title) {
+              <h5 class="text-start">
+                @if (!item.url) {
+                  <span>{{ item.title }}</span>
+                }
+                @if (item.url) {
+                  <x-element-link
+                    [data]="item | xPrepend: { class: 'btn btn-link p-0' }"
+                  ></x-element-link>
+                }
+              </h5>
+            }
+          </div>
+        }
+      </div>
+    }
+    </div>
+    }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.LinkComponent, selector: "x-element-link", inputs: ["data"] }, { kind: "pipe", type: i4.PrependPipe, name: "xPrepend" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'x-card', template: `
+    @if (data) {
+      <div
+        [ngClass]="[
+          data.class ?? '',
+          data.align ?? '',
+          data.bgClass ?? '',
+          data.fgClass ?? '',
+        ]"
+        [style]="
+          combinedStyle(
+            data.style ?? '',
+            data.bgStyle ?? '',
+            data.fgStyle ?? ''
+          )
+        "
+        [ngStyle]="
+          data.bgImage
+            ? {
+                'background-image': 'url(' + data.bgImage + ')',
+                'background-size': data.bgSize ?? '50%',
+                'background-repeat': data.bgRepeat ?? 'no-repeat',
+                'background-position': data.bgPosition ?? 'right top',
+              }
+            : {}
+        "
+      >
+      <!-- header -->
+      @if (
+        data.icon ||
+        data.title ||
+        data.desc ||
+        data.links?.length ||
+        data.fgImage
+        ) {
+        <div
+          class="row"
+          >
+          <div [ngClass]="data.fgImage ? 'col-6' : 'col-12'">
+            @if (data.icon || data.title) {
+              <h1
+                [ngClass]="[data.titleClass ?? 'display-1 fw-bold']"
+                >
+                @if (data.icon && isUrl(data.icon)) {
+                  <img
+                    [src]="data.icon"
+                    height="27"
+                    width="27"
+                    />
+                }
+                @if (data.icon && !isUrl(data.icon)) {
+                  <i
+                    class="fa-2x"
+                    [ngClass]="data.icon"
+                  ></i>
+                }
+                @if (data.title) {
+                  <span class="">{{ data.title }}</span>
+                }
+              </h1>
+            }
+            @if (data.desc) {
+              <h6
+                class="display-6"
+                [innerHTML]="data.desc"
+              ></h6>
+            }
+            @if (data.links?.length) {
+              <ul
+                class="nav my-3"
+                [ngClass]="data.align ?? ''"
+                >
+                @for (link of data.links; track link) {
+                  <li
+                    class="nav-item"
+                    [ngClass]="link.class ?? ''"
+                    [style]="link.style ?? ''"
+                    >
+                    <x-element-link
+                      [data]="link | xPrepend: { class: 'btn btn-primary px-5' }"
+                    ></x-element-link>
+                  </li>
+                }
+              </ul>
+            }
+          </div>
+          @if (data.fgImage) {
+            <div
+              class="d-none d-sm-flex d-md-flex col-6"
+              [ngClass]="[data.fgClass ?? '']"
+              [style]="data.fgStyle ?? ''"
+              >
+              <img [src]="data.fgImage" height="200" width="auto" />
+            </div>
+          }
+        </div>
+      }
+      <!-- search -->
+      @if (data.placeholder) {
+        <div class="row col-12 col-sm-9 col-6 mx-auto">
+          <div class="input-group input-group-lg">
+            <input
+              type="text"
+              class="form-control"
+              [placeholder]="data.placeholder"
+              />
+          </div>
+        </div>
+      }
+      <!-- list -->
+      @if (data.list?.length) {
+        <div
+          class="row py-5 justify-content-center w-100"
+          >
+          <dl class="col-12">
+            @for (item of data.list; track item) {
+              <div
+                [ngClass]="item.class ?? ''"
+                [style]="item.style ?? ''"
+                >
+                @if (data.title) {
+                  <dt class="">{{ data.title }}</dt>
+                }
+                @if (data.desc) {
+                  <dd class="" [innerHTML]="data.desc"></dd>
+                }
+              </div>
+            }
+          </dl>
+        </div>
+      }
+      <!-- grids -->
+      @if (data.grids?.length) {
+        <div
+          class="row row-cols-1 row-cols-sm-2 row-cols-md-3"
+          [ngClass]="data.align ?? ''"
+          >
+          @for (item of data.grids; track item) {
+            <div
+              class="col"
+              [ngClass]="item.class ?? ''"
+              [style]="item.style ?? ''"
+              >
+              <div class="card">
+                @if (item.icon && isUrl(item.icon)) {
+                  <img
+                    [src]="item.icon"
+                    width="72"
+                    height="72"
+                    />
+                }
+                @if (item.icon && !isUrl(item.icon)) {
+                  <i
+                    [ngClass]="item.icon"
+                    class="fa-2x"
+                  ></i>
+                }
+                <div class="card-body">
+                  @if (item?.title) {
+                    <h5 class="card-title">{{ item.title }}</h5>
+                  }
+                  @if (item?.desc) {
+                    <p
+                      class="card-text"
+                      [innerHTML]="item.desc"
+                    ></p>
+                  }
+                </div>
+                @if (item?.links?.length) {
+                  <ul
+                    class="list-group list-group-flush"
+                    >
+                    @for (link of item?.links; track link) {
+                      <li
+                        class="list-group-item"
+                        [ngClass]="link.class ?? ''"
+                        [style]="link.style ?? ''"
+                        >
+                        <x-element-link
+                    [data]="
+                      link
+                        | xPrepend: { class: 'card-link text-decoration-none' }
+                    "
+                        ></x-element-link>
+                      </li>
+                    }
+                  </ul>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      }
+      <!-- media -->
+      @if (data.media?.length) {
+        <div
+          class="d-flex flex-column justify-content-center"
+          [ngClass]="data.align ?? ''"
+          >
+          <div class="card w-100 border-0">
+            <ul class="list-group list-group-flush">
+              @for (item of data.media; track item; let f = $first; let l = $last) {
+                <li
+                  class="list-group-item border-0 p-0 mx-0 my-3"
+                  [ngClass]="{ 'pb-5': f, 'pt-5': l, 'py-5': !f && !l }"
+                  [ngClass]="item.class ?? ''"
+                  [style]="item.style ?? ''"
+                  >
+                  <div class="d-flex">
+                    <div class="flex-shrink-0">
+                      @if (item.icon && isUrl(item.icon)) {
+                        <img
+                          [src]="item.icon"
+                          width="72"
+                          height="72"
+                          />
+                      }
+                      @if (item.icon && !isUrl(item.icon)) {
+                        <i
+                          [ngClass]="item.icon"
+                          class="fa-2x"
+                        ></i>
+                      }
+                    </div>
+                    <div class="flex-grow-1 ms-3">
+                      @if (item?.title) {
+                        <h5 class="p-0 m-0">
+                          {{ item.title }}
+                        </h5>
+                      }
+                      @if (item?.desc) {
+                        <p
+                          class="p-0 m-0"
+                          [innerHTML]="item.desc"
+                        ></p>
+                      }
+                      @if (item?.links?.length) {
+                        <ul class="nav">
+                          @for (link of item.links; track link) {
+                            <li
+                              class="nav-item"
+                              [ngClass]="link.class ?? ''"
+                              [style]="link.style ?? ''"
+                              >
+                              <x-element-link
+                          [data]="
+                            link
+                              | xPrepend
+                                : {
+                                    class:
+                                      'btn btn-primary btn-link text-decoration-none p-0 m-0',
+                                  }
+                          "
+                            ></x-element-link>
+                          </li>
+                        }
+                      </ul>
+                    }
+                  </div>
+                </div>
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+    }
+    <!-- cards -->
+    @if (data.cards?.length) {
+      <div
+        class="row my-3 row-cols-1 row-cols-sm-2 row-cols-md-3"
+        [ngClass]="data.align ?? ''"
+        >
+        @for (item of data.cards; track item) {
+          <div
+            class="col"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            <div
+              class="card card-body text-bg-light"
+              [ngClass]="data.bgClass ?? ''"
+              [style]="data.bgStyle ?? ''"
+              >
+              <div class="text-start">
+                @if (item.icon && isUrl(item.icon)) {
+                  <img
+                    [src]="item.icon"
+                    class=""
+                    width="72"
+                    height="72"
+                    />
+                }
+                @if (item.icon && !isUrl(item.icon)) {
+                  <i
+                    [ngClass]="item.icon"
+                    class="fa-2x"
+                  ></i>
+                }
+              </div>
+              @if (item?.title) {
+                <h3>
+                  {{ item.title }}
+                </h3>
+              }
+              @if (item?.desc) {
+                <p [innerHTML]="item.desc"></p>
+              }
+              @if (item?.links?.length) {
+                <div>
+                  @for (link of item?.links; track link) {
+                    <div
+                      [ngClass]="link.class ?? ''"
+                      [style]="link.style ?? ''"
+                      >
+                      <x-element-link
+                    [data]="
+                      link | xPrepend: { class: 'btn btn-primary btn-link' }
+                    "
+                      ></x-element-link>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+    <!-- doubles -->
+    @if (data.doubles?.length) {
+      <div
+        class="row"
+        [ngClass]="data.align ?? ''"
+        >
+        @for (item of data.doubles; track item; let e = $even) {
+          <div
+            class="d-flex justify-content-between"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            <div class="" [ngClass]="{ 'order-first': e, 'order-last': !e }">
+              @if (item?.title) {
+                <h3>
+                  {{ item.title }}
+                </h3>
+              }
+              @if (item?.desc) {
+                <p
+                  class="text-start py-3"
+                  [innerHTML]="item.desc"
+                ></p>
+              }
+              @if (item?.links?.length) {
+                <div class="">
+                  @for (link of item?.links; track link) {
+                    <div
+                      [ngClass]="link.class ?? ''"
+                      [style]="link.style ?? ''"
+                      >
+                      <x-element-link
+                    [data]="
+                      link
+                        | xPrepend
+                          : {
+                              class:
+                                'btn btn-primary btn-link d-flex flex-column-reverse',
+                            }
+                    "
+                    ></x-element-link>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+          @if (item?.icon) {
+            <div
+              class=""
+              [ngClass]="{ 'order-first': !e, 'order-last': e }"
+              >
+              <div class="text-start">
+                <i class="fa-5x" [ngClass]="item.icon"></i>
+              </div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+    }
+    <!-- image clouds -->
+    @if (data.cloud?.length) {
+      <div
+        class="row py-5 justify-content-center w-100"
+        >
+        @for (item of data.cloud; track item; let e = $even) {
+          <div
+            class="d-flex justify-content-between"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            <div class="">
+              @if (item.icon && isUrl(item.icon)) {
+                <img
+                  [src]="item.icon"
+                  class=""
+                  width="72"
+                  height="72"
+                  />
+              }
+              @if (item.icon && !isUrl(item.icon)) {
+                <i
+                  [ngClass]="item.icon"
+                  class="fa-2x"
+                ></i>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    }
+    <!-- lines -->
+    @if (data.lines?.length) {
+      <div class="row col-12 container">
+        @for (item of data.lines; track item) {
+          <div
+            class="pt-3 px-0 border-bottom"
+            [ngClass]="item.class ?? ''"
+            [style]="item.style ?? ''"
+            >
+            @if (item.title) {
+              <h5 class="text-start">
+                @if (!item.url) {
+                  <span>{{ item.title }}</span>
+                }
+                @if (item.url) {
+                  <x-element-link
+                    [data]="item | xPrepend: { class: 'btn btn-link p-0' }"
+                  ></x-element-link>
+                }
+              </h5>
+            }
+          </div>
+        }
+      </div>
+    }
+    </div>
+    }
+    ` }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class CardsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: CardsComponent, isStandalone: false, selector: "x-cards", inputs: { data: "data" }, ngImport: i0, template: `
+    @if (data?.length) {
+      @for (card of data; track card) {
+        <x-card [data]="card"></x-card>
+      }
+    }
+    `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "x-card", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'x-cards', template: `
+    @if (data?.length) {
+      @for (card of data; track card) {
+        <x-card [data]="card"></x-card>
+      }
+    }
+    ` }]
+        }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class CardsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: CardsModule, declarations: [CardsComponent, CardComponent], imports: [SharedModule, i2.FormModule, ElementsModule], exports: [CardsComponent, CardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardsModule, imports: [SharedModule, FormModule.forChild(), ElementsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CardsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CardsComponent, CardComponent],
+                    exports: [CardsComponent, CardComponent],
+                    imports: [SharedModule, FormModule.forChild(), ElementsModule],
+                }]
+        }] });
+
+class HomeComponent {
+    constructor() {
+        this.appDataSelector = CommonActionType.APP_CONFIG;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: HomeComponent, isStandalone: false, selector: "x-home", ngImport: i0, template: `
+    @if (appDataSelector | xSelect | async; as appData) {
+      <x-cards
+        [data]="appData.cards"
+        >
+      </x-cards>
+    } @else {
+      <x-element-loader></x-element-loader>
+    }
+    
+    <!-- misc -->
+    
+    <ng-template #empty>
+      <x-element-blank></x-element-blank>
+    </ng-template>
+    `, isInline: true, dependencies: [{ 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: "component", type: CardsComponent, selector: "x-cards", inputs: ["data"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SelectPipe, name: "xSelect" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-home', template: `
+    @if (appDataSelector | xSelect | async; as appData) {
+      <x-cards
+        [data]="appData.cards"
+        >
+      </x-cards>
+    } @else {
+      <x-element-loader></x-element-loader>
+    }
+    
+    <!-- misc -->
+    
+    <ng-template #empty>
+      <x-element-blank></x-element-blank>
+    </ng-template>
+    ` }]
+        }] });
+
+class HomeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: HomeModule, declarations: [HomeComponent], imports: [SharedModule, i1$1.RouterModule, LayoutsModule,
+            WebgetsModule,
+            ElementsModule,
+            CardsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeModule, imports: [SharedModule,
+            RouterModule.forChild([{ path: '', component: HomeComponent }]),
+            LayoutsModule,
+            WebgetsModule,
+            ElementsModule,
+            CardsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: HomeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HomeComponent],
+                    imports: [
+                        SharedModule,
+                        RouterModule.forChild([{ path: '', component: HomeComponent }]),
+                        LayoutsModule,
+                        WebgetsModule,
+                        ElementsModule,
+                        CardsModule,
+                    ],
+                }]
+        }] });
+
+export { HomeModule };
+//# sourceMappingURL=thescaffold-ngx-apps-blog-home.module-LXerbHw9.mjs.map