asksuite-citrus 1.7.5 → 1.7.7

package/lib/asksuite-citrus.module.d.ts

@@ -30,14 +30,18 @@ import * as i28 from "./components/accordion/extendable-panel/extendable-panel.c
 import * as i29 from "./components/table/table.component";
 import * as i30 from "./components/pagination/pagination.component";
 import * as i31 from "./pipes/paginate/paginate.pipe";
-import * as i32 from "@angular/common";
-import * as i33 from "@angular/forms";
-import * as i34 from "@angular/cdk/overlay";
-import * as i35 from "@ngx-translate/core";
-import * as i36 from "ngx-skeleton-loader";
-import * as i37 from "@angular/material/tooltip";
+import * as i32 from "./directives/richtext-toolbox/richtext-toolbox.directive";
+import * as i33 from "./components/richtext-url-prompt/richtext-url-prompt.component";
+import * as i34 from "./components/richtext-toolbox-core/richtext-toolbox-core.component";
+import * as i35 from "./directives/button/ask-text-button.directive";
+import * as i36 from "@angular/common";
+import * as i37 from "@angular/forms";
+import * as i38 from "@angular/cdk/overlay";
+import * as i39 from "@ngx-translate/core";
+import * as i40 from "ngx-skeleton-loader";
+import * as i41 from "@angular/material/tooltip";
 export declare class AsksuiteCitrusModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AsksuiteCitrusModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AsksuiteCitrusModule, [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i14.SpinnerComponent, typeof i15.SpinnerDirective, typeof i16.BadgeDirective, typeof i17.AutofocusDirective, typeof i18.ScrollDirective, typeof i19.AskTooltipDirective, typeof i20.ToastComponent, typeof i21.AskButtonDirective, typeof i22.ModalComponent, typeof i23.ModalBodyDirective, typeof i24.ModalHeaderDirective, typeof i25.ModalFooterDirective, typeof i26.CharacterCounterComponent, typeof i27.AccordionComponent, typeof i28.ExtendablePanelComponent, typeof i29.TableComponent, typeof i30.PaginationComponent, typeof i31.PaginatePipe], [typeof i32.CommonModule, typeof i33.FormsModule, typeof i33.ReactiveFormsModule, typeof i34.CdkOverlayOrigin, typeof i34.CdkConnectedOverlay, typeof i34.OverlayModule, typeof i35.TranslateModule, typeof i36.NgxSkeletonLoaderModule, typeof i37.MatTooltipModule], [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i15.SpinnerDirective, typeof i16.BadgeDirective, typeof i17.AutofocusDirective, typeof i18.ScrollDirective, typeof i19.AskTooltipDirective, typeof i21.AskButtonDirective, typeof i23.ModalBodyDirective, typeof i24.ModalHeaderDirective, typeof i25.ModalFooterDirective, typeof i26.CharacterCounterComponent, typeof i27.AccordionComponent, typeof i28.ExtendablePanelComponent, typeof i29.TableComponent, typeof i30.PaginationComponent, typeof i31.PaginatePipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AsksuiteCitrusModule, [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i14.SpinnerComponent, typeof i15.SpinnerDirective, typeof i16.BadgeDirective, typeof i17.AutofocusDirective, typeof i18.ScrollDirective, typeof i19.AskTooltipDirective, typeof i20.ToastComponent, typeof i21.AskButtonDirective, typeof i22.ModalComponent, typeof i23.ModalBodyDirective, typeof i24.ModalHeaderDirective, typeof i25.ModalFooterDirective, typeof i26.CharacterCounterComponent, typeof i27.AccordionComponent, typeof i28.ExtendablePanelComponent, typeof i29.TableComponent, typeof i30.PaginationComponent, typeof i31.PaginatePipe, typeof i32.RichtextToolboxDirective, typeof i33.RichtextUrlPromptComponent, typeof i34.RichtextToolboxCoreComponent, typeof i35.AskTextButtonDirective], [typeof i36.CommonModule, typeof i37.FormsModule, typeof i37.ReactiveFormsModule, typeof i38.CdkOverlayOrigin, typeof i38.CdkConnectedOverlay, typeof i38.OverlayModule, typeof i39.TranslateModule, typeof i40.NgxSkeletonLoaderModule, typeof i41.MatTooltipModule], [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.ChipsComponent, typeof i10.CheckboxComponent, typeof i11.DatePickerComponent, typeof i12.DatePickerCalendarComponent, typeof i13.SkeletonComponent, typeof i15.SpinnerDirective, typeof i16.BadgeDirective, typeof i17.AutofocusDirective, typeof i18.ScrollDirective, typeof i19.AskTooltipDirective, typeof i21.AskButtonDirective, typeof i35.AskTextButtonDirective, typeof i23.ModalBodyDirective, typeof i24.ModalHeaderDirective, typeof i25.ModalFooterDirective, typeof i26.CharacterCounterComponent, typeof i27.AccordionComponent, typeof i28.ExtendablePanelComponent, typeof i29.TableComponent, typeof i30.PaginationComponent, typeof i31.PaginatePipe, typeof i32.RichtextToolboxDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AsksuiteCitrusModule>;
 }

package/lib/classes/richtext-wrapper.d.ts

@@ -0,0 +1,52 @@
+import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import { RichTextFunctions, ToolKeys, ToolsState } from '../interfaces/richtext-toolbox.interface';
+import { QuillBuilderService } from '../services/quill-builder.service';
+export declare class RichtextWrapper implements RichTextFunctions {
+    private ngZone;
+    private cd;
+    private quillBuilder;
+    private elementRef;
+    private quill;
+    private stateSub;
+    private esc$;
+    private enter$;
+    private maxLength;
+    private breakOnEnter;
+    private textChangeHandler;
+    private selectionChangeHandler;
+    private bindings;
+    private maxLengthSubscription?;
+    get state(): ToolsState;
+    state$: import("rxjs").Observable<ToolsState>;
+    get listenTextChanges$(): import("rxjs").Observable<string>;
+    get listenOnTouched$(): import("rxjs").Observable<boolean>;
+    get listenEscape$(): import("rxjs").Observable<boolean>;
+    get listenEnter$(): import("rxjs").Observable<boolean>;
+    constructor(ngZone: NgZone, cd: ChangeDetectorRef, quillBuilder: QuillBuilderService, elementRef: ElementRef<HTMLElement>);
+    setItalic(): void;
+    setBold(): void;
+    setUnderline(): void;
+    setStrike(): void;
+    setListNumbered(): void;
+    setListBulleted(): void;
+    setLink(link: string): void;
+    setJustifyLeft(): void;
+    setJustifyCenter(): void;
+    setJustifyRight(): void;
+    setRemove(): void;
+    setPlaceholder(placeholder: string): void;
+    setText(text: string): void;
+    setMaxLength(length: number): void;
+    setDisabledTools(tools: ToolKeys): void;
+    setEditorClass(className: string): void;
+    getEditorElement(): HTMLDivElement;
+    disable(): void;
+    enable(): void;
+    focus(): void;
+    setBreakOnEnter(breakOnEnter: boolean): void;
+    destroy(): void;
+    private isToolDisabled;
+    private urlMatcher;
+    private listenEditorChanges;
+    private update;
+}

package/lib/classes/toolbox-bubble.d.ts

@@ -0,0 +1,12 @@
+import { Injector } from "@angular/core";
+import { Toolbox } from "./toolbox";
+import { ToolsState } from "../interfaces/richtext-toolbox.interface";
+export declare class BubbleStrategy extends Toolbox {
+    private clickListener?;
+    constructor(injector: Injector);
+    private move;
+    private listenOutsideClicks;
+    onToolsChanged(state: ToolsState): void;
+    displayComponent(): void;
+    destroyAll(): void;
+}

package/lib/classes/toolbox-topbar.d.ts

@@ -0,0 +1,8 @@
+import { Injector } from "@angular/core";
+import { Toolbox } from "./toolbox";
+import { ToolbarItem, ToolsState } from "../interfaces/richtext-toolbox.interface";
+export declare class TopbarStrategy extends Toolbox {
+    constructor(injector: Injector);
+    displayComponent(): void;
+    prepareUpdatedTools(toolState: ToolsState): ToolbarItem[];
+}

package/lib/classes/toolbox.d.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectorRef, ComponentRef, ElementRef, Injector, NgZone, Renderer2, ViewContainerRef } from '@angular/core';
+import { RichtextWrapper } from './richtext-wrapper';
+import { ToolbarItem, ToolboxInput, ToolsState } from '../interfaces/richtext-toolbox.interface';
+import { RichtextToolboxCoreComponent } from '../components/richtext-toolbox-core/richtext-toolbox-core.component';
+export declare abstract class Toolbox {
+    readonly richtextWrapper: RichtextWrapper;
+    protected hostEl: ElementRef<HTMLElement>;
+    protected viewContainerRef: ViewContainerRef;
+    protected renderer2: Renderer2;
+    protected ngZone: NgZone;
+    protected cd: ChangeDetectorRef;
+    protected componentRef?: ComponentRef<RichtextToolboxCoreComponent>;
+    protected get component(): RichtextToolboxCoreComponent | undefined;
+    protected get componentEl(): HTMLElement | undefined;
+    private parentEl?;
+    private toolboxInput?;
+    private _subscription?;
+    constructor(injector: Injector);
+    destroyAll(): void;
+    toggleInputDisplay(display: boolean): void;
+    setToolInput(toolInput: ToolboxInput): void;
+    private isInputVisible;
+    private getDisabledTools;
+    private listenRichtextState;
+    private getDefaultTools;
+    protected onToolsChanged(toolsState: ToolsState): void;
+    protected isVisible(): boolean;
+    protected destroyComponent(): void;
+    protected displayComponent(): void;
+    protected prepareUpdatedTools(toolState: ToolsState): ToolbarItem[];
+}

package/lib/components/richtext-toolbox-core/richtext-toolbox-core.component.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter, QueryList, SimpleChanges } from '@angular/core';
+import { ToolbarItem } from '../../interfaces/richtext-toolbox.interface';
+import { AskDropdownDirective } from '../../directives';
+import * as i0 from "@angular/core";
+export declare class RichtextToolboxCoreComponent {
+    dropdowns?: QueryList<AskDropdownDirective>;
+    close: EventEmitter<void>;
+    tool: EventEmitter<ToolbarItem>;
+    get toolbarItems(): ToolbarItem[];
+    set toolbarItems(value: ToolbarItem[]);
+    type: 'topbar' | 'bubble';
+    class: 'top-toolbox' | 'bubble-toolbox' | string;
+    private _toolbarItems;
+    private urlIdx;
+    protected isUrlMode: boolean;
+    get linkTool(): ToolbarItem | undefined;
+    get urlDropdownRef(): AskDropdownDirective | undefined;
+    ngOnChanges(sp: SimpleChanges): void;
+    onTool(toolbarItem: ToolbarItem): void;
+    onUrl(link: string): void;
+    trackByToolFn(index: number, item: ToolbarItem): import("../../interfaces/richtext-toolbox.interface").Tool;
+    protected closeUrlInput(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichtextToolboxCoreComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RichtextToolboxCoreComponent, "ask-richtext-toolbox-core", never, { "toolbarItems": { "alias": "toolbarItems"; "required": false; }; "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "close": "close"; "tool": "tool"; }, never, never, false, never>;
+}

package/lib/components/richtext-url-prompt/richtext-url-prompt-state.service.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class RichtextUrlPromptStateService {
+    urlText: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichtextUrlPromptStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RichtextUrlPromptStateService>;
+}

package/lib/components/richtext-url-prompt/richtext-url-prompt.component.d.ts

@@ -0,0 +1,19 @@
+import { DestroyRef, ElementRef, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { RichtextUrlPromptStateService } from './richtext-url-prompt-state.service';
+import * as i0 from "@angular/core";
+export declare class RichtextUrlPromptComponent {
+    private destroyRef;
+    private state;
+    inputEl?: ElementRef<HTMLInputElement>;
+    isPreset: boolean;
+    set _url(url: string);
+    url: EventEmitter<string>;
+    formControl: FormControl<string>;
+    get isValid(): boolean;
+    constructor(destroyRef: DestroyRef, state: RichtextUrlPromptStateService);
+    onSubmit(event: Event): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichtextUrlPromptComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RichtextUrlPromptComponent, "ask-richtext-url-prompt", never, { "_url": { "alias": "url"; "required": false; }; }, { "url": "url"; }, never, never, false, never>;
+}

package/lib/components/toast/toast.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { OnDestroy, OnInit } from '@angular/core';
 import { ToastConfig, ToastData, ToastType } from '../../services/toast/toast.config';
 import { ToastRef } from "../../services/toast/toast-ref";
@@ -8,7 +7,7 @@ export declare class ToastComponent implements OnInit, OnDestroy {
     private ref;
     message: string;
     icon: string;
-    timeoutRef: NodeJS.Timeout;
+    timeoutRef: number;
     config: ToastConfig;
     color: string;
     fontColor: string;

package/lib/constants/richtext-toolbox.constants.d.ts

@@ -0,0 +1,4 @@
+import { RichTextFunctionsKeys, Tool, ToolKeys } from "../interfaces/richtext-toolbox.interface";
+export declare const TOOL_FUNCTION_MAP: Record<Tool, RichTextFunctionsKeys>;
+export declare const TOOL_ICON_MAP: Record<Tool, string>;
+export declare const ALL_TOOLS: ToolKeys;

package/lib/constants/url-regex.constant.d.ts

@@ -0,0 +1 @@
+export declare const URL_REGEX: RegExp;

package/lib/directives/button/ask-base-button.directive.d.ts

@@ -0,0 +1,9 @@
+import { ElementRef } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare abstract class AskBaseButtonDirective {
+    private el;
+    color: 'primary' | 'secondary' | '';
+    protected constructor(el: ElementRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AskBaseButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AskBaseButtonDirective, never, never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/directives/button/ask-button.directive.d.ts

@@ -1,9 +1,8 @@
 import { ElementRef } from '@angular/core';
+import { AskBaseButtonDirective } from "./ask-base-button.directive";
 import * as i0 from "@angular/core";
-export declare class AskButtonDirective {
-    private el;
-    set color(value: 'primary' | 'secondary' | '');
+export declare class AskButtonDirective extends AskBaseButtonDirective {
     constructor(el: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<AskButtonDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AskButtonDirective, "[askButton]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AskButtonDirective, "button[askButton]", never, {}, {}, never, never, false, never>;
 }

package/lib/directives/button/ask-text-button.directive.d.ts

@@ -0,0 +1,8 @@
+import { ElementRef } from '@angular/core';
+import { AskBaseButtonDirective } from "./ask-base-button.directive";
+import * as i0 from "@angular/core";
+export declare class AskTextButtonDirective extends AskBaseButtonDirective {
+    constructor(el: ElementRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AskTextButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AskTextButtonDirective, "[askTextButton]", never, {}, {}, never, never, false, never>;
+}

package/lib/directives/button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ask-text-button.directive';
+export * from './ask-button.directive';

package/lib/directives/index.d.ts

@@ -1,7 +1,8 @@
 export * from './badge/badge.directive';
 export * from './scroll/scroll.directive';
-export * from './button/ask-button.directive';
+export * from './button';
 export * from './tooltip/ask-tooltip.directive';
 export * from './spinner/spinner.directive';
 export * from './ask-dropdown.directive';
 export * from './autofocus/autofocus.directive';
+export * from './richtext-toolbox/richtext-toolbox.directive';

package/lib/directives/richtext-toolbox/richtext-toolbox.directive.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter, Injector, OnChanges, SimpleChanges } from '@angular/core';
+import { ToolKeys, ToolLayout, ToolsState } from '../../interfaces/richtext-toolbox.interface';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class RichtextToolboxDirective implements OnChanges, ControlValueAccessor {
+    private injector;
+    private toolbox?;
+    private onChange;
+    private onTouched;
+    private subscription?;
+    private text;
+    rtPlaceholder: string;
+    rtTools: ToolKeys;
+    rtDisabledTools: ToolKeys;
+    rtType: ToolLayout;
+    rtToolbarOnly: boolean;
+    maxlength: number;
+    rtToolbarClass: string;
+    rtEditorClass: string;
+    rtBreakOnEnter: boolean;
+    inputChange: EventEmitter<string>;
+    inputEnter: EventEmitter<any>;
+    inputEscape: EventEmitter<any>;
+    toolChange: EventEmitter<ToolsState>;
+    constructor(injector: Injector);
+    ngOnChanges(sp: SimpleChanges): void;
+    ngOnDestroy(): void;
+    focus(): void;
+    writeValue(text: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    private prepareToolbar;
+    private prepareListeners;
+    private update;
+    private destroyAll;
+    private generateToolboxLayout;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichtextToolboxDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RichtextToolboxDirective, "[askRichtextToolbox]", never, { "rtPlaceholder": { "alias": "rtPlaceholder"; "required": false; }; "rtTools": { "alias": "rtTools"; "required": false; }; "rtDisabledTools": { "alias": "rtDisabledTools"; "required": false; }; "rtType": { "alias": "rtType"; "required": false; }; "rtToolbarOnly": { "alias": "rtToolbarOnly"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "rtToolbarClass": { "alias": "rtToolbarClass"; "required": false; }; "rtEditorClass": { "alias": "rtEditorClass"; "required": false; }; "rtBreakOnEnter": { "alias": "rtBreakOnEnter"; "required": false; }; }, { "inputChange": "inputChange"; "inputEnter": "inputEnter"; "inputEscape": "inputEscape"; "toolChange": "toolChange"; }, never, never, false, never>;
+}

package/lib/helpers/are-objects-equal.helper.d.ts

@@ -0,0 +1 @@
+export declare function areObjectsEqual(obj1: Record<string, any>, obj2: Record<string, any>): boolean;

package/lib/interfaces/richtext-toolbox.interface.d.ts

@@ -0,0 +1,54 @@
+import { BoundsStatic } from 'quill';
+export interface RichtextFormats {
+    italic: boolean;
+    bold: boolean;
+    underline: boolean;
+    strike: boolean;
+    link: string;
+    list_bulleted: boolean;
+    list_numbered: boolean;
+    justify_left: boolean;
+    justify_center: boolean;
+    justify_right: boolean;
+}
+export interface ToolsState {
+    hasSelection: boolean;
+    hasFocus: boolean;
+    disabledTools: ToolKeys;
+    formats: RichtextFormats;
+    bounds?: BoundsStatic;
+}
+type FunctionKeys<T> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => any ? K : never;
+}[keyof T];
+export interface RichTextFunctions {
+    setItalic(): void;
+    setBold(): void;
+    setUnderline(): void;
+    setStrike(): void;
+    setListNumbered(): void;
+    setListBulleted(): void;
+    setLink(link: string): void;
+    setJustifyLeft(): void;
+    setJustifyCenter(): void;
+    setJustifyRight(): void;
+    setRemove(): void;
+}
+export type RichTextFunctionsKeys = FunctionKeys<RichTextFunctions>;
+export type ToolbarItem = {
+    tool: Tool;
+    selected: boolean;
+    disabled: boolean;
+    icon: string;
+    toolFunctionName: RichTextFunctionsKeys;
+    value?: string;
+};
+export type Tool = 'bold' | 'italic' | 'underline' | 'strike' | 'list_numbered' | 'list_bulleted' | 'link' | 'justify_left' | 'justify_center' | 'justify_right' | 'clear';
+export type ToolKeys = Tool[];
+export type ToolLayout = 'bubble' | 'topbar';
+export interface ToolboxInput {
+    availableTools: ToolKeys;
+    disabledTools: ToolKeys;
+    class: string;
+}
+export {};

package/lib/services/quill-builder.service.d.ts

@@ -0,0 +1,8 @@
+import Quill from 'quill';
+import * as i0 from "@angular/core";
+export declare class QuillBuilderService {
+    constructor();
+    getQuill(): typeof Quill;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuillBuilderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<QuillBuilderService>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asksuite-citrus",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0",
@@ -8,7 +8,8 @@
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "moment": "^2.29.4",
-    "ngx-skeleton-loader": "^8.0.0"
+    "ngx-skeleton-loader": "^8.0.0",
+    "quill": "^1.3.7"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -23,3 +23,4 @@ export * from './lib/services/modal';
 export * from './lib/pipes/paginate/paginate.pipe';
 export * from './lib/services/toast/toast.config';
 export * from './lib/pipes/paginate/paginate.helper';
+export * from './lib/interfaces/richtext-toolbox.interface';

package/styles/ask-mixins.scss

@@ -0,0 +1,45 @@
+@mixin remove-button-layout {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  line-height: 0;
+}
+
+@mixin remove-input-layout {
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+@mixin default-input() {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: $radii-xs;
+  border: 1px solid $grey-200;
+  padding: 16px;
+  outline: none;
+  gap: 8px;
+  line-height: 14px;
+  color: $grey-700;
+  height: 48px;
+  font-size: $font-sm;
+  font-weight: $font-weight-regular;
+  transition: border 0.2s;
+
+  &:focus {
+    border-color: $asksuite-orange;
+  }
+
+  .material-icons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 14px;
+  }
+}

package/styles/button.scss

@@ -38,5 +38,34 @@
     background: $asksuite-orange;
     color: white;
   }
+}
 
+.ask-text-button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: $radii-xs;
+  outline: none;
+  background: none;
+  color: var(--asksuite-orange);
+  font-size: $font-md;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+  transition: all .3ms;
+
+  &:hover {
+    text-decoration: none;
+    background: $grey-50;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: $grey-300;
+  }
+
+  &.-primary {
+    color: white;
+  }
+
+  &.-secondary {
+    color: $grey-500;
+  }
 }

package/styles/font-weights.scss

@@ -1,5 +1,6 @@
 $font-weight-regular: 400;
 $font-weight-medium: 500;
+$font-weight-bolder: 700;
 
 :root {
   --font-weight-regular: $font-weight-regular;

package/styles/quill.scss

@@ -0,0 +1,18 @@
+@import url("https://cdn.quilljs.com/1.0.0/quill.core.css");
+
+.ql-editor {
+  padding: 14px 16px;
+  font-size: 0.875rem;
+  word-break: break-word;
+}
+
+.bubble-toolbox {
+  position: absolute;
+  background-color: var(--grey-800);
+  border-radius: 8px;
+  z-index: 999;
+}
+
+.top-toolbox {
+  background-color: var(--grey-100);
+}

package/styles/styles.scss

@@ -5,36 +5,8 @@
 
 @import './button';
 @import './modal';
-/*
- * Mixins
- */
-@mixin default-input() {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-radius: $radii-xs;
-  border: 1px solid $grey-200;
-  padding: 16px;
-  outline: none;
-  gap: 8px;
-  line-height: 14px;
-  color: $grey-700;
-  height: 48px;
-  font-size: $font-sm;
-  font-weight: $font-weight-regular;
-  transition: border .2s;
-
-  &:focus {
-    border-color: $asksuite-orange;
-  }
-
-  .material-icons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 14px;
-  }
-}
+@import './ask-mixins';
+@import './quill';
 
 /*
  * Material Icons