@cuby-ui/core 0.0.274 → 0.0.276

package/fesm2022/cuby-ui-core.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, inject, Renderer2, input, model, effect, Directive, InjectionToken, Input, HostBinding, ChangeDetectorRef, ElementRef, ViewChild, EventEmitter, Output, NgModule, Injector, Injectable, SkipSelf, Optional, DestroyRef, NgZone, signal, TemplateRef, ContentChildren, HostListener, Self, INJECTOR, forwardRef, ViewContainerRef, booleanAttribute, computed, Pipe, APP_INITIALIZER, viewChild, afterRender, output, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet, NgFor, UpperCasePipe, NgClass } from '@angular/common';
+import { CommonModule, DOCUMENT, NgForOf, NgIf, NgComponentOutlet, NgTemplateOutlet, NgFor, UpperCasePipe, NgClass, Location } from '@angular/common';
 import * as i1$1 from '@cuby-ui/cdk';
 import { CUI_WINDOW, cuiCreateToken, cuiCreateTokenFromFactory, CuiDestroyService, CuiFilterPipe, CuiLetDirective, CuiPopoverService, cuiProvide, CUI_ANIMATION_FRAME, cuiZonefree, EMPTY_CLIENT_RECT, cuiInjectElement, CUI_LOCAL_STORAGE, CUI_IS_WEBKIT, CuiItemDirective, CuiActiveZone, CuiFocusTrapDirective, cuiGetElementObscures, CUI_IS_MOBILE, CuiHoveredService, cuiPure, cuiPointToClientRect, cuiClamp, cuiPx, cuiIfMap, cuiIsPresent, cuiTypedFromEvent, cuiZonefreeScheduler, cuiZoneOptimized, cuiIsNativeFocused, CuiClickOutsideDirective, CuiTargetDirective, cuiGetClosestFocusable, CuiTime, CuiDimensionsObserverDirective, CuiAutoResizingDirective, CuiIdService, CuiElementDirective, CuiDragPointerDirective, CuiDragDropDirective, CuiDragListDirective, CuiHandleScrollDirective } from '@cuby-ui/cdk';
 import { DomSanitizer } from '@angular/platform-browser';
 import { cuiIsIcon, CUI_ICONS } from '@cuby-ui/icons';
 import { BehaviorSubject, takeUntil, Observable, merge, distinctUntilChanged, startWith, map, finalize, timer, Subject, switchMap, of, delay, repeat, filter, tap, takeWhile, fromEvent, debounce, skip, take, forkJoin, throttleTime, concatMap, toArray, catchError, throwError, pairwise, debounceTime } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { OAuthService, provideOAuthClient, OAuthInfoEvent } from 'angular-oauth2-oidc';
 import { trigger, transition, query, animateChild, style, animate, stagger } from '@angular/animations';
 import * as i2 from '@taiga-ui/polymorpheus';
 import { PolymorpheusOutlet, PolymorpheusTemplate, PolymorpheusComponent, injectContext } from '@taiga-ui/polymorpheus';
@@ -25,6 +24,8 @@ import * as i2$2 from '@jsverse/transloco';
 import { TranslocoDirective, TranslocoService, TranslocoModule } from '@jsverse/transloco';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { createCustomElement } from '@angular/elements';
+import { OAuthService, OAuthInfoEvent, provideOAuthClient } from 'angular-oauth2-oidc';
+import { Router } from '@angular/router';
 import { CuiTreeStructNavigatorApiService, CuiFrameApiService, CuiNodeChecklistApiService, CuiTreeStructApiService } from '@cuby-ui/api';
 
 class CuiAccordionComponent {
@@ -859,36 +860,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class CuiAuthService extends OAuthService {
-    useCheckTokenFlow() {
-        const isTokenExist = this.hasValidAccessToken();
-        if (isTokenExist) {
-            return this.refreshTokenWithExpiredChecking();
-        }
-        return this.initCodeFlow();
-    }
-    checkIsTokenExpired() {
-        const expiredTime = this.getAccessTokenExpiration();
-        const currentTime = Date.now();
-        return currentTime >= expiredTime;
-    }
-    refreshTokenWithExpiredChecking() {
-        const isExpired = this.checkIsTokenExpired();
-        if (!isExpired) {
-            return;
-        }
-        this.refreshToken();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAuthService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAuthService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiAuthService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class CuiBannerComponent {
     constructor() {
         this.options = inject(CUI_BANNER_OPTIONS);
@@ -6939,6 +6910,7 @@ function setEditorEvents(editorElement, signal) {
 class CuiEditorComponent {
     constructor() {
         this.destroy = inject(DestroyRef);
+        this.cuiIdService = inject(CuiIdService);
         this.editorService = inject(CuiEditorService);
         this.jTextService = inject(CuiJTextApiService);
         this.POOLING_DELAY = 100;
@@ -6946,9 +6918,6 @@ class CuiEditorComponent {
         this.SCROLL_THROTTLE_TIME = 200;
         this.isReadonly = computed(() => this.config?.readOnly);
         this.emptyQueue = new Subject();
-        this.editorEmpty = new EventEmitter();
-        this.config = DEFAULT_CONFIG;
-        this.requestSize = 40;
         this.isSkipCombinedBlockOnChange = [];
         this.isFirst = true;
         this.isChanging = false;
@@ -6964,9 +6933,13 @@ class CuiEditorComponent {
         this.removedBlocksIds = [];
         this.changesQueue = [];
         this.abortController = new AbortController();
+        this.editorId = this.cuiIdService.generate();
+        this.editorEmpty = new EventEmitter();
+        this.config = DEFAULT_CONFIG;
+        this.requestSize = 40;
     }
     ngOnChanges(changes) {
-        if (changes['editorID'] || changes['config']) {
+        if (changes['editorApiId'] || changes['config']) {
             this.initEditorChanges();
         }
     }
@@ -7033,7 +7006,7 @@ class CuiEditorComponent {
     }
     initEditorChanges() {
         this.jTextService.addOptions(this.config.requestOptions);
-        this.editor = this.initEditor(this.editorID);
+        this.editor = this.initEditor(this.editorId);
         this.editor.isReady.then(() => {
             if (this.isDestroyed) {
                 return;
@@ -7137,7 +7110,7 @@ class CuiEditorComponent {
             return { ...block, index };
         });
         const addedBlocks = [...defaultBlocksWithIndex, ...combinedBlocksWithIndex].sort((first, second) => first.index - second.index);
-        const addBlocks$ = this.editorService.collectAddedBlocksRequest(this.editorID, addedBlocks);
+        const addBlocks$ = this.editorService.collectAddedBlocksRequest(this.editorApiId, addedBlocks);
         return {
             addedBlocks,
             addBlocks$
@@ -7158,13 +7131,13 @@ class CuiEditorComponent {
             const id = block.detail.target.id;
             this.removedBlocksIds.push(id);
         });
-        const removeBlocks$ = this.editorService.collectRemovedBlocksRequest(this.editorID, this.removedBlocksIds, this.blockIdsMap);
+        const removeBlocks$ = this.editorService.collectRemovedBlocksRequest(this.editorApiId, this.removedBlocksIds, this.blockIdsMap);
         this.removedBlocksIds = [];
         return removeBlocks$;
     }
     getBlocks(page = 0, size = 40) {
         let combinedBlock;
-        return this.jTextService.getBlocks(this.editorID, page, size).pipe(takeUntilDestroyed(this.destroy), finalize(() => {
+        return this.jTextService.getBlocks(this.editorApiId, page, size).pipe(takeUntilDestroyed(this.destroy), finalize(() => {
             if (combinedBlock) {
                 this.addCombinedBlock(combinedBlock);
                 combinedBlock = null;
@@ -7255,7 +7228,7 @@ class CuiEditorComponent {
             this.editor.render({ blocks: [] });
             return;
         }
-        this.editorService.setStartBlock(this.editorID, async (block, id) => {
+        this.editorService.setStartBlock(this.editorApiId, async (block, id) => {
             this.blockIdsMap.set(id, id);
             this.isSkipCombinedBlockOnChange.push(true);
             await this.editor.render({ blocks: [block] });
@@ -7295,17 +7268,17 @@ class CuiEditorComponent {
         this.abortController = new AbortController();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorID: "editorID", config: "config", requestSize: "requestSize" }, outputs: { editorEmpty: "editorEmpty" }, providers: [CuiEditorService, CuiJTextApiService], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    #editor\n    [id]=\"editorID\"\n    [class._readonly]=\"config.readOnly\"\n    data-editor\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CuiEditorComponent, isStandalone: true, selector: "cui-editor", inputs: { editorApiId: "editorApiId", config: "config", requestSize: "requestSize" }, outputs: { editorEmpty: "editorEmpty" }, providers: [CuiEditorService, CuiJTextApiService], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiEditorService, CuiJTextApiService], template: "<div\n    #editor\n    [id]=\"editorID\"\n    [class._readonly]=\"config.readOnly\"\n    data-editor\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
+            args: [{ selector: 'cui-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiEditorService, CuiJTextApiService], template: "<div\n    #editor\n    [id]=\"editorId\"\n    data-editor\n    [class._readonly]=\"config.readOnly\"\n></div>\n", styles: [":host{--textColor: var(--cui-base-900);--menuBackground: var(--cui-base-0);--menuBorder: var(--cui-base-200);--menuItemHover: var(--cui-base-10);--menuItemBackground: var(cui-base-900);--menuIconBackground: var(--cui-base-50);--menuIconHover: var(--cui-base-10);font-weight:400;font-size:14px;line-height:20px;font-family:var(--cui-main-font)}:host ::ng-deep .ce-popover{--color-background: var(--menuBackground);--color-text-primary: var(--textColor);--color-border: var(--menuBorder);--color-border-icon: var(--menuBorder);--color-background-item: var(--menuItemBackground);--color-background-item-hover: var(--menuItemHover)}:host ::ng-deep .ce-popover__search{background:var(--menuIconBackground)}:host ::ng-deep .ce-popover .ce-popover-item__icon{background:var(--menuIconBackground)}:host ::ng-deep .ce-conversion-toolbar{background-color:var(--menuBackground);border-color:var(--menuBorder)}:host ::ng-deep .ce-conversion-toolbar__tools{padding:0 6px 6px}:host ::ng-deep .ce-conversion-tool{padding:3px;border-radius:6px}:host ::ng-deep .ce-conversion-tool__icon{border:1px solid var(--menuBorder);background-color:var(--menuIconBackground);box-shadow:none}:host ::ng-deep .ce-conversion-tool:hover{background-color:var(--menuItemHover)}:host ::ng-deep .ce-conversion-tool:hover .ce-conversion-tool__icon{border-color:var(--menuIconHover)}:host ::ng-deep .combined-text-block{padding:.4em 0;line-height:1.6em;outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part{outline:none}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child,:host ::ng-deep .combined-text-block .combined-text-block-part._selected{display:list-item}:host ::ng-deep .combined-text-block .combined-text-block-part:only-child::marker,:host ::ng-deep .combined-text-block .combined-text-block-part._selected::marker{content:\"\"}:host ::ng-deep .image-tool__image{border:1px solid var(--cui-base-200);background-color:var(--cui-base-0)}:host ::ng-deep .image-tool__image-preloader{background-color:var(--cui-base-200)}:host ::ng-deep .image-tool__image-preloader:after{border:1px solid var(--cui-base-200);border-top:1px solid var(--cui-blue-600)}:host ::ng-deep .cdx-button{border:1px solid var(--cui-base-200);color:var(--textColor);background-color:var(--cui-base-0);box-shadow:none}:host ::ng-deep .ce-inline-toolbar{border-color:var(--cui-base-100);color:var(--textColor);background-color:var(--cui-base-0)}:host ::ng-deep .ce-inline-toolbar__dropdown:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-inline-tool:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__plus,:host ::ng-deep .ce-toolbar__settings-btn{color:var(--cui-base-500)}:host ::ng-deep .ce-toolbar__plus:hover,:host ::ng-deep .ce-toolbar__settings-btn:hover{background-color:var(--cui-base-100)}:host ::ng-deep .ce-toolbar__actions{right:100%}:host ::ng-deep .ce-toolbar__content{max-width:none}:host ::ng-deep .ce-block--selected .ce-block__content{background-color:var(--cui-base-200)}:host ::ng-deep .ce-block__content{max-width:100%}:host ::ng-deep .ce-block:only-of-type .combined-text-block[data-placeholder-active][data-empty=true]:before{content:attr(data-placeholder-active);position:absolute;color:var(--cui-base-400)}:host ::ng-deep [data-editor]{padding-right:4px;width:100%;height:100%;min-height:200px;overflow:hidden auto;scrollbar-gutter:stable}:host ::ng-deep [data-editor] .codex-editor{margin-left:60px}:host ::ng-deep [data-editor] .codex-editor--narrow .ce-popover{right:auto}:host ::ng-deep [data-editor] .codex-editor__redactor{margin-right:auto;padding-bottom:260px!important}:host ::ng-deep [data-editor]._readonly{min-height:auto}:host ::ng-deep [data-editor]._readonly .codex-editor{margin:auto}:host ::ng-deep [data-editor]._readonly .codex-editor__redactor{padding-bottom:0!important}:host ::ng-deep [data-editor]._readonly .combined-text-block{padding:0}:host ::ng-deep [data-editor] [data-item-name=move-up],:host ::ng-deep [data-editor] [data-item-name=move-down],:host ::ng-deep [data-editor] [data-tool=paragraph]{display:none}:host ::ng-deep [data-editor] *::selection{background:var(--cui-base-200)}:host ::ng-deep [data-editor] a{color:var(--cui-light-blue-600)}:host ::ng-deep .marker{cursor:pointer;text-decoration:underline;color:var(--cui-light-blue-600);background-color:transparent}:host ::ng-deep .tool-marker,:host ::ng-deep .role-marker{margin:0 5px}:host ::ng-deep .tool-marker{color:#e97c00}:host ::ng-deep .role-marker{color:#8803f1}.form{height:100%}\n"] }]
         }], propDecorators: { editorRef: [{
                 type: ViewChild,
                 args: ['editor']
             }], editorEmpty: [{
                 type: Output
-            }], editorID: [{
+            }], editorApiId: [{
                 type: Input,
                 args: [{ required: true }]
             }], config: [{
@@ -7343,11 +7316,11 @@ class CuiEditorReadonlyComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorReadonlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorReadonlyComponent, isStandalone: true, selector: "cui-editor-readonly", inputs: { editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: true, transformFunction: null }, shortHeight: { classPropertyName: "shortHeight", publicName: "shortHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<cui-editor\r\n    #editor\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorID]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n@if (isMoreButtonShown()) {\r\n  <button class=\"c-button\" (click)=\"onShow(editor)\">\r\n      <ng-container [ngTemplateOutlet]=\"buttonTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"></ng-container>\r\n  </button>\r\n}\r\n", styles: [":host{--height: 68px;--fullHeight: 500px;display:flex;flex-direction:column;gap:8px}:host .editor{display:block;max-height:var(--height);overflow:hidden}:host .editor ::ng-deep [data-editor]{overflow:hidden}:host .editor_opened{max-height:var(--fullHeight)}:host .editor_opened ::ng-deep [data-editor]{max-height:var(--fullHeight);overflow:hidden auto}.c-button{padding:0}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorID", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorReadonlyComponent, isStandalone: true, selector: "cui-editor-readonly", inputs: { editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: true, transformFunction: null }, shortHeight: { classPropertyName: "shortHeight", publicName: "shortHeight", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<cui-editor\r\n    #editor\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorApiId]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n@if (isMoreButtonShown()) {\r\n  <button class=\"c-button\" (click)=\"onShow(editor)\">\r\n      <ng-container [ngTemplateOutlet]=\"buttonTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"></ng-container>\r\n  </button>\r\n}\r\n", styles: [":host{--height: 68px;--fullHeight: 500px;display:flex;flex-direction:column;gap:8px}:host .editor{display:block;max-height:var(--height);overflow:hidden}:host .editor ::ng-deep [data-editor]{overflow:hidden}:host .editor_opened{max-height:var(--fullHeight)}:host .editor_opened ::ng-deep [data-editor]{max-height:var(--fullHeight);overflow:hidden auto}.c-button{padding:0}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorReadonlyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cui-editor-readonly', standalone: true, imports: [CuiEditorComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-editor\r\n    #editor\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorID]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n@if (isMoreButtonShown()) {\r\n  <button class=\"c-button\" (click)=\"onShow(editor)\">\r\n      <ng-container [ngTemplateOutlet]=\"buttonTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"></ng-container>\r\n  </button>\r\n}\r\n", styles: [":host{--height: 68px;--fullHeight: 500px;display:flex;flex-direction:column;gap:8px}:host .editor{display:block;max-height:var(--height);overflow:hidden}:host .editor ::ng-deep [data-editor]{overflow:hidden}:host .editor_opened{max-height:var(--fullHeight)}:host .editor_opened ::ng-deep [data-editor]{max-height:var(--fullHeight);overflow:hidden auto}.c-button{padding:0}\n"] }]
+            args: [{ selector: 'cui-editor-readonly', standalone: true, imports: [CuiEditorComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cui-editor\r\n    #editor\r\n    class=\"editor\"\r\n    [class.editor_opened]=\"isShowMore()\"\r\n    [editorApiId]=\"editorId()\"\r\n    [config]=\"editorConfig()\"\r\n/>\r\n@if (isMoreButtonShown()) {\r\n  <button class=\"c-button\" (click)=\"onShow(editor)\">\r\n      <ng-container [ngTemplateOutlet]=\"buttonTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: isShowMore }\"></ng-container>\r\n  </button>\r\n}\r\n", styles: [":host{--height: 68px;--fullHeight: 500px;display:flex;flex-direction:column;gap:8px}:host .editor{display:block;max-height:var(--height);overflow:hidden}:host .editor ::ng-deep [data-editor]{overflow:hidden}:host .editor_opened{max-height:var(--fullHeight)}:host .editor_opened ::ng-deep [data-editor]{max-height:var(--fullHeight);overflow:hidden auto}.c-button{padding:0}\n"] }]
         }], ctorParameters: () => [] });
 
 class CuiEditorModalComponent {
@@ -7378,7 +7351,7 @@ class CuiEditorModalComponent {
         this.modalClosed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorModalComponent, isStandalone: true, selector: "cui-editor-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", modalClosed: "modalClosed" }, ngImport: i0, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorID]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorID", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorModalComponent, isStandalone: true, selector: "cui-editor-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, buttonTemplate: { classPropertyName: "buttonTemplate", publicName: "buttonTemplate", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorCreated: "editorCreated", modalClosed: "modalClosed" }, ngImport: i0, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorApiId]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"], dependencies: [{ kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorModalComponent, decorators: [{
             type: Component,
@@ -7387,7 +7360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiButtonModule,
                         NgTemplateOutlet,
                         CuiSvgModule
-                    ], standalone: true, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorID]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"] }]
+                    ], standalone: true, template: "@if (buttonTemplate(); as template) {\n    <button\n        type=\"button\"\n        class=\"button\"\n        (click)=\"onModalOpen()\"\n    >\n        <ng-container [ngTemplateOutlet]=\"template\" />\n    </button>\n} @else {\n    <button\n        class=\"description\"\n        cuiButton\n        type=\"button\"\n        appearance=\"outlined-gray\"\n        icon=\"cuiIconRichText\"\n        size=\"sm\"\n        (click)=\"onModalOpen()\"\n        [disabled]=\"isButtonDisabled()\"\n    >\n        @if (editorId()) {\n            <span class=\"description__text _created\">{{ 'Description' }}</span>\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconEdit\"\n                color=\"var(--cui-base-500)\"\n            />\n        } @else {\n            <cui-svg\n                class=\"description__icon\"\n                icon=\"cuiIconPlus\"\n                color=\"var(--cui-light-blue-600)\"\n            />\n            <span class=\"description__text\">{{ 'Add description' }}</span>\n        }\n    </button>\n}\n@if (isOpen()) {\n    <div class=\"wrapper\">\n        @if (editorId(); as id) {\n            <header class=\"header\">\n                <div class=\"info\">\n                    <button\n                        cuiButton\n                        type=\"button\"\n                        icon=\"cuiIconChevronLeft\"\n                        size=\"xxs\"\n                        appearance=\"secondary\"\n                        shape=\"rounded\"\n                        (click)=\"close()\"\n                    ></button>\n                    <h1 class=\"title\">{{ title() }}</h1>\n                </div>\n                <div class=\"actions\">\n                    <!-- <cui-loader /> -->\n                    <button\n                        type=\"button\"\n                        cuiButton\n                        size=\"xs\"\n                        (click)=\"close()\"\n                    >\n                        {{ 'Done' }}\n                    </button>\n                </div>\n            </header>\n\n            <section class=\"section\">\n                <cui-editor\n                    #editorComponent\n                    class=\"editor\"\n                    [editorApiId]=\"id\"\n                    [config]=\"config()\"\n                />\n            </section>\n        }\n    </div>\n}\n", styles: [":host ::ng-deep .delete{width:max-content}:host ::ng-deep .delete .c-content{display:flex;align-items:center;gap:4px;color:var(--cui-danger)}:host ::ng-deep .description .c-content{display:flex;align-items:center;gap:4px}.button{padding:0}.description{width:max-content}.description__text{color:var(--cui-light-blue-600)}.description__text._created{color:var(--cui-base-900)}.description__icon{padding:4px}.wrapper{position:fixed;z-index:10;inset:0;background-color:var(--cui-base-0)}.header{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:.5px solid var(--cui-base-200);background:var(--cui-base-0)}.info,.actions{display:flex;gap:12px;align-items:center}.section{padding-right:24px;padding-left:24px;padding-top:24px;height:calc(100% - 50px);overflow:hidden}.title{font-weight:500;font-size:14px;line-height:20px;margin:0}.editor{padding-right:32px;padding-left:32px;padding-top:32px;display:block;margin:0 auto;max-width:750px;height:100%}\n"] }]
         }] });
 
 class CuiEditorBlockComponent {
@@ -7428,7 +7401,7 @@ class CuiEditorBlockComponent {
         }, { allowSignalWrites: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorID]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiEditorModalComponent, selector: "cui-editor-modal", inputs: ["title", "buttonTemplate", "config", "editorId"], outputs: ["editorCreated", "modalClosed"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorID", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CuiEditorBlockComponent, isStandalone: true, selector: "cui-editor-block", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editorEmpty: "editorEmpty" }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorApiId]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "size"] }, { kind: "component", type: CuiEditorModalComponent, selector: "cui-editor-modal", inputs: ["title", "buttonTemplate", "config", "editorId"], outputs: ["editorCreated", "modalClosed"] }, { kind: "component", type: CuiEditorComponent, selector: "cui-editor", inputs: ["editorApiId", "config", "requestSize"], outputs: ["editorEmpty"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: CuiContentWrapperComponent, selector: "cui-content-wrapper, [cuiContentWrapper]", inputs: ["backgroundColor", "gap"] }, { kind: "directive", type: CuiTooltipDirective, selector: "[cuiTooltip]:not(ng-container):not(ng-template)", inputs: ["cuiTooltipContext", "cuiTooltipAppearance", "cuiTooltip"] }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiEditorBlockComponent, decorators: [{
             type: Component,
@@ -7440,7 +7413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CuiContentWrapperComponent,
                         CuiTooltip,
                         CuiHintModule
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorID]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"] }]
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n    <div class=\"wrapper\">\n        <span class=\"title\">\n            {{ t('DESCRIPTION') }}\n            @if (required()) {\n                <span class=\"title__required\">*</span>\n            }\n        </span>\n        <ng-template #button>\n            <button\n                [cuiTooltip]=\"t('EXPAND_EDITOR_TO_FULLSCREEN')\"\n                cuiButton\n                size=\"xxs\"\n                type=\"button\"\n                appearance=\"ghost\"\n                icon=\"cuiIconMaximizeSm\"\n                (click)=\"onToggleDescriptionModal()\"\n            ></button>\n        </ng-template>\n        <cui-editor-modal\n            [title]=\"title()\"\n            [editorId]=\"editorId()\"\n            [buttonTemplate]=\"button\"\n            [config]=\"config()\"\n            (modalClosed)=\"onToggleDescriptionModal()\"\n        />\n    </div>\n    <div\n        #editorContainer\n        cuiContentWrapper\n        class=\"editor\"\n        [class.editor_invalid]=\"required() && isDescriptionEmpty()\"\n    >\n        @if (!isDescriptionModalOpen() && editorConfig()) {\n            <cui-editor\n                #editorComponent\n                [editorApiId]=\"editorId()\"\n                [config]=\"editorConfig()!\"\n                (editorEmpty)=\"onDescriptionChange($event)\"\n            />\n        }\n    </div>\n    @if (required() && isDescriptionEmpty()) {\n        <cui-hint hintType=\"error\">{{ t('DESCRIPTION_IS_REQUIRED') }}</cui-hint>\n    }\n</ng-container>\n", styles: [":host{--max-editor-height: 650px;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--cui-base-10);border-radius:8px}:host .editor{max-height:var(--max-editor-height)}.wrapper{display:flex;gap:8px;align-items:center;justify-content:space-between}.editor{padding-top:16px;padding-bottom:16px;display:block;overflow:auto}.editor_invalid{border:1px solid var(--cui-danger)}.title{font-weight:500;font-size:14px;line-height:20px}.title__required{color:var(--cui-danger)}\n"] }]
         }], ctorParameters: () => [] });
 
 const cuiXNdjsonInterceptor = (request, next) => {
@@ -7512,6 +7485,107 @@ const cuiErrorHandlerInterceptor = (request, next) => {
     }));
 };
 
+const CuiAuthService = new InjectionToken('CUI_AUTH_SERVICE');
+
+class CuiAuthBase extends OAuthService {
+    useCheckTokenFlow(loginCallback) {
+        const isTokenExist = this.hasValidAccessToken();
+        if (isTokenExist) {
+            return this.refreshTokenWithExpiredChecking();
+        }
+        return loginCallback();
+    }
+    checkIsTokenExpired() {
+        const expiredTime = this.getAccessTokenExpiration();
+        const currentTime = Date.now();
+        return currentTime >= expiredTime;
+    }
+    refreshTokenWithExpiredChecking() {
+        const isExpired = this.checkIsTokenExpired();
+        if (!isExpired) {
+            return;
+        }
+        this.refreshToken();
+    }
+    initAuthRefreshEvents(loginCallback) {
+        this.events.pipe(filter((event) => event instanceof OAuthInfoEvent)).subscribe((event) => {
+            if (event.type !== 'token_expires' || event.info !== 'access_token') {
+                return;
+            }
+            if (!this.hasValidAccessToken()) {
+                return loginCallback();
+            }
+            this.refreshToken();
+        });
+    }
+}
+
+class CuiBrowserAuthService extends CuiAuthBase {
+    constructor() {
+        super(...arguments);
+        this.router = inject(Router);
+        this.location = inject(Location);
+    }
+    initAuth(authConfig) {
+        this.setStorage(localStorage);
+        this.configure(authConfig);
+        this.loadDiscoveryDocumentAndTryLogin().then(() => {
+            this.initAuthRefreshEvents(this.initLoginFlow.bind(this));
+            this.useCheckTokenFlow(this.initLoginFlow.bind(this));
+            this.router.navigateByUrl(this.location.path());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBrowserAuthService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBrowserAuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiBrowserAuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CuiMobileAuthService extends CuiAuthBase {
+    initAuth(authConfig) {
+        this.setStorage(localStorage);
+        this.configure(authConfig);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiMobileAuthService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiMobileAuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CuiMobileAuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+function provideCuiAuth({ authConfig, moduleConfig, platform = 'browser' }) {
+    return [
+        provideOAuthClient(moduleConfig),
+        {
+            provide: CuiAuthService,
+            useFactory: () => {
+                if (platform === 'mobile') {
+                    return inject(CuiMobileAuthService);
+                }
+                return inject(CuiBrowserAuthService);
+            }
+        },
+        makeEnvironmentProviders([
+            {
+                provide: APP_INITIALIZER,
+                useValue: () => initAuth(authConfig),
+                multi: true
+            }
+        ])
+    ];
+}
+function initAuth(authConfig) {
+    const authService = inject(CuiAuthService);
+    return authService.initAuth(authConfig);
+}
+
 const cuiAuthInterceptor = (request, next) => {
     const authService = inject(CuiAuthService);
     if (!authService.hasValidAccessToken()) {
@@ -9032,39 +9106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [CuiCheckListBlockService], template: "<cui-content-wrapper\n    *transloco=\"let t\"\n    backgroundColor=\"var(--cui-base-10)\"\n    [gap]=\"16\"\n>\n    <ng-container *cuiLet=\"checkListItems() as checkListItems\">\n        <header class=\"header\">\n            <h2 class=\"heading\">{{ t('CHECKLIST') }}</h2>\n\n            @if (checkListItems) {\n                <span class=\"item\">{{ checkListItems?.length }} {{ t('ITEM_VARIANT') }}</span>\n            }\n        </header>\n        <cui-content-wrapper>\n            <cui-checklist-block-list [config]=\"config()\" />\n        </cui-content-wrapper>\n        <div>\n            <button\n                #actionButton=\"elementRef\"\n                cuiElement\n                cuiButton\n                type=\"button\"\n                appearance=\"flat\"\n                size=\"xxs\"\n                icon=\"cuiIconPlus\"\n            >\n                {{ t('ADD_NEW_ITEM') }}\n            </button>\n            <cui-context-menu\n                [items]=\"CHECKLIST_BLOCK_SELECT_OPTIONS\"\n                [target]=\"actionButton.nativeElement\"\n            />\n        </div>\n    </ng-container>\n</cui-content-wrapper>\n", styles: [".header{display:flex;gap:12px;align-items:center;justify-content:space-between}.heading{font-weight:500;font-size:16px;line-height:24px}.item{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-500)}\n"] }]
         }], ctorParameters: () => [] });
 
-function provideCuiAuth({ authConfig, moduleConfig }) {
-    return [
-        provideOAuthClient(moduleConfig),
-        makeEnvironmentProviders([
-            {
-                provide: APP_INITIALIZER,
-                useValue: () => configureAuth(authConfig),
-                multi: true
-            }
-        ])
-    ];
-}
-function configureAuth(authConfig) {
-    const authService = inject(CuiAuthService);
-    authService.setStorage(localStorage);
-    authService.configure(authConfig);
-    authService.loadDiscoveryDocumentAndTryLogin().then(() => {
-        initAuthEvents();
-        authService.useCheckTokenFlow();
-    });
-    function initAuthEvents() {
-        authService.events.pipe(filter((event) => event instanceof OAuthInfoEvent)).subscribe((event) => {
-            if (event.type !== 'token_expires' || event.info !== 'access_token') {
-                return;
-            }
-            if (!authService.hasValidAccessToken()) {
-                return authService.initCodeFlow();
-            }
-            authService.refreshToken();
-        });
-    }
-}
-
 /**
  * Generated bundle index. Do not edit.
  */