@lenne.tech/ng-base 14.25.8 → 14.26.0

package/fesm2020/lenne.tech-ng-base-base-cms.mjs

@@ -217,10 +217,10 @@ class BaseCmsComponent {
     }
 }
 BaseCmsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: BaseCmsComponent, deps: [{ token: BASE_CMS_MODULE_CONFIG }, { token: i1.GraphQLMetaService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i1.AuthService }, { token: i1.CmsService }], target: i0.ɵɵFactoryTarget.Component });
-BaseCmsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: BaseCmsComponent, selector: "app-base-cms", ngImport: i0, template: "<div class=\"main\">\n  <div class=\"sidebar\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? sideBarWidth : '100%' }\">\n    <div class=\"d-none d-md-flex flex-column flex-shrink-0 p-3 h-100\">\n      <ng-container *ngIf=\"moduleConfig.branding\">\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none\"\n          *ngIf=\"!moduleConfig?.logoUrl\"\n        >\n          <span class=\"d-block fs-4\"><b class=\"text-primary\">Base</b>CMS</span>\n          <small class=\"fw-lighter\">The auto generated GraphQL CMS</small>\n        </a>\n\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none w-100\"\n          *ngIf=\"moduleConfig?.logoUrl\"\n        >\n          <img [src]=\"moduleConfig.logoUrl\" class=\"img-responsive w-100\" alt=\"Logo\" />\n        </a>\n        <hr />\n      </ng-container>\n      <ul class=\"nav nav-pills flex-column mb-auto\" *ngIf=\"types\">\n        <li class=\"nav-item\" *ngFor=\"let type of types\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex flex-column d-md-none p-3 h-100\">\n      <div class=\"d-flex justify-content-end\">\n        <i\n          class=\"bi\"\n          [ngClass]=\"{ 'bi-chevron-left': !responsiveToggle, 'bi-chevron-right': responsiveToggle }\"\n          (click)=\"responsiveToggle = !responsiveToggle\"\n        ></i>\n      </div>\n      <ul\n        class=\"nav nav-pills responsive-pills flex-column mb-auto\"\n        [ngClass]=\"{ 'w-100-transition': responsiveToggle }\"\n        *ngIf=\"types\"\n      >\n        <li class=\"nav-item\" *ngFor=\"let type of types\" (click)=\"responsiveToggle = !responsiveToggle\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"sidebar-content\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? 'unset' : '0' }\">\n    <div class=\"p-3 p-md-5 mb-3\">\n      <base-model-table\n        [modelConfig]=\"moduleConfig?.modelConfig[camelModelName]\"\n        [config]=\"moduleConfig?.fieldConfig[camelModelName] || {}\"\n        [modelName]=\"modelName\"\n        [logging]=\"moduleConfig?.logging\"\n        [objectId]=\"id !== 'neu' ? id : ''\"\n        [createMode]=\"id === 'neu'\"\n        (createModeChanged)=\"onCreateModeChanged($event)\"\n        (idSelected)=\"idSelected($event)\"\n        [import]=\"isImportPossible()\"\n        [export]=\"isExportPossible()\"\n        [create]=\"isCreatePossible()\"\n        [update]=\"isUpdatePossible()\"\n        [delete]=\"isDeletePossible()\"\n        [duplicate]=\"isDuplicatePossible()\"\n        [showFavButton]=\"!responsiveToggle\"\n      ></base-model-table>\n    </div>\n  </div>\n</div>\n", styles: [".active{color:var(--bs-primary)!important;background-color:rgba(var(--bs-primary-rgb),.2)!important;font-weight:700}.nav-link{color:var(--bs-body-color)}.sidebar{box-shadow:#7090b014 14px 17px 40px 4px;transition:all .2s linear 0s;z-index:99}.main{display:flex;flex-direction:row;overflow:hidden;height:100%}.main .sidebar{flex-grow:1}@media only screen and (min-width: 992px){.main .sidebar{max-width:300px}}.main .sidebar-content{flex-grow:999;overflow-y:auto;background-color:#f5f7fe;min-height:100vh}.nav-flush .nav-link{border-radius:0}.responsive-pills{width:0;text-align:center;overflow:hidden}.w-100-transition{width:100%;transition:width .2s}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ModelTableComponent, selector: "base-model-table", inputs: ["modelName", "objectId", "createMode", "logging", "create", "update", "delete", "import", "export", "duplicate", "modelConfig", "config", "showFavButton"], outputs: ["idSelected", "createModeChanged"] }] });
+BaseCmsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: BaseCmsComponent, selector: "app-base-cms", ngImport: i0, template: "<div class=\"main\">\n  <div\n    class=\"sidebar\"\n    [ngStyle]=\"{\n      'flex-basis': !responsiveToggle ? sideBarWidth : '100%',\n      'min-width': !responsiveToggle ? sideBarWidth : ''\n    }\"\n  >\n    <div class=\"d-none d-md-flex flex-column flex-shrink-0 p-3 h-100\">\n      <ng-container *ngIf=\"moduleConfig.branding\">\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none\"\n          *ngIf=\"!moduleConfig?.logoUrl\"\n        >\n          <span class=\"d-block fs-4\"><b class=\"text-primary\">Base</b>CMS</span>\n          <small class=\"fw-lighter\">The auto generated GraphQL CMS</small>\n        </a>\n\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none w-100\"\n          *ngIf=\"moduleConfig?.logoUrl\"\n        >\n          <img [src]=\"moduleConfig.logoUrl\" class=\"img-responsive w-100\" alt=\"Logo\" />\n        </a>\n        <hr />\n      </ng-container>\n      <ul class=\"nav nav-pills flex-column mb-auto\" *ngIf=\"types\">\n        <li class=\"nav-item\" *ngFor=\"let type of types\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex flex-column d-md-none p-3 h-100\">\n      <div class=\"d-flex justify-content-end\">\n        <i\n          class=\"bi\"\n          [ngClass]=\"{ 'bi-chevron-left': !responsiveToggle, 'bi-chevron-right': responsiveToggle }\"\n          (click)=\"responsiveToggle = !responsiveToggle\"\n        ></i>\n      </div>\n      <ul\n        class=\"nav nav-pills responsive-pills flex-column mb-auto\"\n        [ngClass]=\"{ 'w-100-transition': responsiveToggle }\"\n        *ngIf=\"types\"\n      >\n        <li class=\"nav-item\" *ngFor=\"let type of types\" (click)=\"responsiveToggle = !responsiveToggle\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"sidebar-content\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? 'unset' : '0' }\">\n    <div class=\"p-3 p-md-5 mb-3\">\n      <base-model-table\n        [modelConfig]=\"moduleConfig?.modelConfig[camelModelName]\"\n        [config]=\"moduleConfig?.fieldConfig[camelModelName] || {}\"\n        [modelName]=\"modelName\"\n        [logging]=\"moduleConfig?.logging\"\n        [objectId]=\"id !== 'neu' ? id : ''\"\n        [createMode]=\"id === 'neu'\"\n        (createModeChanged)=\"onCreateModeChanged($event)\"\n        (idSelected)=\"idSelected($event)\"\n        [import]=\"isImportPossible()\"\n        [export]=\"isExportPossible()\"\n        [create]=\"isCreatePossible()\"\n        [update]=\"isUpdatePossible()\"\n        [delete]=\"isDeletePossible()\"\n        [duplicate]=\"isDuplicatePossible()\"\n        [showFavButton]=\"!responsiveToggle\"\n      ></base-model-table>\n    </div>\n  </div>\n</div>\n", styles: [".active{color:var(--bs-primary)!important;background-color:rgba(var(--bs-primary-rgb),.2)!important;font-weight:700}.nav-link{color:var(--bs-body-color)}.sidebar{box-shadow:#7090b014 14px 17px 40px 4px;transition:all .2s linear 0s;z-index:99}.main{display:flex;flex-direction:row;overflow:hidden;height:100%}.main .sidebar{flex-grow:1}@media only screen and (min-width: 992px){.main .sidebar{max-width:300px}}.main .sidebar-content{flex-grow:999;overflow-y:auto;background-color:#f5f7fe;min-height:100vh}.nav-flush .nav-link{border-radius:0}.responsive-pills{width:0;text-align:center;overflow:hidden}.w-100-transition{width:100%;transition:width .2s}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ModelTableComponent, selector: "base-model-table", inputs: ["modelName", "objectId", "createMode", "logging", "create", "update", "delete", "import", "export", "duplicate", "modelConfig", "config", "showFavButton"], outputs: ["idSelected", "createModeChanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: BaseCmsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-base-cms', template: "<div class=\"main\">\n  <div class=\"sidebar\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? sideBarWidth : '100%' }\">\n    <div class=\"d-none d-md-flex flex-column flex-shrink-0 p-3 h-100\">\n      <ng-container *ngIf=\"moduleConfig.branding\">\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none\"\n          *ngIf=\"!moduleConfig?.logoUrl\"\n        >\n          <span class=\"d-block fs-4\"><b class=\"text-primary\">Base</b>CMS</span>\n          <small class=\"fw-lighter\">The auto generated GraphQL CMS</small>\n        </a>\n\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none w-100\"\n          *ngIf=\"moduleConfig?.logoUrl\"\n        >\n          <img [src]=\"moduleConfig.logoUrl\" class=\"img-responsive w-100\" alt=\"Logo\" />\n        </a>\n        <hr />\n      </ng-container>\n      <ul class=\"nav nav-pills flex-column mb-auto\" *ngIf=\"types\">\n        <li class=\"nav-item\" *ngFor=\"let type of types\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex flex-column d-md-none p-3 h-100\">\n      <div class=\"d-flex justify-content-end\">\n        <i\n          class=\"bi\"\n          [ngClass]=\"{ 'bi-chevron-left': !responsiveToggle, 'bi-chevron-right': responsiveToggle }\"\n          (click)=\"responsiveToggle = !responsiveToggle\"\n        ></i>\n      </div>\n      <ul\n        class=\"nav nav-pills responsive-pills flex-column mb-auto\"\n        [ngClass]=\"{ 'w-100-transition': responsiveToggle }\"\n        *ngIf=\"types\"\n      >\n        <li class=\"nav-item\" *ngFor=\"let type of types\" (click)=\"responsiveToggle = !responsiveToggle\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"sidebar-content\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? 'unset' : '0' }\">\n    <div class=\"p-3 p-md-5 mb-3\">\n      <base-model-table\n        [modelConfig]=\"moduleConfig?.modelConfig[camelModelName]\"\n        [config]=\"moduleConfig?.fieldConfig[camelModelName] || {}\"\n        [modelName]=\"modelName\"\n        [logging]=\"moduleConfig?.logging\"\n        [objectId]=\"id !== 'neu' ? id : ''\"\n        [createMode]=\"id === 'neu'\"\n        (createModeChanged)=\"onCreateModeChanged($event)\"\n        (idSelected)=\"idSelected($event)\"\n        [import]=\"isImportPossible()\"\n        [export]=\"isExportPossible()\"\n        [create]=\"isCreatePossible()\"\n        [update]=\"isUpdatePossible()\"\n        [delete]=\"isDeletePossible()\"\n        [duplicate]=\"isDuplicatePossible()\"\n        [showFavButton]=\"!responsiveToggle\"\n      ></base-model-table>\n    </div>\n  </div>\n</div>\n", styles: [".active{color:var(--bs-primary)!important;background-color:rgba(var(--bs-primary-rgb),.2)!important;font-weight:700}.nav-link{color:var(--bs-body-color)}.sidebar{box-shadow:#7090b014 14px 17px 40px 4px;transition:all .2s linear 0s;z-index:99}.main{display:flex;flex-direction:row;overflow:hidden;height:100%}.main .sidebar{flex-grow:1}@media only screen and (min-width: 992px){.main .sidebar{max-width:300px}}.main .sidebar-content{flex-grow:999;overflow-y:auto;background-color:#f5f7fe;min-height:100vh}.nav-flush .nav-link{border-radius:0}.responsive-pills{width:0;text-align:center;overflow:hidden}.w-100-transition{width:100%;transition:width .2s}\n"] }]
+            args: [{ selector: 'app-base-cms', template: "<div class=\"main\">\n  <div\n    class=\"sidebar\"\n    [ngStyle]=\"{\n      'flex-basis': !responsiveToggle ? sideBarWidth : '100%',\n      'min-width': !responsiveToggle ? sideBarWidth : ''\n    }\"\n  >\n    <div class=\"d-none d-md-flex flex-column flex-shrink-0 p-3 h-100\">\n      <ng-container *ngIf=\"moduleConfig.branding\">\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none\"\n          *ngIf=\"!moduleConfig?.logoUrl\"\n        >\n          <span class=\"d-block fs-4\"><b class=\"text-primary\">Base</b>CMS</span>\n          <small class=\"fw-lighter\">The auto generated GraphQL CMS</small>\n        </a>\n\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none w-100\"\n          *ngIf=\"moduleConfig?.logoUrl\"\n        >\n          <img [src]=\"moduleConfig.logoUrl\" class=\"img-responsive w-100\" alt=\"Logo\" />\n        </a>\n        <hr />\n      </ng-container>\n      <ul class=\"nav nav-pills flex-column mb-auto\" *ngIf=\"types\">\n        <li class=\"nav-item\" *ngFor=\"let type of types\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex flex-column d-md-none p-3 h-100\">\n      <div class=\"d-flex justify-content-end\">\n        <i\n          class=\"bi\"\n          [ngClass]=\"{ 'bi-chevron-left': !responsiveToggle, 'bi-chevron-right': responsiveToggle }\"\n          (click)=\"responsiveToggle = !responsiveToggle\"\n        ></i>\n      </div>\n      <ul\n        class=\"nav nav-pills responsive-pills flex-column mb-auto\"\n        [ngClass]=\"{ 'w-100-transition': responsiveToggle }\"\n        *ngIf=\"types\"\n      >\n        <li class=\"nav-item\" *ngFor=\"let type of types\" (click)=\"responsiveToggle = !responsiveToggle\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"sidebar-content\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? 'unset' : '0' }\">\n    <div class=\"p-3 p-md-5 mb-3\">\n      <base-model-table\n        [modelConfig]=\"moduleConfig?.modelConfig[camelModelName]\"\n        [config]=\"moduleConfig?.fieldConfig[camelModelName] || {}\"\n        [modelName]=\"modelName\"\n        [logging]=\"moduleConfig?.logging\"\n        [objectId]=\"id !== 'neu' ? id : ''\"\n        [createMode]=\"id === 'neu'\"\n        (createModeChanged)=\"onCreateModeChanged($event)\"\n        (idSelected)=\"idSelected($event)\"\n        [import]=\"isImportPossible()\"\n        [export]=\"isExportPossible()\"\n        [create]=\"isCreatePossible()\"\n        [update]=\"isUpdatePossible()\"\n        [delete]=\"isDeletePossible()\"\n        [duplicate]=\"isDuplicatePossible()\"\n        [showFavButton]=\"!responsiveToggle\"\n      ></base-model-table>\n    </div>\n  </div>\n</div>\n", styles: [".active{color:var(--bs-primary)!important;background-color:rgba(var(--bs-primary-rgb),.2)!important;font-weight:700}.nav-link{color:var(--bs-body-color)}.sidebar{box-shadow:#7090b014 14px 17px 40px 4px;transition:all .2s linear 0s;z-index:99}.main{display:flex;flex-direction:row;overflow:hidden;height:100%}.main .sidebar{flex-grow:1}@media only screen and (min-width: 992px){.main .sidebar{max-width:300px}}.main .sidebar-content{flex-grow:999;overflow-y:auto;background-color:#f5f7fe;min-height:100vh}.nav-flush .nav-link{border-radius:0}.responsive-pills{width:0;text-align:center;overflow:hidden}.w-100-transition{width:100%;transition:width .2s}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [BASE_CMS_MODULE_CONFIG]

package/fesm2020/lenne.tech-ng-base-base-cms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lenne.tech-ng-base-base-cms.mjs","sources":["../../../projects/ng-base/base-cms/interfaces/base-cms-module-config.interface.ts","../../../projects/ng-base/base-cms/pages/base-cms/base-cms.component.ts","../../../projects/ng-base/base-cms/pages/base-cms/base-cms.component.html","../../../projects/ng-base/base-cms/base-cms-routing.module.ts","../../../projects/ng-base/base-cms/base-cms.module.ts","../../../projects/ng-base/base-cms/public-api.ts","../../../projects/ng-base/base-cms/lenne.tech-ng-base-base-cms.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { CMSFieldConfig, CMSModelConfig } from '@lenne.tech/ng-base/shared';\n\nexport interface BaseCMSModuleConfig {\n  modelConfig?: { [key: string]: CMSModelConfig | any };\n  fieldConfig?: { [key: string]: { [key: string]: CMSFieldConfig | any } };\n  logging?: boolean;\n  logoUrl?: string;\n  branding?: boolean;\n}\n\nexport const BASE_CMS_MODULE_CONFIG = new InjectionToken('BASE_CMS_MODULE_CONFIG');\n","import { Component, Inject, OnDestroy, OnInit } from '@angular/core';\nimport {\n  AuthService,\n  BasicUser,\n  CmsService,\n  GraphqlCrudType,\n  GraphQLMeta,\n  GraphQLMetaService,\n} from '@lenne.tech/ng-base/shared';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { BASE_CMS_MODULE_CONFIG, BaseCMSModuleConfig } from '../../interfaces/base-cms-module-config.interface';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'app-base-cms',\n  templateUrl: './base-cms.component.html',\n  styleUrls: ['./base-cms.component.scss'],\n})\nexport class BaseCmsComponent implements OnInit, OnDestroy {\n  meta: GraphQLMeta;\n  modelName: string;\n  camelModelName: string;\n  id: string;\n  types: GraphqlCrudType[] = [];\n  subscription = new Subscription();\n  sideBarWidth = '22%';\n  responsiveToggle = false;\n\n  constructor(\n    @Inject(BASE_CMS_MODULE_CONFIG) public moduleConfig: BaseCMSModuleConfig,\n    private graphQLMetaService: GraphQLMetaService,\n    private route: ActivatedRoute,\n    private router: Router,\n    private authService: AuthService,\n    private cmsService: CmsService\n  ) {\n    this.calcSideBarWidth();\n    this.subscription.add(\n      this.route.params.subscribe((value) => {\n        if (value['modelName']) {\n          const exclude = this.moduleConfig.modelConfig[value['modelName']]?.exclude;\n\n          if (exclude !== null && !exclude) {\n            this.modelName = value['modelName'];\n            this.camelModelName = this.toCamelCase(this.modelName);\n          } else {\n            this.init().then((types: GraphqlCrudType[]) => {\n              this.router.navigate(['../' + this.toKebabCase(types[0].name)], { relativeTo: this.route });\n            });\n          }\n        }\n\n        if (value['id']) {\n          this.id = value['id'];\n        }\n      })\n    );\n  }\n\n  async ngOnInit() {\n    await this.init();\n  }\n\n  ngOnDestroy() {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * It returns a promise that resolves to an array of GraphqlCrudType objects\n   *\n   * @returns The types that are available to the user.\n   */\n  init(): Promise<GraphqlCrudType[]> {\n    return new Promise((resolve, reject) => {\n      this.graphQLMetaService.getMeta().subscribe((meta) => {\n        this.meta = meta;\n\n        if (this.route.snapshot?.params?.['modelName']) {\n          this.modelName = this.route.snapshot?.params?.['modelName'];\n          this.camelModelName = this.toCamelCase(this.modelName);\n        }\n\n        if (this.route.snapshot?.params?.['id']) {\n          this.id = this.route.snapshot?.params?.['id'];\n        }\n\n        const types = meta.getTypes(this.moduleConfig?.logging);\n\n        // Check for excluded types\n        let filteredTypes = types.filter((e) => !this.moduleConfig?.modelConfig[e.name.toLowerCase()]?.exclude);\n\n        // Sort types\n        filteredTypes = filteredTypes.sort((a, b) => {\n          return (\n            (this.moduleConfig?.modelConfig[a.name.toLowerCase()]?.order\n              ? this.moduleConfig?.modelConfig[a.name.toLowerCase()]?.order\n              : 99) -\n            (this.moduleConfig?.modelConfig[b.name.toLowerCase()]?.order\n              ? this.moduleConfig?.modelConfig[b.name.toLowerCase()]?.order\n              : 99)\n          );\n        });\n\n        // Check for restricted types\n        this.types = filteredTypes.filter((e) => {\n          if (this.moduleConfig?.modelConfig[e.name.toLowerCase()]?.restricted) {\n            if (!this.authService?.currentUser) {\n              return false;\n            }\n            const user = this.authService?.currentUser;\n            const mappedUser = BasicUser.map(user);\n\n            return mappedUser?.hasAllRoles(this.moduleConfig?.modelConfig[e.name.toLowerCase()]?.roles);\n          } else {\n            return true;\n          }\n        });\n\n        if (this.moduleConfig?.logging) {\n          console.log('BaseCmsComponent::init->types', this.types);\n          console.log('BaseCmsComponent::init->camelModelName', this.camelModelName);\n          console.log('BaseCmsComponent::init->fieldConfig', this.moduleConfig?.fieldConfig);\n        }\n\n        resolve(this.types);\n\n        if (!this.modelName && this.types) {\n          this.router.navigate(['./' + this.toKebabCase(this.types[0].name)], { relativeTo: this.route });\n        }\n      });\n    });\n  }\n\n  /**\n   * If the model name is set and the types are set, then return the type that matches the model name\n   *\n   * @returns The type object that matches the model name.\n   */\n  getTypeByModelName() {\n    if (this.modelName && this.types) {\n      return this.types.find((e) => this.toKebabCase(e.name) === this.toKebabCase(this.modelName));\n    } else {\n      return null;\n    }\n  }\n\n  /**\n   * When the createModeChanged event is emitted, if the createMode is true, navigate to the new route\n   *\n   * @param createMode - boolean - This is a boolean value that indicates whether the user is in create mode or\n   * not.\n   */\n  onCreateModeChanged(createMode: boolean) {\n    if (createMode) {\n      this.router.navigate(['./' + 'neu'], { relativeTo: this.route });\n    }\n  }\n\n  /**\n   * If the type exists, return the create property of the type, otherwise return false.\n   *\n   * @returns A boolean value.\n   */\n  isCreatePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.create : false;\n  }\n\n  isImportPossible(): boolean {\n    let result = false;\n    const config = this.moduleConfig?.modelConfig[this.camelModelName]?.import;\n\n    if (config !== null && config !== undefined) {\n      result = config;\n    }\n\n    return result;\n  }\n\n  isExportPossible(): boolean {\n    let result = false;\n    const config = this.moduleConfig?.modelConfig[this.camelModelName]?.export;\n\n    if (config !== null && config !== undefined) {\n      result = config;\n    }\n\n    return result;\n  }\n\n  /**\n   * If the model name is found in the type map, return the update property of the type object\n   *\n   * @returns A boolean value.\n   */\n  isUpdatePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.update : false;\n  }\n\n  /**\n   * If the type is defined, return the delete property of the type, otherwise return false\n   *\n   * @returns A boolean value.\n   */\n  isDeletePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.delete : false;\n  }\n\n  /**\n   * If the model name is found in the type array, return the duplicate property of the type object\n   *\n   * @returns A boolean value.\n   */\n  isDuplicatePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.duplicate : false;\n  }\n\n  /**\n   * If the id is truthy, navigate to the id, otherwise navigate to the parent route\n   */\n  idSelected(id: string) {\n    if (id) {\n      this.router.navigate(['./' + id], { relativeTo: this.route });\n    } else {\n      this.router.navigate(['..'], { relativeTo: this.route });\n    }\n  }\n\n  /**\n   * Transform string to kebab case\n   */\n  toKebabCase(str: string) {\n    return str?.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n  }\n\n  /**\n   * Transform string to camel case\n   */\n  toCamelCase(str: string) {\n    return str?.replace(/-./g, (match) => match[1].toUpperCase());\n  }\n\n  /**\n   * Transform first letter to lower case\n   */\n  lowerCaseFirstLetter(value: string) {\n    return this.cmsService.lowerCaseFirstLetter(value);\n  }\n\n  /**\n   * Calculates sidebar width based on screen size\n   */\n  calcSideBarWidth() {\n    this.sideBarWidth = window.innerWidth < 768 ? '8%' : '22%';\n  }\n}\n","<div class=\"main\">\n  <div class=\"sidebar\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? sideBarWidth : '100%' }\">\n    <div class=\"d-none d-md-flex flex-column flex-shrink-0 p-3 h-100\">\n      <ng-container *ngIf=\"moduleConfig.branding\">\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none\"\n          *ngIf=\"!moduleConfig?.logoUrl\"\n        >\n          <span class=\"d-block fs-4\"><b class=\"text-primary\">Base</b>CMS</span>\n          <small class=\"fw-lighter\">The auto generated GraphQL CMS</small>\n        </a>\n\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none w-100\"\n          *ngIf=\"moduleConfig?.logoUrl\"\n        >\n          <img [src]=\"moduleConfig.logoUrl\" class=\"img-responsive w-100\" alt=\"Logo\" />\n        </a>\n        <hr />\n      </ng-container>\n      <ul class=\"nav nav-pills flex-column mb-auto\" *ngIf=\"types\">\n        <li class=\"nav-item\" *ngFor=\"let type of types\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex flex-column d-md-none p-3 h-100\">\n      <div class=\"d-flex justify-content-end\">\n        <i\n          class=\"bi\"\n          [ngClass]=\"{ 'bi-chevron-left': !responsiveToggle, 'bi-chevron-right': responsiveToggle }\"\n          (click)=\"responsiveToggle = !responsiveToggle\"\n        ></i>\n      </div>\n      <ul\n        class=\"nav nav-pills responsive-pills flex-column mb-auto\"\n        [ngClass]=\"{ 'w-100-transition': responsiveToggle }\"\n        *ngIf=\"types\"\n      >\n        <li class=\"nav-item\" *ngFor=\"let type of types\" (click)=\"responsiveToggle = !responsiveToggle\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"sidebar-content\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? 'unset' : '0' }\">\n    <div class=\"p-3 p-md-5 mb-3\">\n      <base-model-table\n        [modelConfig]=\"moduleConfig?.modelConfig[camelModelName]\"\n        [config]=\"moduleConfig?.fieldConfig[camelModelName] || {}\"\n        [modelName]=\"modelName\"\n        [logging]=\"moduleConfig?.logging\"\n        [objectId]=\"id !== 'neu' ? id : ''\"\n        [createMode]=\"id === 'neu'\"\n        (createModeChanged)=\"onCreateModeChanged($event)\"\n        (idSelected)=\"idSelected($event)\"\n        [import]=\"isImportPossible()\"\n        [export]=\"isExportPossible()\"\n        [create]=\"isCreatePossible()\"\n        [update]=\"isUpdatePossible()\"\n        [delete]=\"isDeletePossible()\"\n        [duplicate]=\"isDuplicatePossible()\"\n        [showFavButton]=\"!responsiveToggle\"\n      ></base-model-table>\n    </div>\n  </div>\n</div>\n","import { RouterModule, Routes } from '@angular/router';\nimport { NgModule } from '@angular/core';\nimport { BaseCmsComponent } from './pages/base-cms/base-cms.component';\n\nconst routes: Routes = [\n  {\n    path: '',\n    component: BaseCmsComponent,\n  },\n  {\n    path: ':modelName',\n    component: BaseCmsComponent,\n  },\n  {\n    path: ':modelName/:id',\n    component: BaseCmsComponent,\n  },\n];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule],\n})\nexport class BaseCMSRoutingModule {}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { BaseCmsComponent } from './pages/base-cms/base-cms.component';\nimport { BaseCMSRoutingModule } from './base-cms-routing.module';\nimport { BaseComponentsModule } from '@lenne.tech/ng-base/base-components';\nimport { BASE_CMS_MODULE_CONFIG, BaseCMSModuleConfig } from './interfaces/base-cms-module-config.interface';\n\nexport function CMSConfigFactory() {\n  return {\n    modelConfig: {},\n    fieldConfig: {},\n    branding: true,\n    logoUrl: '',\n    logging: false,\n    ...BaseCMSModule.config,\n  };\n}\n\n@NgModule({\n  imports: [\n    // Modules\n    CommonModule,\n    ReactiveFormsModule,\n    BaseCMSRoutingModule,\n    BaseComponentsModule,\n  ],\n  declarations: [BaseCmsComponent],\n  exports: [],\n  providers: [\n    {\n      provide: BASE_CMS_MODULE_CONFIG,\n      useFactory: CMSConfigFactory,\n    },\n  ],\n})\nexport class BaseCMSModule {\n  static config: BaseCMSModuleConfig;\n}\n","/**\n * Exports for public API\n */\n\n// Module\nexport * from './base-cms.module';\n\n// Pages\nexport * from './pages/base-cms/base-cms.component';\n\n// Interface\nexport * from './interfaces/base-cms-module-config.interface';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAWa,sBAAsB,GAAG,IAAI,cAAc,CAAC,wBAAwB;;MCOpE,gBAAgB,CAAA;IAU3B,WACyC,CAAA,YAAiC,EAChE,kBAAsC,EACtC,KAAqB,EACrB,MAAc,EACd,WAAwB,EACxB,UAAsB,EAAA;QALS,IAAY,CAAA,YAAA,GAAZ,YAAY,CAAqB;QAChE,IAAkB,CAAA,kBAAA,GAAlB,kBAAkB,CAAoB;QACtC,IAAK,CAAA,KAAA,GAAL,KAAK,CAAgB;QACrB,IAAM,CAAA,MAAA,GAAN,MAAM,CAAQ;QACd,IAAW,CAAA,WAAA,GAAX,WAAW,CAAa;QACxB,IAAU,CAAA,UAAA,GAAV,UAAU,CAAY;QAXhC,IAAK,CAAA,KAAA,GAAsB,EAAE,CAAC;AAC9B,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QAClC,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;QACrB,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;QAUvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CACnB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,KAAI;AACpC,YAAA,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE;AACtB,gBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC;AAE3E,gBAAA,IAAI,OAAO,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;AAChC,oBAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;oBACpC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACxD,iBAAA;AAAM,qBAAA;oBACL,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,KAAwB,KAAI;AAC5C,wBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAC9F,qBAAC,CAAC,CAAC;AACJ,iBAAA;AACF,aAAA;AAED,YAAA,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE;AACf,gBAAA,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACvB,aAAA;SACF,CAAC,CACH,CAAC;KACH;AAED,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;KACnB;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;KACjC;AAED;;;;AAIG;IACH,IAAI,GAAA;QACF,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,KAAI;YACrC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,KAAI;AACnD,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBAEjB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAAC,EAAE;AAC9C,oBAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;oBAC5D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACxD,iBAAA;gBAED,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE;AACvC,oBAAA,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAC/C,iBAAA;AAED,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;;AAGxD,gBAAA,IAAI,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC;;gBAGxG,aAAa,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC1C,oBAAA,QACE,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK;AAC1D,0BAAE,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK;0BAC3D,EAAE;AACN,yBAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK;AAC1D,8BAAE,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK;AAC7D,8BAAE,EAAE,CAAC,EACP;AACJ,iBAAC,CAAC,CAAC;;gBAGH,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,KAAI;AACtC,oBAAA,IAAI,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,UAAU,EAAE;AACpE,wBAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,EAAE;AAClC,4BAAA,OAAO,KAAK,CAAC;AACd,yBAAA;AACD,wBAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;wBAC3C,MAAM,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;wBAEvC,OAAO,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7F,qBAAA;AAAM,yBAAA;AACL,wBAAA,OAAO,IAAI,CAAC;AACb,qBAAA;AACH,iBAAC,CAAC,CAAC;AAEH,gBAAA,IAAI,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE;oBAC9B,OAAO,CAAC,GAAG,CAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;oBACzD,OAAO,CAAC,GAAG,CAAC,wCAAwC,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;oBAC3E,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;AACpF,iBAAA;AAED,gBAAA,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE;AACjC,oBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AACjG,iBAAA;AACH,aAAC,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;KACJ;AAED;;;;AAIG;IACH,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,EAAE;AAChC,YAAA,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;AAC9F,SAAA;AAAM,aAAA;AACL,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;KACF;AAED;;;;;AAKG;AACH,IAAA,mBAAmB,CAAC,UAAmB,EAAA;AACrC,QAAA,IAAI,UAAU,EAAE;AACd,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAClE,SAAA;KACF;AAED;;;;AAIG;IACH,gBAAgB,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACvC,OAAO,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACnC;IAED,gBAAgB,GAAA;QACd,IAAI,MAAM,GAAG,KAAK,CAAC;AACnB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;AAE3E,QAAA,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,EAAE;YAC3C,MAAM,GAAG,MAAM,CAAC;AACjB,SAAA;AAED,QAAA,OAAO,MAAM,CAAC;KACf;IAED,gBAAgB,GAAA;QACd,IAAI,MAAM,GAAG,KAAK,CAAC;AACnB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;AAE3E,QAAA,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,EAAE;YAC3C,MAAM,GAAG,MAAM,CAAC;AACjB,SAAA;AAED,QAAA,OAAO,MAAM,CAAC;KACf;AAED;;;;AAIG;IACH,gBAAgB,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACvC,OAAO,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACnC;AAED;;;;AAIG;IACH,gBAAgB,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACvC,OAAO,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACnC;AAED;;;;AAIG;IACH,mBAAmB,GAAA;AACjB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACvC,OAAO,IAAI,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACtC;AAED;;AAEG;AACH,IAAA,UAAU,CAAC,EAAU,EAAA;AACnB,QAAA,IAAI,EAAE,EAAE;AACN,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAC/D,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;AAC1D,SAAA;KACF;AAED;;AAEG;AACH,IAAA,WAAW,CAAC,GAAW,EAAA;QACrB,OAAO,GAAG,EAAE,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/D;AAED;;AAEG;AACH,IAAA,WAAW,CAAC,GAAW,EAAA;AACrB,QAAA,OAAO,GAAG,EAAE,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;KAC/D;AAED;;AAEG;AACH,IAAA,oBAAoB,CAAC,KAAa,EAAA;QAChC,OAAO,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KACpD;AAED;;AAEG;IACH,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;KAC5D;;AA/OU,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,kBAWjB,sBAAsB,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,WAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAXrB,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,oDClB7B,4jIAgGA,EAAA,MAAA,EAAA,CAAA,+oBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;4FD9Ea,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,SAAS;+BACE,cAAc,EAAA,QAAA,EAAA,4jIAAA,EAAA,MAAA,EAAA,CAAA,+oBAAA,CAAA,EAAA,CAAA;;0BAerB,MAAM;2BAAC,sBAAsB,CAAA;;;AEzBlC,MAAM,MAAM,GAAW;AACrB,IAAA;AACE,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,SAAS,EAAE,gBAAgB;AAC5B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,SAAS,EAAE,gBAAgB;AAC5B,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,gBAAgB;AACtB,QAAA,SAAS,EAAE,gBAAgB;AAC5B,KAAA;CACF,CAAC;MAMW,oBAAoB,CAAA;;kHAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAApB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,wCAFrB,YAAY,CAAA,EAAA,CAAA,CAAA;mHAEX,oBAAoB,EAAA,OAAA,EAAA,CAHrB,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,EAC7B,YAAY,CAAA,EAAA,CAAA,CAAA;4FAEX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;oBACxC,OAAO,EAAE,CAAC,YAAY,CAAC;AACxB,iBAAA,CAAA;;;SCde,gBAAgB,GAAA;IAC9B,OAAO;AACL,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,OAAO,EAAE,EAAE;AACX,QAAA,OAAO,EAAE,KAAK;QACd,GAAG,aAAa,CAAC,MAAM;KACxB,CAAC;AACJ,CAAC;MAmBY,aAAa,CAAA;;2GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAb,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,iBATT,gBAAgB,CAAA,EAAA,OAAA,EAAA;;QAL7B,YAAY;QACZ,mBAAmB;QACnB,oBAAoB;QACpB,oBAAoB,CAAA,EAAA,CAAA,CAAA;AAWX,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,EAPb,SAAA,EAAA;AACT,QAAA;AACE,YAAA,OAAO,EAAE,sBAAsB;AAC/B,YAAA,UAAU,EAAE,gBAAgB;AAC7B,SAAA;AACF,KAAA,EAAA,OAAA,EAAA;;QAZC,YAAY;QACZ,mBAAmB;QACnB,oBAAoB;QACpB,oBAAoB,CAAA,EAAA,CAAA,CAAA;4FAWX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAjBzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;;wBAEP,YAAY;wBACZ,mBAAmB;wBACnB,oBAAoB;wBACpB,oBAAoB;AACrB,qBAAA;oBACD,YAAY,EAAE,CAAC,gBAAgB,CAAC;AAChC,oBAAA,OAAO,EAAE,EAAE;AACX,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,sBAAsB;AAC/B,4BAAA,UAAU,EAAE,gBAAgB;AAC7B,yBAAA;AACF,qBAAA;AACF,iBAAA,CAAA;;;ACnCD;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"lenne.tech-ng-base-base-cms.mjs","sources":["../../../projects/ng-base/base-cms/interfaces/base-cms-module-config.interface.ts","../../../projects/ng-base/base-cms/pages/base-cms/base-cms.component.ts","../../../projects/ng-base/base-cms/pages/base-cms/base-cms.component.html","../../../projects/ng-base/base-cms/base-cms-routing.module.ts","../../../projects/ng-base/base-cms/base-cms.module.ts","../../../projects/ng-base/base-cms/public-api.ts","../../../projects/ng-base/base-cms/lenne.tech-ng-base-base-cms.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { CMSFieldConfig, CMSModelConfig } from '@lenne.tech/ng-base/shared';\n\nexport interface BaseCMSModuleConfig {\n  modelConfig?: { [key: string]: CMSModelConfig | any };\n  fieldConfig?: { [key: string]: { [key: string]: CMSFieldConfig | any } };\n  logging?: boolean;\n  logoUrl?: string;\n  branding?: boolean;\n}\n\nexport const BASE_CMS_MODULE_CONFIG = new InjectionToken('BASE_CMS_MODULE_CONFIG');\n","import { Component, Inject, OnDestroy, OnInit } from '@angular/core';\nimport {\n  AuthService,\n  BasicUser,\n  CmsService,\n  GraphqlCrudType,\n  GraphQLMeta,\n  GraphQLMetaService,\n} from '@lenne.tech/ng-base/shared';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { BASE_CMS_MODULE_CONFIG, BaseCMSModuleConfig } from '../../interfaces/base-cms-module-config.interface';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'app-base-cms',\n  templateUrl: './base-cms.component.html',\n  styleUrls: ['./base-cms.component.scss'],\n})\nexport class BaseCmsComponent implements OnInit, OnDestroy {\n  meta: GraphQLMeta;\n  modelName: string;\n  camelModelName: string;\n  id: string;\n  types: GraphqlCrudType[] = [];\n  subscription = new Subscription();\n  sideBarWidth = '22%';\n  responsiveToggle = false;\n\n  constructor(\n    @Inject(BASE_CMS_MODULE_CONFIG) public moduleConfig: BaseCMSModuleConfig,\n    private graphQLMetaService: GraphQLMetaService,\n    private route: ActivatedRoute,\n    private router: Router,\n    private authService: AuthService,\n    private cmsService: CmsService\n  ) {\n    this.calcSideBarWidth();\n    this.subscription.add(\n      this.route.params.subscribe((value) => {\n        if (value['modelName']) {\n          const exclude = this.moduleConfig.modelConfig[value['modelName']]?.exclude;\n\n          if (exclude !== null && !exclude) {\n            this.modelName = value['modelName'];\n            this.camelModelName = this.toCamelCase(this.modelName);\n          } else {\n            this.init().then((types: GraphqlCrudType[]) => {\n              this.router.navigate(['../' + this.toKebabCase(types[0].name)], { relativeTo: this.route });\n            });\n          }\n        }\n\n        if (value['id']) {\n          this.id = value['id'];\n        }\n      })\n    );\n  }\n\n  async ngOnInit() {\n    await this.init();\n  }\n\n  ngOnDestroy() {\n    this.subscription.unsubscribe();\n  }\n\n  /**\n   * It returns a promise that resolves to an array of GraphqlCrudType objects\n   *\n   * @returns The types that are available to the user.\n   */\n  init(): Promise<GraphqlCrudType[]> {\n    return new Promise((resolve, reject) => {\n      this.graphQLMetaService.getMeta().subscribe((meta) => {\n        this.meta = meta;\n\n        if (this.route.snapshot?.params?.['modelName']) {\n          this.modelName = this.route.snapshot?.params?.['modelName'];\n          this.camelModelName = this.toCamelCase(this.modelName);\n        }\n\n        if (this.route.snapshot?.params?.['id']) {\n          this.id = this.route.snapshot?.params?.['id'];\n        }\n\n        const types = meta.getTypes(this.moduleConfig?.logging);\n\n        // Check for excluded types\n        let filteredTypes = types.filter((e) => !this.moduleConfig?.modelConfig[e.name.toLowerCase()]?.exclude);\n\n        // Sort types\n        filteredTypes = filteredTypes.sort((a, b) => {\n          return (\n            (this.moduleConfig?.modelConfig[a.name.toLowerCase()]?.order\n              ? this.moduleConfig?.modelConfig[a.name.toLowerCase()]?.order\n              : 99) -\n            (this.moduleConfig?.modelConfig[b.name.toLowerCase()]?.order\n              ? this.moduleConfig?.modelConfig[b.name.toLowerCase()]?.order\n              : 99)\n          );\n        });\n\n        // Check for restricted types\n        this.types = filteredTypes.filter((e) => {\n          if (this.moduleConfig?.modelConfig[e.name.toLowerCase()]?.restricted) {\n            if (!this.authService?.currentUser) {\n              return false;\n            }\n            const user = this.authService?.currentUser;\n            const mappedUser = BasicUser.map(user);\n\n            return mappedUser?.hasAllRoles(this.moduleConfig?.modelConfig[e.name.toLowerCase()]?.roles);\n          } else {\n            return true;\n          }\n        });\n\n        if (this.moduleConfig?.logging) {\n          console.log('BaseCmsComponent::init->types', this.types);\n          console.log('BaseCmsComponent::init->camelModelName', this.camelModelName);\n          console.log('BaseCmsComponent::init->fieldConfig', this.moduleConfig?.fieldConfig);\n        }\n\n        resolve(this.types);\n\n        if (!this.modelName && this.types) {\n          this.router.navigate(['./' + this.toKebabCase(this.types[0].name)], { relativeTo: this.route });\n        }\n      });\n    });\n  }\n\n  /**\n   * If the model name is set and the types are set, then return the type that matches the model name\n   *\n   * @returns The type object that matches the model name.\n   */\n  getTypeByModelName() {\n    if (this.modelName && this.types) {\n      return this.types.find((e) => this.toKebabCase(e.name) === this.toKebabCase(this.modelName));\n    } else {\n      return null;\n    }\n  }\n\n  /**\n   * When the createModeChanged event is emitted, if the createMode is true, navigate to the new route\n   *\n   * @param createMode - boolean - This is a boolean value that indicates whether the user is in create mode or\n   * not.\n   */\n  onCreateModeChanged(createMode: boolean) {\n    if (createMode) {\n      this.router.navigate(['./' + 'neu'], { relativeTo: this.route });\n    }\n  }\n\n  /**\n   * If the type exists, return the create property of the type, otherwise return false.\n   *\n   * @returns A boolean value.\n   */\n  isCreatePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.create : false;\n  }\n\n  isImportPossible(): boolean {\n    let result = false;\n    const config = this.moduleConfig?.modelConfig[this.camelModelName]?.import;\n\n    if (config !== null && config !== undefined) {\n      result = config;\n    }\n\n    return result;\n  }\n\n  isExportPossible(): boolean {\n    let result = false;\n    const config = this.moduleConfig?.modelConfig[this.camelModelName]?.export;\n\n    if (config !== null && config !== undefined) {\n      result = config;\n    }\n\n    return result;\n  }\n\n  /**\n   * If the model name is found in the type map, return the update property of the type object\n   *\n   * @returns A boolean value.\n   */\n  isUpdatePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.update : false;\n  }\n\n  /**\n   * If the type is defined, return the delete property of the type, otherwise return false\n   *\n   * @returns A boolean value.\n   */\n  isDeletePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.delete : false;\n  }\n\n  /**\n   * If the model name is found in the type array, return the duplicate property of the type object\n   *\n   * @returns A boolean value.\n   */\n  isDuplicatePossible(): boolean {\n    const type = this.getTypeByModelName();\n    return type ? type.duplicate : false;\n  }\n\n  /**\n   * If the id is truthy, navigate to the id, otherwise navigate to the parent route\n   */\n  idSelected(id: string) {\n    if (id) {\n      this.router.navigate(['./' + id], { relativeTo: this.route });\n    } else {\n      this.router.navigate(['..'], { relativeTo: this.route });\n    }\n  }\n\n  /**\n   * Transform string to kebab case\n   */\n  toKebabCase(str: string) {\n    return str?.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n  }\n\n  /**\n   * Transform string to camel case\n   */\n  toCamelCase(str: string) {\n    return str?.replace(/-./g, (match) => match[1].toUpperCase());\n  }\n\n  /**\n   * Transform first letter to lower case\n   */\n  lowerCaseFirstLetter(value: string) {\n    return this.cmsService.lowerCaseFirstLetter(value);\n  }\n\n  /**\n   * Calculates sidebar width based on screen size\n   */\n  calcSideBarWidth() {\n    this.sideBarWidth = window.innerWidth < 768 ? '8%' : '22%';\n  }\n}\n","<div class=\"main\">\n  <div\n    class=\"sidebar\"\n    [ngStyle]=\"{\n      'flex-basis': !responsiveToggle ? sideBarWidth : '100%',\n      'min-width': !responsiveToggle ? sideBarWidth : ''\n    }\"\n  >\n    <div class=\"d-none d-md-flex flex-column flex-shrink-0 p-3 h-100\">\n      <ng-container *ngIf=\"moduleConfig.branding\">\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none\"\n          *ngIf=\"!moduleConfig?.logoUrl\"\n        >\n          <span class=\"d-block fs-4\"><b class=\"text-primary\">Base</b>CMS</span>\n          <small class=\"fw-lighter\">The auto generated GraphQL CMS</small>\n        </a>\n\n        <a\n          href=\"/\"\n          class=\"d-flex flex-column align-items-start mb-3 mt-3 me-md-auto link-dark text-decoration-none w-100\"\n          *ngIf=\"moduleConfig?.logoUrl\"\n        >\n          <img [src]=\"moduleConfig.logoUrl\" class=\"img-responsive w-100\" alt=\"Logo\" />\n        </a>\n        <hr />\n      </ng-container>\n      <ul class=\"nav nav-pills flex-column mb-auto\" *ngIf=\"types\">\n        <li class=\"nav-item\" *ngFor=\"let type of types\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"d-flex flex-column d-md-none p-3 h-100\">\n      <div class=\"d-flex justify-content-end\">\n        <i\n          class=\"bi\"\n          [ngClass]=\"{ 'bi-chevron-left': !responsiveToggle, 'bi-chevron-right': responsiveToggle }\"\n          (click)=\"responsiveToggle = !responsiveToggle\"\n        ></i>\n      </div>\n      <ul\n        class=\"nav nav-pills responsive-pills flex-column mb-auto\"\n        [ngClass]=\"{ 'w-100-transition': responsiveToggle }\"\n        *ngIf=\"types\"\n      >\n        <li class=\"nav-item\" *ngFor=\"let type of types\" (click)=\"responsiveToggle = !responsiveToggle\">\n          <a\n            class=\"nav-link\"\n            aria-current=\"page\"\n            [routerLink]=\"(id ? '../../' : '../') + toKebabCase(type?.name)\"\n            [ngClass]=\"{ active: toKebabCase(type?.name) === toKebabCase(this.modelName) }\"\n          >\n            {{\n              moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.plural\n                : moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                ? moduleConfig?.modelConfig[lowerCaseFirstLetter(type?.name)]?.label\n                : type.name + 's'\n            }}\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"sidebar-content\" [ngStyle]=\"{ 'flex-basis': !responsiveToggle ? 'unset' : '0' }\">\n    <div class=\"p-3 p-md-5 mb-3\">\n      <base-model-table\n        [modelConfig]=\"moduleConfig?.modelConfig[camelModelName]\"\n        [config]=\"moduleConfig?.fieldConfig[camelModelName] || {}\"\n        [modelName]=\"modelName\"\n        [logging]=\"moduleConfig?.logging\"\n        [objectId]=\"id !== 'neu' ? id : ''\"\n        [createMode]=\"id === 'neu'\"\n        (createModeChanged)=\"onCreateModeChanged($event)\"\n        (idSelected)=\"idSelected($event)\"\n        [import]=\"isImportPossible()\"\n        [export]=\"isExportPossible()\"\n        [create]=\"isCreatePossible()\"\n        [update]=\"isUpdatePossible()\"\n        [delete]=\"isDeletePossible()\"\n        [duplicate]=\"isDuplicatePossible()\"\n        [showFavButton]=\"!responsiveToggle\"\n      ></base-model-table>\n    </div>\n  </div>\n</div>\n","import { RouterModule, Routes } from '@angular/router';\nimport { NgModule } from '@angular/core';\nimport { BaseCmsComponent } from './pages/base-cms/base-cms.component';\n\nconst routes: Routes = [\n  {\n    path: '',\n    component: BaseCmsComponent,\n  },\n  {\n    path: ':modelName',\n    component: BaseCmsComponent,\n  },\n  {\n    path: ':modelName/:id',\n    component: BaseCmsComponent,\n  },\n];\n\n@NgModule({\n  imports: [RouterModule.forChild(routes)],\n  exports: [RouterModule],\n})\nexport class BaseCMSRoutingModule {}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { BaseCmsComponent } from './pages/base-cms/base-cms.component';\nimport { BaseCMSRoutingModule } from './base-cms-routing.module';\nimport { BaseComponentsModule } from '@lenne.tech/ng-base/base-components';\nimport { BASE_CMS_MODULE_CONFIG, BaseCMSModuleConfig } from './interfaces/base-cms-module-config.interface';\n\nexport function CMSConfigFactory() {\n  return {\n    modelConfig: {},\n    fieldConfig: {},\n    branding: true,\n    logoUrl: '',\n    logging: false,\n    ...BaseCMSModule.config,\n  };\n}\n\n@NgModule({\n  imports: [\n    // Modules\n    CommonModule,\n    ReactiveFormsModule,\n    BaseCMSRoutingModule,\n    BaseComponentsModule,\n  ],\n  declarations: [BaseCmsComponent],\n  exports: [],\n  providers: [\n    {\n      provide: BASE_CMS_MODULE_CONFIG,\n      useFactory: CMSConfigFactory,\n    },\n  ],\n})\nexport class BaseCMSModule {\n  static config: BaseCMSModuleConfig;\n}\n","/**\n * Exports for public API\n */\n\n// Module\nexport * from './base-cms.module';\n\n// Pages\nexport * from './pages/base-cms/base-cms.component';\n\n// Interface\nexport * from './interfaces/base-cms-module-config.interface';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/lenne.tech-ng-base-base-components.mjs

@@ -11,6 +11,8 @@ import { ToastType, Sort, SortOrderEnum, GraphQLRequestType, BasicUser, fullEmai
 import * as i2$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$2 from '@angular/common/http';
+import * as i4 from 'ngx-image-cropper';
+import { ImageCropperModule } from 'ngx-image-cropper';
 
 class InputComponent {
     constructor() {
@@ -718,6 +720,7 @@ class UploadImageComponent {
         this.deletePath = '/files/';
         this.path = '/files/';
         this.uploadDirectly = false;
+        this.croppingImage = false;
         this.mode = 'file';
         this.imageUploaded = new EventEmitter();
         this.imageDeleted = new EventEmitter();
@@ -725,6 +728,20 @@ class UploadImageComponent {
         this.dragActive = false;
         this.dragText = 'Drag & Drop';
         this.loading = false;
+        this.croppedInProgress = false;
+    }
+    ngOnInit() {
+        // Set default options for cropping
+        this.cOptions = {
+            maintainAspectRatio: true,
+            aspectRatio: 4 / 3,
+            onlyScaleDown: false,
+            imageQuality: 92,
+            autoCrop: true,
+            alignImage: 'center',
+            format: 'jpeg',
+            ...this.croppingOptions,
+        };
     }
     /**
      * The dragOver function is called when the user drags a file over the dropzone. It prevents the default action of the
@@ -756,6 +773,9 @@ class UploadImageComponent {
      */
     drop(event) {
         event.preventDefault();
+        if (!this.checkFile(event.dataTransfer.files[0])) {
+            return;
+        }
         this.setUrl(event.dataTransfer.files[0]);
         this.dragText = 'Drag & Drop';
         this.dragActive = false;
@@ -768,6 +788,16 @@ class UploadImageComponent {
      * @param file - any - this is the file that is selected by the user.
      */
     setUrl(file) {
+        const fileReader = new FileReader();
+        fileReader.onload = (result) => {
+            this.loading = true;
+            this.fileUrl = fileReader.result;
+            this.selectedFile = file;
+            this.upload();
+        };
+        fileReader.readAsDataURL(file);
+    }
+    checkFile(file) {
         if (this.maxSize && file.size > this.maxSize) {
             this.toastService.show({
                 id: 'image-invalid-size',
@@ -777,25 +807,21 @@ class UploadImageComponent {
                     (this.maxSize / (1024 * 1024)).toFixed(2) +
                     'MB sein.',
             }, 3500);
-            return;
-        }
-        if (this.validExtensions.includes(file?.type)) {
-            const fileReader = new FileReader();
-            fileReader.onload = (result) => {
-                this.loading = true;
-                this.fileUrl = fileReader.result;
-                this.selectedFile = file;
-                this.upload();
-            };
-            fileReader.readAsDataURL(file);
+            return false;
         }
         else {
-            this.toastService.show({
-                id: 'image-invalid-format',
-                type: ToastType.ERROR,
-                title: 'Fehlgeschlagen',
-                description: 'Das Format der Datei wird nicht unterstützt.',
-            }, 3500);
+            if (this.validExtensions.includes(file?.type)) {
+                return true;
+            }
+            else {
+                this.toastService.show({
+                    id: 'image-invalid-format',
+                    type: ToastType.ERROR,
+                    title: 'Fehlgeschlagen',
+                    description: 'Das Format der Datei wird nicht unterstützt.',
+                }, 3500);
+                return false;
+            }
         }
     }
     /**
@@ -805,7 +831,16 @@ class UploadImageComponent {
      * @param event - any - The event that is triggered when the user selects a file.
      */
     selectFile(event) {
-        this.setUrl(event.target.files[0]);
+        if (!this.checkFile(event.target.files[0])) {
+            return;
+        }
+        if (this.croppingImage) {
+            this.croppedInProgress = true;
+            this.fileEvent = event;
+        }
+        else {
+            this.setUrl(event.target.files[0]);
+        }
     }
     /**
      * We create a new FormData object, append the selected file to it, and then send it to the server
@@ -891,12 +926,41 @@ class UploadImageComponent {
             };
         });
     }
+    base64ToFile(base64, fileName, fileType) {
+        return new Promise((resolve, reject) => {
+            fetch(base64)
+                .then((res) => res.blob())
+                .then((blob) => {
+                resolve(new File([blob], fileName, { type: fileType }));
+            }, (err) => {
+                reject(err);
+            });
+        });
+    }
+    async imageCropped($event, fileEvent) {
+        const file = fileEvent.target.files[0];
+        this.croppedFile = await this.base64ToFile($event.base64, file.name, file.type);
+    }
+    finishedCropping() {
+        this.fileEvent = null;
+        this.setUrl(this.croppedFile);
+        this.croppedInProgress = false;
+        this.croppedFile = null;
+    }
+    loadImageFailed() {
+        this.toastService.show({
+            id: 'image-invalid-cropped',
+            type: ToastType.ERROR,
+            title: 'Fehlgeschlagen',
+            description: 'Es ist ein Fehler aufgetreten. Bitte probieren Sie es später erneut oder wenden Sie sich an den Support.',
+        }, 3500);
+    }
 }
 UploadImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: UploadImageComponent, deps: [{ token: i1$2.HttpClient }, { token: i1$1.AuthService }, { token: i1$1.FileService }, { token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
+UploadImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: UploadImageComponent, selector: "base-upload-image", inputs: { id: "id", name: "name", label: "label", supportText: "supportText", required: "required", defaultDragText: "defaultDragText", defaultReleaseText: "defaultReleaseText", preButtonText: "preButtonText", buttonText: "buttonText", validExtensions: "validExtensions", control: "control", url: "url", uploadPath: "uploadPath", deletePath: "deletePath", path: "path", compressOptions: "compressOptions", maxSize: "maxSize", uploadDirectly: "uploadDirectly", croppingImage: "croppingImage", croppingOptions: "croppingOptions", objectPath: "objectPath", mode: "mode" }, outputs: { imageUploaded: "imageUploaded", imageDeleted: "imageDeleted", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !fileEvent && !croppedInProgress && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n    <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"fileEvent\"\n        [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n        [aspectRatio]=\"cOptions.aspectRatio\"\n        [alignImage]=\"cOptions.alignImage\"\n        [autoCrop]=\"cOptions.autoCrop\"\n        [imageQuality]=\"cOptions.imageQuality\"\n        [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n        [format]=\"cOptions.format\"\n        (imageCropped)=\"imageCropped($event, fileEvent)\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      <button class=\"btn btn-primary\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n        Zuschneiden\n      </button>\n    </ng-container>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: StopPropagationDirective, selector: "[baseStopPropagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: UploadImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !selectedFile && !loading\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
+            args: [{ selector: 'base-upload-image', template: "<div class=\"form-group mt-3\" [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <div\n    [id]=\"objectPath ? objectPath + '.' + id : id\"\n    class=\"drag-area\"\n    (dragover)=\"dragOver($event)\"\n    (dragleave)=\"dragLeave($event)\"\n    (drop)=\"drop($event)\"\n    [ngClass]=\"{ active: dragActive, pointer: !loading, 'is-invalid': control?.invalid && control?.touched }\"\n    (click)=\"!croppedInProgress && !loading && fileInput.click()\"\n  >\n    <div class=\"d-flex justify-content-center\" *ngIf=\"loading\">\n      <div class=\"spinner-border text-primary\" role=\"status\">\n        <span class=\"visually-hidden\">Loading...</span>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"selectedFile && !fileEvent && !croppedInProgress && !loading\">\n      <img [src]=\"fileUrl\" *ngIf=\"selectedFile\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile()\" baseStopPropagation>L\u00F6schen</button>\n    </ng-container>\n\n    <ng-container *ngIf=\"control?.value && !fileEvent && !selectedFile && !loading && !croppedInProgress\">\n      <img [src]=\"control?.value.startsWith('data:') ? control?.value : url + path + control?.value\" />\n      <button class=\"btn btn-danger\" type=\"button\" (click)=\"deleteFile(control?.value)\" baseStopPropagation>\n        L\u00F6schen\n      </button>\n    </ng-container>\n\n    <ng-container *ngIf=\"!selectedFile && !control?.value && !loading && !fileEvent\">\n      <div class=\"icon\">\n        <i class=\"bi bi-images\"></i>\n      </div>\n\n      <span class=\"header\">{{ dragText }}</span>\n      <span class=\"header\"\n        >{{ preButtonText }}\n        <span class=\"button\" (click)=\"fileInput.click()\" baseStopPropagation>{{ buttonText }}</span></span\n      >\n      <span class=\"support\" [innerText]=\"supportText\"></span>\n    </ng-container>\n\n    <input type=\"file\" (change)=\"selectFile($event)\" [attr.accept]=\"validExtensions?.join(',')\" hidden #fileInput />\n\n    <ng-container *ngIf=\"croppedInProgress && fileEvent\">\n      <image-cropper\n        [imageChangedEvent]=\"fileEvent\"\n        [maintainAspectRatio]=\"cOptions.maintainAspectRatio\"\n        [aspectRatio]=\"cOptions.aspectRatio\"\n        [alignImage]=\"cOptions.alignImage\"\n        [autoCrop]=\"cOptions.autoCrop\"\n        [imageQuality]=\"cOptions.imageQuality\"\n        [onlyScaleDown]=\"cOptions.onlyScaleDown\"\n        [format]=\"cOptions.format\"\n        (imageCropped)=\"imageCropped($event, fileEvent)\"\n        (loadImageFailed)=\"loadImageFailed()\"\n      ></image-cropper>\n      <button class=\"btn btn-primary\" type=\"button\" (click)=\"finishedCropping()\" baseStopPropagation>\n        Zuschneiden\n      </button>\n    </ng-container>\n  </div>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [":host{--base-upload-image-area-bg: #ffffff;--base-upload-image-area-border-color: #e1e1e1;--base-upload-image-area-height: 400px}.is-invalid .drag-area{border-color:var(--bs-danger)}.is-invalid .invalid-feedback{display:block}.required:after{content:\" *\"}.drag-area{height:var(--base-upload-image-area-height);border:2px dashed var(--base-upload-image-area-border-color);background-color:var(--base-upload-image-area-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px auto;padding:20px}.drag-area img{height:100%;max-height:280px;max-width:100%;object-fit:scale-down}.drag-area .btn-danger{margin-top:auto}.drag-area .icon{font-size:50px;color:var(--bs-primary)}.drag-area .header{font-size:20px;font-weight:500}.drag-area .support{font-size:12px;color:#e1e1e1;margin:10px 0 15px}.drag-area .button{font-size:20px;font-weight:500;color:var(--bs-primary);cursor:pointer}.active{border:2px solid var(--bs-primary)}.pointer{cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.HttpClient }, { type: i1$1.AuthService }, { type: i1$1.FileService }, { type: i1$1.ToastService }]; }, propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -933,6 +997,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
                 type: Input
             }], uploadDirectly: [{
                 type: Input
+            }], croppingImage: [{
+                type: Input
+            }], croppingOptions: [{
+                type: Input
             }], objectPath: [{
                 type: Input
             }], mode: [{
@@ -1254,10 +1322,10 @@ class ModelFormSubComponent {
     }
 }
 ModelFormSubComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormSubComponent, deps: [{ token: i1$1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField"] }] });
+ModelFormSubComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: { id: "id", parentKey: "parentKey", fields: "fields", form: "form", config: "config" }, outputs: { imageChanged: "imageChanged", fileChanged: "fileChanged" }, ngImport: i0, template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [croppingOptions]=\"config[key]?.croppingOptions\"\n            [croppingImage]=\"config[key]?.croppingImage\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "type", "required", "eyeButton", "objectPath"], outputs: ["enter"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["id", "name", "label", "placeholder", "objectPath", "control", "tabIndex", "required", "multiple", "search", "options"] }, { kind: "component", type: CheckboxComponent, selector: "base-checkbox", inputs: ["id", "name", "label", "value", "control", "required", "objectPath"] }, { kind: "component", type: TextareaComponent, selector: "base-textarea", inputs: ["id", "name", "label", "placeholder", "control", "rows", "required", "tabIndex", "objectPath"] }, { kind: "component", type: TagsComponent, selector: "base-tags", inputs: ["id", "name", "label", "placeholder", "autocomplete", "tabIndex", "control", "options", "custom", "removeByKey", "required", "objectPath", "validators"] }, { kind: "component", type: ModelFormSubComponent, selector: "base-model-form-sub", inputs: ["id", "parentKey", "fields", "form", "config"], outputs: ["imageChanged", "fileChanged"] }, { kind: "component", type: UploadImageComponent, selector: "base-upload-image", inputs: ["id", "name", "label", "supportText", "required", "defaultDragText", "defaultReleaseText", "preButtonText", "buttonText", "validExtensions", "control", "url", "uploadPath", "deletePath", "path", "compressOptions", "maxSize", "uploadDirectly", "croppingImage", "croppingOptions", "objectPath", "mode"], outputs: ["imageUploaded", "imageDeleted", "fileChanged"] }, { kind: "component", type: RefenceInputComponent, selector: "base-refence-input", inputs: ["id", "name", "label", "isList", "search", "useParamAsArg", "param", "placeholder", "autocomplete", "tabIndex", "control", "required", "method", "fields", "valueField", "objectPath", "nameField"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: ModelFormSubComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'base-model-form-sub', template: "<div class=\"mt-3\" *ngFor=\"let key of keys\">\n  <ng-container\n    *ngIf=\"checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <fieldset class=\"border rounded-3 p-3 mt-3\">\n      <legend class=\"float-none w-auto px-3\">\n        {{ config[key]?.label ? config[key].label : capitalizeFirstLetter(key) }}\n      </legend>\n      <base-model-form-sub\n        [parentKey]=\"key\"\n        [fields]=\"fields[key].fields\"\n        [config]=\"config[key]?.fields || {}\"\n        [form]=\"form.get(key)\"\n        (imageChanged)=\"imageChanged.emit($event)\"\n        (fileChanged)=\"fileChanged.emit($event)\"\n      ></base-model-form-sub>\n    </fieldset>\n  </ng-container>\n\n  <ng-container\n    *ngIf=\"!checkFieldHasFields(fields[key]) && (config[key]?.roles ? user?.hasAllRoles(config[key]?.roles) : true)\"\n  >\n    <ng-container *ngIf=\"fields[key]?.isEnum && !config[key]?.exclude\">\n      <base-select\n        [id]=\"key\"\n        [name]=\"key\"\n        [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n        [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n        [options]=\"prepareEnumForSelect(fields[key]?.validEnums, config[key]?.enumValues)\"\n        [control]=\"transformToControl(form?.get(key))\"\n        [required]=\"config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\"\n        [objectPath]=\"objectPath\"\n      ></base-select>\n    </ng-container>\n\n    <ng-container *ngIf=\"!fields[key]?.isEnum && !config[key]?.exclude\">\n      <ng-container [ngSwitch]=\"config[key]?.type ? config[key]?.type : fields[key]?.type\">\n        <ng-container *ngSwitchCase=\"'String'\">\n          <ng-container *ngIf=\"fields[key]?.isList && !config[key]?.exclude\">\n            <base-tags\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [validators]=\"config[key]?.validators\"\n              [objectPath]=\"objectPath\"\n            ></base-tags>\n          </ng-container>\n\n          <ng-container *ngIf=\"!fields[key]?.isList && !config[key]?.exclude\">\n            <base-input\n              [id]=\"key\"\n              [name]=\"key\"\n              [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n              [placeholder]=\"config[key]?.placeholder || ''\"\n              [type]=\"'text'\"\n              [control]=\"transformToControl(form?.get(key))\"\n              [required]=\"\n                config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n              \"\n              [objectPath]=\"objectPath\"\n            ></base-input>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Image'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [url]=\"config[key]?.url\"\n            [path]=\"config[key]?.path || '/files/'\"\n            [uploadPath]=\"config[key]?.uploadPath || '/files/upload'\"\n            [deletePath]=\"config[key]?.deletePath || '/files/'\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [croppingOptions]=\"config[key]?.croppingOptions\"\n            [croppingImage]=\"config[key]?.croppingImage\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [uploadDirectly]=\"false\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"config[key]?.imageMode || 'base64'\"\n            (fileChanged)=\"fileChanged.emit($event)\"\n            (imageDeleted)=\"imageChanged.emit(key)\"\n            (imageUploaded)=\"imageChanged.emit(key)\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Upload'\">\n          <base-upload-image\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [supportText]=\"config[key]?.supportText || 'Unterst\u00FCtzte Formate: JPEG, JPG, PNG'\"\n            [defaultDragText]=\"config[key]?.dragText || 'Drag & Drop'\"\n            [defaultReleaseText]=\"config[key]?.releaseText || 'Loslassen zum hochladen'\"\n            [preButtonText]=\"config[key]?.preButtonText || 'or'\"\n            [buttonText]=\"config[key]?.buttonText || 'browse'\"\n            [validExtensions]=\"config[key]?.validExtensions || ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [compressOptions]=\"config[key]?.compressOptions\"\n            [maxSize]=\"config[key]?.maxSize\"\n            [objectPath]=\"objectPath\"\n            [mode]=\"'file'\"\n          ></base-upload-image>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Reference'\">\n          <base-refence-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [isList]=\"fields[key]?.isList\"\n            [useParamAsArg]=\"config[key]?.useParamAsArg ?? false\"\n            [param]=\"id\"\n            [search]=\"config[key]?.searchable ?? true\"\n            [placeholder]=\"config[key]?.placeholder || 'Bitte einen Wert ausw\u00E4hlen'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [method]=\"config[key]?.method || 'find'\"\n            [fields]=\"config[key]?.requestFields || ['id', 'name']\"\n            [valueField]=\"config[key]?.valueField || 'id'\"\n            [nameField]=\"config[key]?.nameField || 'name'\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-refence-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Boolean'\">\n          <base-checkbox\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-checkbox>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'LongText'\">\n          <base-textarea\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-textarea>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Float'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'number'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Password'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'password'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Color'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [type]=\"'color'\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'URL'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'url'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'Email'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'email'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n\n        <ng-container *ngSwitchCase=\"'DateTime'\">\n          <base-input\n            [id]=\"key\"\n            [name]=\"key\"\n            [label]=\"config[key]?.label ? config[key].label : capitalizeFirstLetter(key)\"\n            [placeholder]=\"config[key]?.placeholder || ''\"\n            [type]=\"'datetime-local'\"\n            [control]=\"transformToControl(form?.get(key))\"\n            [required]=\"\n              config[key] && config[key]?.required !== undefined ? config[key]?.required : fields[key].isRequired\n            \"\n            [objectPath]=\"objectPath\"\n          ></base-input>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.AuthService }]; }, propDecorators: { id: [{
                 type: Input
             }], parentKey: [{
@@ -2405,7 +2473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
             }] } });
 
 // Modules
-const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule];
+const imports = [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule];
 // Imported and exported elements
 const elements = [
     // Directives
@@ -2462,7 +2530,7 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ve
         DeleteAccountComponent,
         FabButtonComponent,
         // Pipes
-        EllipsesPipe], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule], exports: [
+        EllipsesPipe], imports: [FormsModule, ReactiveFormsModule, CommonModule, RouterModule, ImageCropperModule], exports: [
         // Directives
         SortDirective,
         BackButtonDirective,