@cuby-ui/core 0.0.388 → 0.0.390

package/fesm2022/cuby-ui-core.mjs

@@ -3985,7 +3985,7 @@ const DEFAULT_CONFIG = {
     autofocus: false
 };
 const CuiEditorTranslations = {
-    en: import('./cuby-ui-core-en-D3DnyYmu.mjs')
+    en: import('./cuby-ui-core-en-CnpigsdW.mjs')
 };
 
 class CuiHeaderTool extends Header {
@@ -4876,7 +4876,7 @@ class MarkerModalComponent {
         this.element.style.top = bottom + this.spaceBetweenTargetAndList + 'px';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MarkerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MarkerModalComponent, isStandalone: true, selector: "ng-component", inputs: { title: "title", url: "url", tool: "tool", isGlobal: "isGlobal", isTool: "isTool", target: "target", space: "space" }, outputs: { saveClicked: "saveClicked", cancelClicked: "cancelClicked" }, host: { properties: { "class._hidden": "this.hide", "class._fixed": "this.fixed" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <ng-container *ngIf=\"isVisible()\">\n        <form\n            autocomplete=\"off\"\n            class=\"wrapper\"\n        >\n            <cui-form-field>\n                <!-- eslint-disable-next-line -->\n                <label\n                    [for]=\"titleId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                    (click)=\"onTitleLabelClick(titleElement)\"\n                >\n                    {{ t('TITLE') }}\n                </label>\n                <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\n                <div\n                    class=\"title\"\n                    [class.title_invalid]=\"isTitleInvalid()\"\n                >\n                    <div\n                        #titleElement\n                        class=\"title__text\"\n                        contenteditable\n                        attr.data-placeholder=\"{{ t('TITLE') }}...\"\n                        (paste)=\"onTitlePaste($event)\"\n                        (keyup)=\"onTitleChange($event)\"\n                        [innerHTML]=\"startTitle\"\n                    ></div>\n                    <button\n                        type=\"button\"\n                        class=\"title__clear\"\n                        (click)=\"onClearTitle(titleElement)\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconClear\"\n                            color=\"var(--cui-base-300)\"\n                            class=\"title__icon\"\n                        />\n                    </button>\n                </div>\n\n                <cui-hint\n                    *ngIf=\"isTitleInvalid()\"\n                    hintType=\"error\"\n                >\n                    <ng-container *ngIf=\"isTitleEmpty()\">\n                        {{ t('FIELD_IS_REQUIRED') }}\n                    </ng-container>\n                    <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\n                        {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\n                    </ng-container>\n                </cui-hint>\n            </cui-form-field>\n            <cui-form-field>\n                <label\n                    [for]=\"dataId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                >\n                    {{ isTool ? t('TOOL') : t('URL') }}\n                </label>\n                <ng-container *ngIf=\"dynamicDataControl\">\n                    <ng-container *ngIf=\"isTool; else input\">\n                        <div>\n                            <button\n                                #target=\"elementRef\"\n                                class=\"button tool-button\"\n                                cuiButton\n                                type=\"button\"\n                                cuiElement\n                                appearance=\"outlined-gray\"\n                                size=\"sm\"\n                            >\n                                {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\n                            </button>\n                        </div>\n                        <cc-marker-select\n                            [formControl]=\"dynamicDataControl\"\n                            [target]=\"target.nativeElement\"\n                        />\n                    </ng-container>\n                    <ng-template #input>\n                        <cui-input-text\n                            [cuiTextFieldId]=\"dataId\"\n                            [formControl]=\"dynamicDataControl\"\n                            autocomplete=\"off\"\n                            [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\n                            cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\n                        />\n                        <cui-hint\n                            *ngIf=\"isDynamicDataErrorShown\"\n                            hintType=\"error\"\n                        >\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\n                                {{ t('FIELD_IS_REQUIRED') }}\n                            </ng-container>\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\n                                {{ t('INVALID_URL') }}\n                            </ng-container>\n                        </cui-hint>\n                    </ng-template>\n                </ng-container>\n            </cui-form-field>\n            <div class=\"buttons\">\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"outlined-gray\"\n                    size=\"sm\"\n                    (click)=\"onCancel()\"\n                >\n                    {{ t('CANCEL') }}\n                </button>\n                <button\n                    cuiButton\n                    type=\"submit\"\n                    appearance=\"action\"\n                    size=\"sm\"\n                    [disabled]=\"isFormInvalid\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('SAVE') }}\n                </button>\n            </div>\n        </form>\n    </ng-container>\n</ng-container>\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MarkerSelectComponent, selector: "cc-marker-select", inputs: ["target", "space"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MarkerModalComponent, isStandalone: true, selector: "ng-component", inputs: { title: "title", url: "url", tool: "tool", isGlobal: "isGlobal", isTool: "isTool", target: "target", space: "space" }, outputs: { saveClicked: "saveClicked", cancelClicked: "cancelClicked" }, host: { properties: { "class._hidden": "this.hide", "class._fixed": "this.fixed" } }, hostDirectives: [{ directive: i1$1.CuiClickOutsideDirective }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n    <ng-container *ngIf=\"isVisible()\">\n        <form\n            autocomplete=\"off\"\n            class=\"wrapper\"\n        >\n            <cui-form-field>\n                <!-- eslint-disable-next-line -->\n                <label\n                    [for]=\"titleId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                    (click)=\"onTitleLabelClick(titleElement)\"\n                >\n                    {{ t('TITLE') }}\n                </label>\n                <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\n                <div\n                    class=\"title\"\n                    [class.title_invalid]=\"isTitleInvalid()\"\n                >\n                    <div\n                        #titleElement\n                        class=\"title__text\"\n                        contenteditable\n                        attr.data-placeholder=\"{{ t('TITLE') }}...\"\n                        (paste)=\"onTitlePaste($event)\"\n                        (keyup)=\"onTitleChange($event)\"\n                        [innerHTML]=\"startTitle\"\n                    ></div>\n                    <button\n                        type=\"button\"\n                        class=\"title__clear\"\n                        (click)=\"onClearTitle(titleElement)\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconClear\"\n                            color=\"var(--cui-base-300)\"\n                            class=\"title__icon\"\n                        />\n                    </button>\n                </div>\n\n                <cui-hint\n                    *ngIf=\"isTitleInvalid()\"\n                    hintType=\"error\"\n                >\n                    <ng-container *ngIf=\"isTitleEmpty()\">\n                        {{ t('FIELD_IS_REQUIRED') }}\n                    </ng-container>\n                    <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\n                        {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: TITLE_MAX_LENGTH }) }}\n                    </ng-container>\n                </cui-hint>\n            </cui-form-field>\n            <cui-form-field>\n                <label\n                    [for]=\"dataId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                >\n                    {{ isTool ? t('TOOL') : t('URL') }}\n                </label>\n                <ng-container *ngIf=\"dynamicDataControl\">\n                    <ng-container *ngIf=\"isTool; else input\">\n                        <div>\n                            <button\n                                #target=\"elementRef\"\n                                class=\"button tool-button\"\n                                cuiButton\n                                type=\"button\"\n                                cuiElement\n                                appearance=\"outlined-gray\"\n                                size=\"sm\"\n                            >\n                                {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\n                            </button>\n                        </div>\n                        <cc-marker-select\n                            [formControl]=\"dynamicDataControl\"\n                            [target]=\"target.nativeElement\"\n                        />\n                    </ng-container>\n                    <ng-template #input>\n                        <cui-input-text\n                            [cuiTextFieldId]=\"dataId\"\n                            [formControl]=\"dynamicDataControl\"\n                            autocomplete=\"off\"\n                            [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\n                            cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\n                        />\n                        <cui-hint\n                            *ngIf=\"isDynamicDataErrorShown\"\n                            hintType=\"error\"\n                        >\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\n                                {{ t('FIELD_IS_REQUIRED') }}\n                            </ng-container>\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\n                                {{ t('INVALID_URL') }}\n                            </ng-container>\n                        </cui-hint>\n                    </ng-template>\n                </ng-container>\n            </cui-form-field>\n            <div class=\"buttons\">\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"outlined-gray\"\n                    size=\"sm\"\n                    (click)=\"onCancel()\"\n                >\n                    {{ t('CANCEL') }}\n                </button>\n                <button\n                    cuiButton\n                    type=\"submit\"\n                    appearance=\"action\"\n                    size=\"sm\"\n                    [disabled]=\"isFormInvalid\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('SAVE') }}\n                </button>\n            </div>\n        </form>\n    </ng-container>\n</ng-container>\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"], dependencies: [{ kind: "ngmodule", type: CuiButtonModule }, { kind: "component", type: CuiButtonComponent, selector: "button[cuiButton], a[cuiButton]", inputs: ["shape", "disabled", "isLoaderShown", "icon", "iconRight", "appearance", "theme", "size"] }, { kind: "directive", type: CuiElementDirective, selector: "[cuiElement]", exportAs: ["elementRef"] }, { kind: "ngmodule", type: CuiFormFieldModule }, { kind: "component", type: CuiFormFieldComponent, selector: "cui-form-field" }, { kind: "ngmodule", type: CuiHintModule }, { kind: "component", type: CuiHintComponent, selector: "cui-hint", inputs: ["hintType"] }, { kind: "ngmodule", type: CuiInputModule }, { kind: "component", type: CuiInputTextComponent, selector: "cui-input-text" }, { kind: "directive", type: CuiTextFieldIdDirective, selector: "[cuiTextFieldId]", inputs: ["cuiTextFieldId"] }, { kind: "directive", type: CuiTextFieldPlaceholderDirective, selector: "[cuiTextFieldPlaceholder]", inputs: ["cuiTextFieldPlaceholder"] }, { kind: "directive", type: CuiTextFieldIsErrorDirective, selector: "[cuiTextFieldIsError]", inputs: ["cuiTextFieldIsError"] }, { kind: "ngmodule", type: CuiLabelModule }, { kind: "component", type: CuiLabelComponent, selector: "label[cuiLabel]", inputs: ["isRequired"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MarkerSelectComponent, selector: "cc-marker-select", inputs: ["target", "space"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MarkerModalComponent, decorators: [{
             type: Component,
@@ -4893,7 +4893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         TranslocoDirective,
                         NgIf
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<ng-container *transloco=\"let t\">\n    <ng-container *ngIf=\"isVisible()\">\n        <form\n            autocomplete=\"off\"\n            class=\"wrapper\"\n        >\n            <cui-form-field>\n                <!-- eslint-disable-next-line -->\n                <label\n                    [for]=\"titleId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                    (click)=\"onTitleLabelClick(titleElement)\"\n                >\n                    {{ t('TITLE') }}\n                </label>\n                <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\n                <div\n                    class=\"title\"\n                    [class.title_invalid]=\"isTitleInvalid()\"\n                >\n                    <div\n                        #titleElement\n                        class=\"title__text\"\n                        contenteditable\n                        attr.data-placeholder=\"{{ t('TITLE') }}...\"\n                        (paste)=\"onTitlePaste($event)\"\n                        (keyup)=\"onTitleChange($event)\"\n                        [innerHTML]=\"startTitle\"\n                    ></div>\n                    <button\n                        type=\"button\"\n                        class=\"title__clear\"\n                        (click)=\"onClearTitle(titleElement)\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconClear\"\n                            color=\"var(--cui-base-300)\"\n                            class=\"title__icon\"\n                        />\n                    </button>\n                </div>\n\n                <cui-hint\n                    *ngIf=\"isTitleInvalid()\"\n                    hintType=\"error\"\n                >\n                    <ng-container *ngIf=\"isTitleEmpty()\">\n                        {{ t('FIELD_IS_REQUIRED') }}\n                    </ng-container>\n                    <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\n                        {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS') }}\n                    </ng-container>\n                </cui-hint>\n            </cui-form-field>\n            <cui-form-field>\n                <label\n                    [for]=\"dataId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                >\n                    {{ isTool ? t('TOOL') : t('URL') }}\n                </label>\n                <ng-container *ngIf=\"dynamicDataControl\">\n                    <ng-container *ngIf=\"isTool; else input\">\n                        <div>\n                            <button\n                                #target=\"elementRef\"\n                                class=\"button tool-button\"\n                                cuiButton\n                                type=\"button\"\n                                cuiElement\n                                appearance=\"outlined-gray\"\n                                size=\"sm\"\n                            >\n                                {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\n                            </button>\n                        </div>\n                        <cc-marker-select\n                            [formControl]=\"dynamicDataControl\"\n                            [target]=\"target.nativeElement\"\n                        />\n                    </ng-container>\n                    <ng-template #input>\n                        <cui-input-text\n                            [cuiTextFieldId]=\"dataId\"\n                            [formControl]=\"dynamicDataControl\"\n                            autocomplete=\"off\"\n                            [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\n                            cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\n                        />\n                        <cui-hint\n                            *ngIf=\"isDynamicDataErrorShown\"\n                            hintType=\"error\"\n                        >\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\n                                {{ t('FIELD_IS_REQUIRED') }}\n                            </ng-container>\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\n                                {{ t('INVALID_URL') }}\n                            </ng-container>\n                        </cui-hint>\n                    </ng-template>\n                </ng-container>\n            </cui-form-field>\n            <div class=\"buttons\">\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"outlined-gray\"\n                    size=\"sm\"\n                    (click)=\"onCancel()\"\n                >\n                    {{ t('CANCEL') }}\n                </button>\n                <button\n                    cuiButton\n                    type=\"submit\"\n                    appearance=\"action\"\n                    size=\"sm\"\n                    [disabled]=\"isFormInvalid\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('SAVE') }}\n                </button>\n            </div>\n        </form>\n    </ng-container>\n</ng-container>\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CuiClickOutsideDirective], template: "<ng-container *transloco=\"let t\">\n    <ng-container *ngIf=\"isVisible()\">\n        <form\n            autocomplete=\"off\"\n            class=\"wrapper\"\n        >\n            <cui-form-field>\n                <!-- eslint-disable-next-line -->\n                <label\n                    [for]=\"titleId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                    (click)=\"onTitleLabelClick(titleElement)\"\n                >\n                    {{ t('TITLE') }}\n                </label>\n                <!-- TODO: \u0435\u0441\u043B\u0438 \u043D\u0430\u0439\u0434\u0435\u0442\u0441\u044F \u0432\u0430\u0440\u0438\u043A \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0447\u0435\u0440\u0435\u0437 \u0444\u043E\u0440\u043C\u0443 -->\n                <div\n                    class=\"title\"\n                    [class.title_invalid]=\"isTitleInvalid()\"\n                >\n                    <div\n                        #titleElement\n                        class=\"title__text\"\n                        contenteditable\n                        attr.data-placeholder=\"{{ t('TITLE') }}...\"\n                        (paste)=\"onTitlePaste($event)\"\n                        (keyup)=\"onTitleChange($event)\"\n                        [innerHTML]=\"startTitle\"\n                    ></div>\n                    <button\n                        type=\"button\"\n                        class=\"title__clear\"\n                        (click)=\"onClearTitle(titleElement)\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconClear\"\n                            color=\"var(--cui-base-300)\"\n                            class=\"title__icon\"\n                        />\n                    </button>\n                </div>\n\n                <cui-hint\n                    *ngIf=\"isTitleInvalid()\"\n                    hintType=\"error\"\n                >\n                    <ng-container *ngIf=\"isTitleEmpty()\">\n                        {{ t('FIELD_IS_REQUIRED') }}\n                    </ng-container>\n                    <ng-container *ngIf=\"isTitleMoreThanMaxLength()\">\n                        {{ t('PLEASE_KEEP_FIELD_UNDER_CHARACTERS', { value: TITLE_MAX_LENGTH }) }}\n                    </ng-container>\n                </cui-hint>\n            </cui-form-field>\n            <cui-form-field>\n                <label\n                    [for]=\"dataId\"\n                    cuiLabel\n                    [isRequired]=\"true\"\n                >\n                    {{ isTool ? t('TOOL') : t('URL') }}\n                </label>\n                <ng-container *ngIf=\"dynamicDataControl\">\n                    <ng-container *ngIf=\"isTool; else input\">\n                        <div>\n                            <button\n                                #target=\"elementRef\"\n                                class=\"button tool-button\"\n                                cuiButton\n                                type=\"button\"\n                                cuiElement\n                                appearance=\"outlined-gray\"\n                                size=\"sm\"\n                            >\n                                {{ $any(dynamicDataControl.value)?.title || t('SELECT_TOOL') }}\n                            </button>\n                        </div>\n                        <cc-marker-select\n                            [formControl]=\"dynamicDataControl\"\n                            [target]=\"target.nativeElement\"\n                        />\n                    </ng-container>\n                    <ng-template #input>\n                        <cui-input-text\n                            [cuiTextFieldId]=\"dataId\"\n                            [formControl]=\"dynamicDataControl\"\n                            autocomplete=\"off\"\n                            [cuiTextFieldIsError]=\"isDynamicDataErrorShown\"\n                            cuiTextFieldPlaceholder=\"{{ t('LINK') }}...\"\n                        />\n                        <cui-hint\n                            *ngIf=\"isDynamicDataErrorShown\"\n                            hintType=\"error\"\n                        >\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['required']\">\n                                {{ t('FIELD_IS_REQUIRED') }}\n                            </ng-container>\n                            <ng-container *ngIf=\"dynamicDataControl.errors?.['url']\">\n                                {{ t('INVALID_URL') }}\n                            </ng-container>\n                        </cui-hint>\n                    </ng-template>\n                </ng-container>\n            </cui-form-field>\n            <div class=\"buttons\">\n                <button\n                    cuiButton\n                    type=\"button\"\n                    appearance=\"outlined-gray\"\n                    size=\"sm\"\n                    (click)=\"onCancel()\"\n                >\n                    {{ t('CANCEL') }}\n                </button>\n                <button\n                    cuiButton\n                    type=\"submit\"\n                    appearance=\"action\"\n                    size=\"sm\"\n                    [disabled]=\"isFormInvalid\"\n                    (click)=\"onSave()\"\n                >\n                    {{ t('SAVE') }}\n                </button>\n            </div>\n        </form>\n    </ng-container>\n</ng-container>\n", styles: [":host{position:absolute;z-index:1;left:0}:host._fixed{position:fixed}:host._hidden{position:fixed;visibility:hidden}:host ::ng-deep .tool-button{width:100%}:host ::ng-deep .tool-button>span{justify-content:flex-start!important}.wrapper{padding:11px;box-shadow:0 2px 4px -1px #0000000f,0 4px 6px -1px #0000001a;display:flex;flex-direction:column;gap:16px;border-radius:8px;border:1px solid var(--cui-base-200);max-width:450px;background-color:var(--cui-base-0)}.buttons{padding-top:12px;display:flex;justify-content:flex-end;gap:12px}.title{padding:7px 13px;cursor:text;display:flex;align-items:center;gap:8px;border:1px solid var(--cui-base-200);border-radius:8px;width:426px;background:var(--cui-input);color:var(--cui-base-900)}.title:hover{border-color:var(--cui-base-300)}.title:focus-within{outline:none;box-shadow:0 0 0 2px var(--cui-focus);border-color:var(--cui-info)}.title_invalid,.title_invalid:focus-within{box-shadow:none;border-color:var(--cui-danger)}.title__text{flex-grow:1;text-wrap:nowrap;overflow:hidden}.title__text[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.title__text:focus{outline:none}.title__clear{padding:0;visibility:hidden}.title__icon{width:16px}.title__icon ::ng-deep [stroke]{stroke:var(--cui-base-0)}.title__text:not(:empty)+.title__clear{visibility:visible}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], url: [{
@@ -10148,13 +10148,13 @@ class CuiActivityItemComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiActivityItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiActivityItemComponent, isStandalone: true, selector: "cui-activity-item", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, companyId: { classPropertyName: "companyId", publicName: "companyId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.selected": "isSelected()" } }, ngImport: i0, template: "<div class=\"wrapper\">\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n        (click)=\"onGoToActivity()\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <span>{{ activity().description }}</span>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;justify-content:space-between}.activity-button{display:flex;gap:8px;align-items:center;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiActivityItemComponent, isStandalone: true, selector: "cui-activity-item", inputs: { activity: { classPropertyName: "activity", publicName: "activity", isSignal: true, isRequired: true, transformFunction: null }, companyId: { classPropertyName: "companyId", publicName: "companyId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.selected": "isSelected()" } }, ngImport: i0, template: "<div class=\"wrapper\">\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n        (click)=\"onGoToActivity()\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <span>{{ activity().description }}</span>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;justify-content:space-between}.activity-button{display:flex;gap:8px;align-items:center;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}\n"], dependencies: [{ kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiActivityItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cui-activity-item', standalone: true, imports: [CuiLetterBoxComponent, CuiSvgModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.selected]': 'isSelected()'
-                    }, template: "<div class=\"wrapper\">\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n        (click)=\"onGoToActivity()\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <span>{{ activity().description }}</span>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;justify-content:space-between}.activity-button{display:flex;gap:8px;align-items:center;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}\n"] }]
+                    }, template: "<div class=\"wrapper\">\n    <button\n        type=\"button\"\n        class=\"activity-button\"\n        (click)=\"onGoToActivity()\"\n    >\n        <cui-letter-box\n            [letter]=\"activity().description[0]\"\n            [shape]=\"'rounded'\"\n            [backgroundColor]=\"letterBackgroundColor()\"\n            size=\"md\"\n        />\n        <span>{{ activity().description }}</span>\n    </button>\n\n    @if (isSelected()) {\n        <div class=\"icon-wrapper\">\n            <cui-svg\n                [icon]=\"'cuiIconCheck'\"\n                color=\"var(--cui-info)\"\n            />\n        </div>\n    }\n</div>\n", styles: [":host(.selected){background:var(--cui-badge-blue-bg);border-radius:8px}.wrapper{display:flex;justify-content:space-between}.activity-button{display:flex;gap:8px;align-items:center;padding-left:4px;height:36px;color:var(--cui-base-900)}.icon-wrapper{display:flex;align-items:center;justify-content:center;padding:8px}\n"] }]
         }] });
 
 class CuiUserActionContextMenuComponent {
@@ -10194,7 +10194,7 @@ class CuiUserActionContextMenuComponent {
         this.translocoService.setActiveLang(lang.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUserActionContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiUserActionContextMenuComponent, isStandalone: true, selector: "cui-user-action-context-menu", ngImport: i0, template: "@let currentTheme = theme$ | async;\n@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <ul class=\"title-company\">\n                                {{\n                                    company.name\n                                }}\n                            </ul>\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconPaletteSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('SWITCH_THEME') }}\n                                    <div class=\"group-sub-button\">\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'dark'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconMoon\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('dark')\"\n                                            />\n                                        </div>\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'light'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconSun\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('light')\"\n                                            />\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.block-name{display:flex;gap:12px;align-items:center;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.title-company{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500)}.list-company{display:flex;flex-direction:column;gap:4px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding:8px;border-bottom:solid 1px var(--cui-base-200)}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.sub-title-text{display:flex;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiDropdownDirective, selector: "[cuiDropdown]", inputs: ["cuiDropdown", "orientation"], outputs: ["isOpened"], exportAs: ["cuiDropdown"] }, { kind: "component", type: CuiDropdownWrapperComponent, selector: "cui-dropdown-wrapper", inputs: ["title", "width", "maxHeight"] }, { kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiActivityItemComponent, selector: "cui-activity-item", inputs: ["activity", "companyId"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CuiUserActionContextMenuComponent, isStandalone: true, selector: "cui-user-action-context-menu", ngImport: i0, template: "@let currentTheme = theme$ | async;\n@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <ul class=\"title-company\">\n                                {{\n                                    company.name\n                                }}\n                            </ul>\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconPaletteSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('SWITCH_THEME') }}\n                                    <div class=\"group-sub-button\">\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'dark'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconMoon\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('dark')\"\n                                            />\n                                        </div>\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'light'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconSun\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('light')\"\n                                            />\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.block-name{display:flex;gap:12px;align-items:center;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.title-company{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500)}.list-company{display:flex;flex-direction:column;gap:4px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding:8px;border-bottom:solid 1px var(--cui-base-200)}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.block-platform:hover{background-color:var(--cui-badge-light-blue-bg)}.sub-title-text{display:flex;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"], dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "directive", type: CuiDropdownDirective, selector: "[cuiDropdown]", inputs: ["cuiDropdown", "orientation"], outputs: ["isOpened"], exportAs: ["cuiDropdown"] }, { kind: "component", type: CuiDropdownWrapperComponent, selector: "cui-dropdown-wrapper", inputs: ["title", "width", "maxHeight"] }, { kind: "component", type: CuiLetterBoxComponent, selector: "cui-letter-box", inputs: ["letter", "backgroundColor", "size", "shape"] }, { kind: "ngmodule", type: CuiButtonModule }, { kind: "ngmodule", type: CuiContextMenuModule }, { kind: "component", type: CuiActivityItemComponent, selector: "cui-activity-item", inputs: ["activity", "companyId"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CuiUserActionContextMenuComponent, decorators: [{
             type: Component,
@@ -10208,7 +10208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         CuiContextMenuModule,
                         CuiActivityItemComponent,
                         AsyncPipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentTheme = theme$ | async;\n@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <ul class=\"title-company\">\n                                {{\n                                    company.name\n                                }}\n                            </ul>\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconPaletteSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('SWITCH_THEME') }}\n                                    <div class=\"group-sub-button\">\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'dark'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconMoon\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('dark')\"\n                                            />\n                                        </div>\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'light'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconSun\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('light')\"\n                                            />\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.block-name{display:flex;gap:12px;align-items:center;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.title-company{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500)}.list-company{display:flex;flex-direction:column;gap:4px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding:8px;border-bottom:solid 1px var(--cui-base-200)}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.sub-title-text{display:flex;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentTheme = theme$ | async;\n@let currentLang = lang$ | async;\n\n<ng-container *transloco=\"let t\">\n    <button\n        type=\"button\"\n        [cuiDropdown]=\"content\"\n        class=\"select\"\n        (isOpened)=\"onToggleOpenState($event)\"\n    >\n        <ng-content />\n    </button>\n\n    <ng-template #content>\n        @if (isOpen()) {\n            <cui-dropdown-wrapper\n                width=\"300px\"\n                maxHeight=\"500px\"\n            >\n                <div\n                    #dropdownContainer\n                    class=\"wrapper\"\n                >\n                    <div class=\"block-name\">\n                        <div>\n                            <cui-letter-box\n                                [letter]=\"fullName[0]\"\n                                [shape]=\"'rounded'\"\n                                size=\"md\"\n                            />\n                        </div>\n                        <div>\n                            <ul class=\"title-text\">\n                                {{\n                                    fullName\n                                }}\n                            </ul>\n                            <ul class=\"subtitle-text\">\n                                {{\n                                    email\n                                }}\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        class=\"wrapper block-platform\"\n                        (click)=\"onGoToPlatform()\"\n                    >\n                        <cui-svg\n                            icon=\"cuiIconLogo\"\n                            color=\"var(--cui-base-900)\"\n                        />\n                        <div>{{ t('CUBY_PLATFORM') }}</div>\n                    </div>\n                    <div class=\"list-company\">\n                        @for (company of companies(); track company.id) {\n                            <ul class=\"title-company\">\n                                {{\n                                    company.name\n                                }}\n                            </ul>\n                            <div class=\"list-activity\">\n                                @for (activity of company.contexts; track activity) {\n                                    <cui-activity-item\n                                        class=\"activity-item\"\n                                        [activity]=\"activity\"\n                                        [companyId]=\"company.companyId\"\n                                    />\n                                } @empty {\n                                    <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_ACTIVITY_IN_THIS_COMPANY') }}</div>\n                                }\n                            </div>\n                        } @empty {\n                            <div class=\"sub-title-text\">{{ t('YOU_DONT_HAVE_COMPANY') }}</div>\n                        }\n                    </div>\n                    <div class=\"block-button\">\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconPaletteSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('SWITCH_THEME') }}\n                                    <div class=\"group-sub-button\">\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'dark'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconMoon\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('dark')\"\n                                            />\n                                        </div>\n                                        <div\n                                            [class.container-sub-button__select]=\"currentTheme === 'light'\"\n                                            class=\"container-sub-button\"\n                                        >\n                                            <cui-svg\n                                                icon=\"cuiIconSun\"\n                                                color=\"var(--cui-base-500)\"\n                                                (click)=\"onChangeTheme('light')\"\n                                            />\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button type=\"button\">\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconGlobeSm\" />\n                                <div class=\"text-and-sub-button\">\n                                    {{ t('LANGUAGE') }}\n                                    <div class=\"group-sub-button\">\n                                        @for (lang of langs; track lang) {\n                                            <div\n                                                [class.container-sub-button__select]=\"currentLang === lang\"\n                                                class=\"container-sub-button\"\n                                                (click)=\"onChangeLang(lang)\"\n                                            >\n                                                {{ lang }}\n                                            </div>\n                                        }\n                                    </div>\n                                </div>\n                            </div>\n                        </button>\n                        <button\n                            type=\"button\"\n                            (click)=\"onLogout()\"\n                        >\n                            <div class=\"content-button\">\n                                <cui-svg icon=\"cuiIconLogOutSm\" />\n                                <div class=\"text-and-sub-button\">{{ t('LOG_OUT') }}</div>\n                            </div>\n                        </button>\n                    </div>\n                </div>\n            </cui-dropdown-wrapper>\n        }\n    </ng-template>\n</ng-container>\n", styles: [".wrapper{padding:8px}.block-name{display:flex;gap:12px;align-items:center;padding-bottom:8px;border-bottom:solid 1px var(--cui-base-200);color:var(--cui-base-900)}.title-text{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-900)}.subtitle-text{font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900)}.title-company{font-weight:500;font-size:14px;line-height:20px;color:var(--cui-base-500)}.list-company{display:flex;flex-direction:column;gap:4px;max-height:250px;overflow-y:auto}.list-activity{display:flex;flex-direction:column;gap:4px;padding:8px;border-bottom:solid 1px var(--cui-base-200)}.block-button{display:flex;flex-direction:column;gap:8px;padding-top:8px;width:100%}.content-button{display:flex;gap:8px;align-items:center;padding-right:8px;padding-left:8px;height:36px;color:var(--cui-base-900)}.text-and-sub-button{display:flex;align-items:center;justify-content:space-between;width:100%}.container-sub-button{display:flex;align-items:center;justify-content:center;text-transform:capitalize;border:solid 1px var(--cui-base-200);border-radius:4px;width:28px;height:28px}.group-sub-button{display:flex;gap:4px}.container-sub-button__select{border:solid 1px var(--cui-badge-blue-border);background-color:var(--cui-badge-blue-bg)}.block-platform{display:flex;gap:8px;color:var(--cui-base-900);cursor:pointer}.block-platform:hover{background-color:var(--cui-badge-light-blue-bg)}.sub-title-text{display:flex;align-items:center;justify-content:center;font-weight:400;font-size:12px;line-height:14px;color:var(--cui-base-900);text-align:center}.activity-item{border-radius:8px;cursor:pointer}.activity-item:hover{background-color:var(--cui-badge-light-blue-bg)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**