taon 19.0.12 → 19.0.13

package/browser/fesm2022/taon.mjs

@@ -7492,7 +7492,7 @@ class TaonAdminModeConfigurationComponent {
         // }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TaonAdminModeConfigurationComponent, deps: [{ token: i1$2.BreakpointsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { taonAdminModeConfigurationData: "taonAdminModeConfigurationData" }, outputs: { taonAdminModeConfigurationDataChanged: "taonAdminModeConfigurationDataChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "component", type: i1$2.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$2.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$2.DirectiveGrow, selector: "[grow]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: TaonFullMaterialModule }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i11.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: // TODO import only partial things
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TaonAdminModeConfigurationComponent, isStandalone: true, selector: "taon-admin-mode-configuration", inputs: { taonAdminModeConfigurationData: "taonAdminModeConfigurationData" }, outputs: { taonAdminModeConfigurationDataChanged: "taonAdminModeConfigurationDataChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true }], ngImport: i0, template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/assets/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: StaticColumnsModule }, { kind: "component", type: i1$2.ColumnsComponent, selector: "columns-container" }, { kind: "component", type: i1$2.ColumnComponent, selector: "column", inputs: ["width"] }, { kind: "directive", type: i1$2.DirectiveGrow, selector: "[grow]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgScrollbarModule }, { kind: "component", type: i4.NgScrollbar, selector: "ng-scrollbar:not([externalViewport])", exportAs: ["ngScrollbar"] }, { kind: "ngmodule", type: TaonProgressBarModule }, { kind: "ngmodule", type: TaonNotificationsModule }, { kind: "ngmodule", type: TaonFullMaterialModule }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i11.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i11.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: // TODO import only partial things
                 // TaonDbAdminComponent,
                 TaonSessionPasscodeComponent, selector: "taon-session-passcode", inputs: ["passcode", "message"] }] }); }
 }
@@ -7532,7 +7532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         TaonFullMaterialModule, // TODO import only partial things
                         // TaonDbAdminComponent,
                         TaonSessionPasscodeComponent,
-                    ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"] }]
+                    ], template: "<!-- #region basic global components  -->\n<taon-session-passcode\n  *ngIf=\"showPasscode\"\n  [passcode]=\"passcode\"\n  [message]=\"message\" />\n<!-- <taon-progress-bar [isDesktop]=\"isDesktop\"></taon-progress-bar> -->\n<!-- <taon-notifications></taon-notifications> -->\n<button\n  mat-fab\n  class=\"fab-button\"\n  color=\"accent\"\n  aria-label=\"Taon Admin Mode\"\n  *ngIf=\"\n    !taonAdminService.draggablePopupMode &&\n    isDesktop &&\n    !isIframe &&\n    !hideTaonToolsInProduction\n  \"\n  (click)=\"toogle()\">\n  <mat-icon>build</mat-icon>\n</button>\n<!-- #endregion -->\n\n<!-- #region small hidden button -->\n<!-- <button class=\"admin-show-button\"\n        *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop\"\n        (click)=\"toogle()\"> Admin </button> -->\n<!-- #endregion -->\n\n<ng-template #contentNoScroll>\n  <ng-content> </ng-content>\n</ng-template>\n\n<ng-template #content>\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"contentNoScroll\"></ng-container>\n  </ng-scrollbar>\n</ng-template>\n\n<!-- #region admin tabs -->\n<ng-template #adminTabs>\n  <!-- #region admin tabs / header -->\n  <div class=\"taon-header-admin-wrapper\">\n    <columns-container\n      class=\"taon-header-admin\"\n      [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n      <column\n        width=\"200\"\n        class=\"logo-header\">\n        <img\n          *ngIf=\"openedOnce\"\n          src=\"assets/assets-for/taon/assets/shared/logo-header-admin-mode.png\" />\n      </column>\n\n      <column grow>\n        <!-- <span>Super Admin Mode</span> -->\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"\n          !taonAdminService.draggablePopupModeFullScreen &&\n          !taonAdminService.draggablePopupMode\n        \">\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"\n            taonAdminService.draggablePopupMode = false;\n            opened = false;\n            wasOpenDraggablePopup = true\n          \"\n          class=\"admin-close-button\">\n          <mat-icon>close </mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"toogle()\"\n          class=\"admin-close-button\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </column>\n\n      <column width=\"40\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>fullscreen</mat-icon>\n        </button>\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupModeFullScreen\"\n          class=\"admin-close-button\"\n          (click)=\"toogleFullScreen()\">\n          <mat-icon>close_fullscreen</mat-icon>\n        </button>\n      </column>\n\n      <column\n        width=\"40\"\n        *ngIf=\"!taonAdminService.draggablePopupModeFullScreen\">\n        <button\n          mat-icon-button\n          *ngIf=\"!taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = true\"\n          class=\"admin-close-button\">\n          <mat-icon>launch</mat-icon>\n        </button>\n\n        <button\n          mat-icon-button\n          *ngIf=\"taonAdminService.draggablePopupMode\"\n          (click)=\"taonAdminService.draggablePopupMode = false; resetDrag()\"\n          class=\"admin-close-button\">\n          <mat-icon style=\"transform: rotate(180deg)\">login</mat-icon>\n        </button>\n      </column>\n    </columns-container>\n  </div>\n  <!-- #endregion -->\n\n  <columns-container\n    [ngClass]=\"{ 'draggable-column': taonAdminService.draggablePopupMode }\">\n    <column grow>\n      <mat-tab-group\n        dynamicHeight\n        (wheel)=\"scrollTabs($event)\"\n        #tabGroup\n        [selectedIndex]=\"selectedIndex\"\n        (selectedIndexChange)=\"selectedIndex = $event\">\n        <mat-tab label=\"DB/Cache\">\n          <section>\n            <mat-card>\n              <mat-card-header>\n                <mat-card-subtitle>WEBSQL MODE</mat-card-subtitle>\n              </mat-card-header>\n              <mat-card-content>\n                <mat-checkbox\n                  [disabled]=\"!isWebSQLMode\"\n                  [ngModel]=\"taonAdminService.keepWebsqlDbDataAfterReload\"\n                  (change)=\"\n                    taonAdminService.setKeepWebsqlDbDataAfterReload(\n                      $event.checked\n                    )\n                  \">\n                  Don't remove data when reloading\n                </mat-checkbox>\n              </mat-card-content>\n            </mat-card>\n          </section>\n          <br />\n          <taon-db-admin />\n        </mat-tab>\n      </mat-tab-group>\n    </column>\n  </columns-container>\n</ng-template>\n<!-- #endregion -->\n\n<!-- #region small/mobile draggable popup windows -->\n<div\n  class=\"draggable-popup-mode-window\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    !taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"moved($event)\">\n  <ng-scrollbar>\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </ng-scrollbar>\n</div>\n<!-- #endregion -->\n\n<!-- #region fullscreen draggable popup window -->\n<div\n  class=\"draggable-popup-mode-window-full\"\n  *ngIf=\"\n    taonAdminService.draggablePopupMode &&\n    taonAdminService.draggablePopupModeFullScreen &&\n    !isIframe &&\n    !reloading\n  \"\n  cdkDrag\n  [cdkDragFreeDragPosition]=\"dragPositionZero\">\n  <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region content when not in draggable (or fullscreen draggable) popup -->\n<div\n  [style.height.px]=\"height\"\n  *ngIf=\"\n    (isIframe ||\n      !isDesktop ||\n      taonAdminService.draggablePopupMode ||\n      taonAdminService.draggablePopupModeFullScreen) &&\n    !reloading\n  \"\n  style=\"width: 100%; display: block\"\n  class=\"content\">\n  <ng-container\n    [ngTemplateOutlet]=\"\n      taonAdminService.scrollableEnabled ? content : contentNoScroll\n    \"></ng-container>\n</div>\n<!-- #endregion -->\n\n<!-- #region draggable popup window -->\n<mat-drawer-container\n  *ngIf=\"!taonAdminService.draggablePopupMode && isDesktop && !isIframe\"\n  class=\"example-container\"\n  [style.height.px]=\"height\"\n  style=\"background-color: transparent\"\n  (backdropClick)=\"opened = false\"\n  [hasBackdrop]=\"false\">\n  <mat-drawer\n    #drawer\n    style=\"width: 580px\"\n    [opened]=\"opened\"\n    [mode]=\"'side'\">\n    <ng-container [ngTemplateOutlet]=\"adminTabs\"></ng-container>\n  </mat-drawer>\n  <mat-drawer-content style=\"overflow: hidden\">\n    <ng-container\n      *ngIf=\"!taonAdminService.draggablePopupMode && !reloading\"\n      [ngTemplateOutlet]=\"\n        taonAdminService.scrollableEnabled ? content : contentNoScroll\n      \"></ng-container>\n  </mat-drawer-content>\n</mat-drawer-container>\n<!-- #endregion -->", styles: ["section{display:block;padding:10px}section>*{margin-top:0!important;margin-bottom:10px!important}section>*:last-child{margin-bottom:0!important}:host{display:block}.draggable-column{display:block!important;width:100%!important}.admin-show-button{position:fixed;bottom:100px;left:-15px;z-index:2147483647;transform:rotate(90deg);border:0px;color:#fff;background:gray;opacity:.1;cursor:pointer}.admin-show-button:hover{opacity:1}.taon-ui-super-admin-mode{font-family:JosefinSans-Bold;text-align:right;margin-right:10px}mat-drawer{margin:0;background-color:#dcdcdc!important}.taon-header-admin-wrapper{overflow:hidden;width:100%;display:block}.taon-header-admin{background:#fff;box-shadow:0 -9px 6px 6px #000;height:47px}.taon-header-admin .logo-header img{height:18px;padding:8px;position:relative;float:left;top:7px;box-sizing:content-box;transform:scale(1.5);left:49px}.draggable-popup-mode-window{width:600px;height:500px;border:solid 1px #ccc;color:#000000de;cursor:move;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important;transition:box-shadow .2s cubic-bezier(0,0,.2,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.draggable-popup-mode-window:active{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.draggable-popup-mode-window-full{width:100%;height:100%;overflow:scroll;color:#000000de;justify-content:center;align-items:center;background:#fff;border-radius:4px;position:fixed;z-index:105;background-color:#dcdcdc!important}.admin-close-button{float:right}.fab-button{position:fixed;right:110px;bottom:100px;z-index:10;background-color:#dcdcdc;color:#8f8f8f}.full-tabs{padding:10px}.mat-drawer-container-full-screen{background-color:red}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.BreakpointsService }], propDecorators: { tabGroup: [{
                 type: ViewChild,
                 args: ['tabGroup']