@acorex/components 22.3.25 → 22.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,13 +1,41 @@
|
|
|
1
1
|
import { AXComponent, MXInputBaseValueComponent, MXLookComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/cdk/common';
|
|
2
|
-
import {
|
|
2
|
+
import { AXWysiwyg, AX_DEFAULT_WYSIWYG_FEATURES } from '@acorex/cdk/wysiwyg';
|
|
3
|
+
import { AXTranslationService, AXTranslatorPipe, toTranslatedSignal } from '@acorex/core/translation';
|
|
4
|
+
import { isPlatformBrowser, AsyncPipe } from '@angular/common';
|
|
3
5
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { viewChild, inject, ElementRef, Renderer2, PLATFORM_ID, DestroyRef, afterNextRender, ViewEncapsulation, Component,
|
|
6
|
+
import { signal, computed, Injectable, viewChild, inject, ElementRef, Renderer2, PLATFORM_ID, DestroyRef, afterNextRender, ViewEncapsulation, Component, input, contentChild, effect, forwardRef, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
5
7
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
|
-
import
|
|
8
|
+
import * as i1 from '@angular/forms';
|
|
9
|
+
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
7
10
|
import { classes } from 'polytype';
|
|
8
|
-
import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
|
|
9
11
|
import { AXZIndexService } from '@acorex/core/z-index';
|
|
10
|
-
import {
|
|
12
|
+
import { AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent } from '@acorex/components/button';
|
|
13
|
+
import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorColorIndicatorComponent } from '@acorex/components/decorators';
|
|
14
|
+
import { AXDropdownPanelComponent } from '@acorex/components/dropdown';
|
|
15
|
+
import { AXColorPaletteComponent, AXColorPalettePickerComponent, AXColorPaletteSwatchesComponent, AXColorPaletteInputComponent } from '@acorex/components/color-palette';
|
|
16
|
+
import { AXPopoverComponent } from '@acorex/components/popover';
|
|
17
|
+
import { AXComboBoxComponent } from '@acorex/components/combo-box';
|
|
18
|
+
import { AXTextBoxComponent } from '@acorex/components/text-box';
|
|
19
|
+
|
|
20
|
+
class AXWysiwygContext {
|
|
21
|
+
constructor() {
|
|
22
|
+
this.disabled = signal(false, /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
24
|
+
this.readonly = signal(false, /* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
26
|
+
this.mode = signal('compact', /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
28
|
+
this.compact = computed(() => this.mode() === 'compact', /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
|
|
30
|
+
this.interactionDisabled = computed(() => this.disabled() || this.readonly(), /* @ts-ignore */
|
|
31
|
+
...(ngDevMode ? [{ debugName: "interactionDisabled" }] : /* istanbul ignore next */ []));
|
|
32
|
+
}
|
|
33
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
34
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygContext }); }
|
|
35
|
+
}
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygContext, decorators: [{
|
|
37
|
+
type: Injectable
|
|
38
|
+
}] });
|
|
11
39
|
|
|
12
40
|
/**
|
|
13
41
|
* Toolbar for the WYSIWYG editor.
|
|
@@ -126,13 +154,71 @@ class AXWysiwygToolbarComponent {
|
|
|
126
154
|
this.closePickerOverlay();
|
|
127
155
|
}
|
|
128
156
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXWysiwygToolbarComponent, isStandalone: true, selector: "ax-wysiwyg-toolbar", providers: [{ provide: AXComponent, useExisting: AXWysiwygToolbarComponent }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-wysiwyg-toolbar-content\">\n <div #toolbar class=\"ax-wysiwyg-toolbar-tools\" role=\"toolbar\" aria-label=\"Formatting\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["@layer components{ax-wysiwyg-toolbar{position:relative;z-index:10;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1);row-gap:calc(var(--spacing, .25rem) * 1);overflow:visible;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content>.ax-wysiwyg-toolbar-tools{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;flex:1 1 16rem;min-width:min(100%,12rem);max-width:100%}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content
|
|
157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXWysiwygToolbarComponent, isStandalone: true, selector: "ax-wysiwyg-toolbar", providers: [{ provide: AXComponent, useExisting: AXWysiwygToolbarComponent }], viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-wysiwyg-toolbar-content\">\n <div #toolbar class=\"ax-wysiwyg-toolbar-tools\" role=\"toolbar\" aria-label=\"Formatting\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["@layer components{ax-wysiwyg-toolbar{position:relative;z-index:10;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1);row-gap:calc(var(--spacing, .25rem) * 1);overflow:visible;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content>.ax-wysiwyg-toolbar-tools{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;flex:1 1 16rem;min-width:min(100%,12rem);max-width:100%}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix{max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;display:flex!important;flex:1 1 auto!important;align-self:center!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*{position:relative;display:flex;max-width:100%;flex-wrap:wrap;align-items:center;overflow:visible;flex:0 0 auto;min-width:auto}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*{padding-inline-start:calc(var(--spacing, .25rem) * 1.5);margin-inline-start:.125rem}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;width:1px;height:1rem;transform:translateY(-50%);background:var(--color-border-surface)}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content>ax-suffix{display:flex;max-width:100%;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;display:flex!important;flex:0 0 auto!important;align-self:center!important;width:auto!important;height:auto!important;max-height:none!important;margin-inline-start:auto!important;padding-inline-start:.25rem!important;border:0!important}ax-wysiwyg-toolbar ax-prefix>ax-wysiwyg-font-style{flex-wrap:nowrap}ax-wysiwyg-toolbar ax-wysiwyg-font-style>.ax-wysiwyg-block-menu-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center}ax-wysiwyg-toolbar ax-prefix>*:empty,ax-wysiwyg-toolbar ax-wysiwyg-list>.ax-wysiwyg-tool-group:empty{display:none}ax-wysiwyg-toolbar ax-prefix>*:empty+*:before,ax-wysiwyg-toolbar ax-prefix>*:has(>.ax-wysiwyg-tool-group:only-child:empty)+*:before{content:none}ax-wysiwyg-toolbar ax-wysiwyg-font-style>.ax-wysiwyg-tool-group:not(.ax-wysiwyg-font-size-group),ax-wysiwyg-toolbar ax-wysiwyg-colors>.ax-wysiwyg-tool-group{display:contents}ax-wysiwyg-toolbar ax-wysiwyg-font-style>.ax-wysiwyg-font-size-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center;width:5.75rem;max-width:7.5rem}ax-wysiwyg-toolbar ax-wysiwyg-font-style .ax-wysiwyg-font-size-combo{width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}@media(max-width:40rem){ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*{margin-inline-start:0;padding-inline-start:0}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*:before{content:none}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
130
158
|
}
|
|
131
159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygToolbarComponent, decorators: [{
|
|
132
160
|
type: Component,
|
|
133
|
-
args: [{ selector: 'ax-wysiwyg-toolbar', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXWysiwygToolbarComponent }], template: "<div class=\"ax-wysiwyg-toolbar-content\">\n <div #toolbar class=\"ax-wysiwyg-toolbar-tools\" role=\"toolbar\" aria-label=\"Formatting\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["@layer components{ax-wysiwyg-toolbar{position:relative;z-index:10;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1);row-gap:calc(var(--spacing, .25rem) * 1);overflow:visible;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content>.ax-wysiwyg-toolbar-tools{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;flex:1 1 16rem;min-width:min(100%,12rem);max-width:100%}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content
|
|
161
|
+
args: [{ selector: 'ax-wysiwyg-toolbar', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXWysiwygToolbarComponent }], template: "<div class=\"ax-wysiwyg-toolbar-content\">\n <div #toolbar class=\"ax-wysiwyg-toolbar-tools\" role=\"toolbar\" aria-label=\"Formatting\">\n <ng-content select=\"ax-prefix\"></ng-content>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n", styles: ["@layer components{ax-wysiwyg-toolbar{position:relative;z-index:10;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 1);row-gap:calc(var(--spacing, .25rem) * 1);overflow:visible;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content>.ax-wysiwyg-toolbar-tools{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;flex:1 1 16rem;min-width:min(100%,12rem);max-width:100%}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix{max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;display:flex!important;flex:1 1 auto!important;align-self:center!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*{position:relative;display:flex;max-width:100%;flex-wrap:wrap;align-items:center;overflow:visible;flex:0 0 auto;min-width:auto}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*{padding-inline-start:calc(var(--spacing, .25rem) * 1.5);margin-inline-start:.125rem}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*:before{content:\"\";position:absolute;inset-inline-start:0;top:50%;width:1px;height:1rem;transform:translateY(-50%);background:var(--color-border-surface)}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content>ax-suffix{display:flex;max-width:100%;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 1);overflow:visible;display:flex!important;flex:0 0 auto!important;align-self:center!important;width:auto!important;height:auto!important;max-height:none!important;margin-inline-start:auto!important;padding-inline-start:.25rem!important;border:0!important}ax-wysiwyg-toolbar ax-prefix>ax-wysiwyg-font-style{flex-wrap:nowrap}ax-wysiwyg-toolbar ax-wysiwyg-font-style>.ax-wysiwyg-block-menu-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center}ax-wysiwyg-toolbar ax-prefix>*:empty,ax-wysiwyg-toolbar ax-wysiwyg-list>.ax-wysiwyg-tool-group:empty{display:none}ax-wysiwyg-toolbar ax-prefix>*:empty+*:before,ax-wysiwyg-toolbar ax-prefix>*:has(>.ax-wysiwyg-tool-group:only-child:empty)+*:before{content:none}ax-wysiwyg-toolbar ax-wysiwyg-font-style>.ax-wysiwyg-tool-group:not(.ax-wysiwyg-font-size-group),ax-wysiwyg-toolbar ax-wysiwyg-colors>.ax-wysiwyg-tool-group{display:contents}ax-wysiwyg-toolbar ax-wysiwyg-font-style>.ax-wysiwyg-font-size-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center;width:5.75rem;max-width:7.5rem}ax-wysiwyg-toolbar ax-wysiwyg-font-style .ax-wysiwyg-font-size-combo{width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0)}@media(max-width:40rem){ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*{margin-inline-start:0;padding-inline-start:0}ax-wysiwyg-toolbar>.ax-wysiwyg-toolbar-content ax-prefix>*+*:before{content:none}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
134
162
|
}], ctorParameters: () => [], propDecorators: { toolbar: [{ type: i0.ViewChild, args: ['toolbar', { isSignal: true }] }] } });
|
|
135
163
|
|
|
164
|
+
const SCOPE = '@acorex:wysiwyg';
|
|
165
|
+
const AX_WYSIWYG_I18N = {
|
|
166
|
+
placeholder: `${SCOPE}.placeholder`,
|
|
167
|
+
menu: {
|
|
168
|
+
blockType: `${SCOPE}.menu.block-type`,
|
|
169
|
+
insert: `${SCOPE}.menu.insert`,
|
|
170
|
+
align: `${SCOPE}.menu.align`,
|
|
171
|
+
},
|
|
172
|
+
tools: {
|
|
173
|
+
undo: `${SCOPE}.tools.undo`,
|
|
174
|
+
redo: `${SCOPE}.tools.redo`,
|
|
175
|
+
bold: `${SCOPE}.tools.bold`,
|
|
176
|
+
italic: `${SCOPE}.tools.italic`,
|
|
177
|
+
underline: `${SCOPE}.tools.underline`,
|
|
178
|
+
strike: `${SCOPE}.tools.strike`,
|
|
179
|
+
code: `${SCOPE}.tools.code`,
|
|
180
|
+
codeBlock: `${SCOPE}.tools.code-block`,
|
|
181
|
+
link: `${SCOPE}.tools.link`,
|
|
182
|
+
image: `${SCOPE}.tools.image`,
|
|
183
|
+
video: `${SCOPE}.tools.video`,
|
|
184
|
+
bulletList: `${SCOPE}.tools.bullet-list`,
|
|
185
|
+
orderedList: `${SCOPE}.tools.ordered-list`,
|
|
186
|
+
rtl: `${SCOPE}.tools.rtl`,
|
|
187
|
+
textColor: `${SCOPE}.tools.text-color`,
|
|
188
|
+
highlight: `${SCOPE}.tools.highlight`,
|
|
189
|
+
paragraph: `${SCOPE}.tools.paragraph`,
|
|
190
|
+
alignLeft: `${SCOPE}.tools.align-left`,
|
|
191
|
+
alignCenter: `${SCOPE}.tools.align-center`,
|
|
192
|
+
alignRight: `${SCOPE}.tools.align-right`,
|
|
193
|
+
alignJustify: `${SCOPE}.tools.align-justify`,
|
|
194
|
+
},
|
|
195
|
+
blocks: {
|
|
196
|
+
paragraph: `${SCOPE}.blocks.paragraph`,
|
|
197
|
+
blockquote: `${SCOPE}.blocks.blockquote`,
|
|
198
|
+
codeBlock: `${SCOPE}.blocks.code-block`,
|
|
199
|
+
bulletList: `${SCOPE}.blocks.bullet-list`,
|
|
200
|
+
orderedList: `${SCOPE}.blocks.ordered-list`,
|
|
201
|
+
image: `${SCOPE}.blocks.image`,
|
|
202
|
+
video: `${SCOPE}.blocks.video`,
|
|
203
|
+
heading: (level) => `${SCOPE}.blocks.heading${level}`,
|
|
204
|
+
},
|
|
205
|
+
fontSize: {
|
|
206
|
+
placeholder: `${SCOPE}.font-size.placeholder`,
|
|
207
|
+
small: `${SCOPE}.font-size.small`,
|
|
208
|
+
normal: `${SCOPE}.font-size.normal`,
|
|
209
|
+
large: `${SCOPE}.font-size.large`,
|
|
210
|
+
huge: `${SCOPE}.font-size.huge`,
|
|
211
|
+
},
|
|
212
|
+
insert: {
|
|
213
|
+
linkUrl: `${SCOPE}.insert.link-url`,
|
|
214
|
+
imageUrl: `${SCOPE}.insert.image-url`,
|
|
215
|
+
videoUrl: `${SCOPE}.insert.video-url`,
|
|
216
|
+
apply: `${SCOPE}.insert.apply`,
|
|
217
|
+
remove: `${SCOPE}.insert.remove`,
|
|
218
|
+
insert: `${SCOPE}.insert.insert`,
|
|
219
|
+
},
|
|
220
|
+
};
|
|
221
|
+
|
|
136
222
|
/**
|
|
137
223
|
* Editing surface for the WYSIWYG editor.
|
|
138
224
|
* @category Components
|
|
@@ -143,28 +229,13 @@ class AXWysiwygViewComponent {
|
|
|
143
229
|
...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
|
|
144
230
|
}
|
|
145
231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
146
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXWysiwygViewComponent, isStandalone: true, selector: "ax-wysiwyg-view", providers: [{ provide: AXComponent, useExisting: AXWysiwygViewComponent }], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #editor></div>\n", styles: ["@layer components{ax-wysiwyg-view{display:block;height:auto}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXWysiwygViewComponent, isStandalone: true, selector: "ax-wysiwyg-view", providers: [{ provide: AXComponent, useExisting: AXWysiwygViewComponent }], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #editor class=\"ax-wysiwyg-editor-host\"></div>\n", styles: ["@layer components{ax-wysiwyg-view{display:block;height:auto}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
147
233
|
}
|
|
148
234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygViewComponent, decorators: [{
|
|
149
235
|
type: Component,
|
|
150
|
-
args: [{ selector: 'ax-wysiwyg-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXWysiwygViewComponent }], template: "<div #editor></div>\n", styles: ["@layer components{ax-wysiwyg-view{display:block;height:auto}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
236
|
+
args: [{ selector: 'ax-wysiwyg-view', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXWysiwygViewComponent }], template: "<div #editor class=\"ax-wysiwyg-editor-host\"></div>\n", styles: ["@layer components{ax-wysiwyg-view{display:block;height:auto}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
151
237
|
}], propDecorators: { editor: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
|
|
152
238
|
|
|
153
|
-
class WysiwygService {
|
|
154
|
-
constructor() {
|
|
155
|
-
this.selectedColor = signal('', /* @ts-ignore */
|
|
156
|
-
...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
|
|
157
|
-
this.selectedBackgroundColor = signal('', /* @ts-ignore */
|
|
158
|
-
...(ngDevMode ? [{ debugName: "selectedBackgroundColor" }] : /* istanbul ignore next */ []));
|
|
159
|
-
}
|
|
160
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WysiwygService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
161
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WysiwygService }); }
|
|
162
|
-
}
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WysiwygService, decorators: [{
|
|
164
|
-
type: Injectable
|
|
165
|
-
}] });
|
|
166
|
-
|
|
167
|
-
let quillIconsRegistered = false;
|
|
168
239
|
/**
|
|
169
240
|
* A container component for WYSIWYG (What You See Is What You Get) editor functionality.
|
|
170
241
|
* @category Components
|
|
@@ -184,78 +255,46 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
|
|
|
184
255
|
*/
|
|
185
256
|
this.initialLine = input(3, /* @ts-ignore */
|
|
186
257
|
...(ngDevMode ? [{ debugName: "initialLine" }] : /* istanbul ignore next */ []));
|
|
187
|
-
|
|
258
|
+
/**
|
|
259
|
+
* Toolbar layout: `compact` groups block types and insert actions in a dropdown; `normal` shows all tools inline.
|
|
260
|
+
*/
|
|
261
|
+
this.mode = input('compact', /* @ts-ignore */
|
|
262
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
263
|
+
this.wysiwyg = inject(AXWysiwyg);
|
|
264
|
+
this.context = inject(AXWysiwygContext);
|
|
188
265
|
this.platformId = inject(PLATFORM_ID);
|
|
189
266
|
this.destroyRef = inject(DestroyRef);
|
|
190
|
-
this.
|
|
191
|
-
|
|
267
|
+
this.translation = inject(AXTranslationService);
|
|
268
|
+
this.view = contentChild(AXWysiwygViewComponent, /* @ts-ignore */
|
|
269
|
+
...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
|
|
192
270
|
this.toolbar = contentChild(AXWysiwygToolbarComponent, /* @ts-ignore */
|
|
193
271
|
...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
|
|
194
|
-
this.wysiwyg = signal(null, /* @ts-ignore */
|
|
195
|
-
...(ngDevMode ? [{ debugName: "wysiwyg" }] : /* istanbul ignore next */ []));
|
|
196
272
|
this.lastCommittedHtml = null;
|
|
197
|
-
this.applyingExternal = false;
|
|
198
273
|
this.alive = true;
|
|
199
274
|
this.changeHandlerTimer = null;
|
|
200
|
-
this.
|
|
275
|
+
this.syncToolbarMode = effect(() => {
|
|
276
|
+
this.context.mode.set(this.mode());
|
|
277
|
+
}, /* @ts-ignore */
|
|
278
|
+
...(ngDevMode ? [{ debugName: "syncToolbarMode" }] : /* istanbul ignore next */ []));
|
|
201
279
|
this.#init = afterNextRender(() => {
|
|
202
280
|
this.destroyRef.onDestroy(() => {
|
|
203
281
|
this.alive = false;
|
|
204
282
|
if (this.changeHandlerTimer != null) {
|
|
205
283
|
clearTimeout(this.changeHandlerTimer);
|
|
206
284
|
}
|
|
285
|
+
this.wysiwyg.destroy();
|
|
207
286
|
});
|
|
208
287
|
void this.initEditor();
|
|
209
288
|
});
|
|
210
|
-
this.#placeholder = effect(() => {
|
|
211
|
-
const quill = this.wysiwyg();
|
|
212
|
-
if (!quill)
|
|
213
|
-
return;
|
|
214
|
-
quill.root.setAttribute('data-placeholder', this.placeHolder() || 'Write Your Message ...');
|
|
215
|
-
}, /* @ts-ignore */
|
|
216
|
-
...(ngDevMode ? [{ debugName: "#placeholder" }] : /* istanbul ignore next */ []));
|
|
217
|
-
this.onTextChange = (_delta, _oldDelta, source) => {
|
|
218
|
-
if (source !== 'user' || this.applyingExternal || this.disabled || this.readonly)
|
|
219
|
-
return;
|
|
220
|
-
this.scheduleCommit();
|
|
221
|
-
};
|
|
222
|
-
this.onSelectionChange = (range, oldRange) => {
|
|
223
|
-
const quill = this.wysiwyg();
|
|
224
|
-
if (!quill || this.disabled)
|
|
225
|
-
return;
|
|
226
|
-
if (range && !oldRange) {
|
|
227
|
-
this.emitOnFocusEvent();
|
|
228
|
-
}
|
|
229
|
-
else if (!range && oldRange) {
|
|
230
|
-
this.emitOnBlurEvent();
|
|
231
|
-
}
|
|
232
|
-
if (!range)
|
|
233
|
-
return;
|
|
234
|
-
const format = quill.getFormat(range);
|
|
235
|
-
this.wysiwygService.selectedColor.set(format['color'] || '');
|
|
236
|
-
this.wysiwygService.selectedBackgroundColor.set(format['background'] || '');
|
|
237
|
-
};
|
|
238
|
-
this.onTooltipTrigger = (event) => {
|
|
239
|
-
if (event) {
|
|
240
|
-
const target = event.target;
|
|
241
|
-
if (!(target instanceof Element) || !target.closest('.ql-video, .ql-link, .ql-image'))
|
|
242
|
-
return;
|
|
243
|
-
}
|
|
244
|
-
requestAnimationFrame(() => {
|
|
245
|
-
this.clampTooltip();
|
|
246
|
-
requestAnimationFrame(() => this.clampTooltip());
|
|
247
|
-
});
|
|
248
|
-
};
|
|
249
289
|
}
|
|
250
290
|
#init;
|
|
251
|
-
#placeholder;
|
|
252
291
|
/**
|
|
253
292
|
* Focuses the component.
|
|
254
293
|
*
|
|
255
294
|
* @returns void - No return value. The component gains focus.
|
|
256
295
|
*/
|
|
257
296
|
focus() {
|
|
258
|
-
this.wysiwyg
|
|
297
|
+
this.wysiwyg.focus();
|
|
259
298
|
}
|
|
260
299
|
/**
|
|
261
300
|
* Removes focus from the component.
|
|
@@ -263,7 +302,7 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
|
|
|
263
302
|
* @returns void - No return value. The component loses focus.
|
|
264
303
|
*/
|
|
265
304
|
blur() {
|
|
266
|
-
this.wysiwyg
|
|
305
|
+
this.wysiwyg.blur();
|
|
267
306
|
}
|
|
268
307
|
/**
|
|
269
308
|
* Replaces the editor document. External value updates go through the form binding;
|
|
@@ -277,65 +316,42 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
|
|
|
277
316
|
this.syncEditorFromValue(value);
|
|
278
317
|
}
|
|
279
318
|
async initEditor() {
|
|
280
|
-
if (!isPlatformBrowser(this.platformId))
|
|
319
|
+
if (!isPlatformBrowser(this.platformId)) {
|
|
281
320
|
return;
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
const quillModule = await import('quill');
|
|
286
|
-
if (!this.alive)
|
|
287
|
-
return;
|
|
288
|
-
const QuillCtor = quillModule.default;
|
|
289
|
-
registerQuillIcons(QuillCtor);
|
|
290
|
-
const hljs = (await import('highlight.js')).default;
|
|
291
|
-
if (!this.alive)
|
|
321
|
+
}
|
|
322
|
+
const editorElement = this.view()?.editor()?.nativeElement;
|
|
323
|
+
if (!editorElement) {
|
|
292
324
|
return;
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
},
|
|
307
|
-
color: (value) => {
|
|
308
|
-
this.wysiwygService.selectedColor.set(value || '');
|
|
309
|
-
quill.format('color', value || false);
|
|
310
|
-
},
|
|
311
|
-
background: (value) => {
|
|
312
|
-
this.wysiwygService.selectedBackgroundColor.set(value || '');
|
|
313
|
-
quill.format('background', value || false);
|
|
314
|
-
},
|
|
315
|
-
},
|
|
316
|
-
}
|
|
317
|
-
: false,
|
|
318
|
-
history: {
|
|
319
|
-
delay: 500,
|
|
320
|
-
maxStack: 200,
|
|
321
|
-
userOnly: true,
|
|
322
|
-
},
|
|
325
|
+
}
|
|
326
|
+
void this.toolbar();
|
|
327
|
+
await this.wysiwyg.init(editorElement, {
|
|
328
|
+
content: this.value ?? '',
|
|
329
|
+
editable: !this.disabled && !this.readonly,
|
|
330
|
+
placeholder: this.placeHolder() ||
|
|
331
|
+
this.translation.translateSync(AX_WYSIWYG_I18N.placeholder, { waitForLoad: true }),
|
|
332
|
+
features: AX_DEFAULT_WYSIWYG_FEATURES,
|
|
333
|
+
onUpdate: () => {
|
|
334
|
+
if (this.disabled || this.readonly) {
|
|
335
|
+
return;
|
|
336
|
+
}
|
|
337
|
+
this.scheduleCommit();
|
|
323
338
|
},
|
|
324
|
-
|
|
339
|
+
onFocus: () => this.emitOnFocusEvent(),
|
|
340
|
+
onBlur: () => this.emitOnBlurEvent(),
|
|
325
341
|
});
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
this.disabledChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() =>
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
this.
|
|
335
|
-
this.
|
|
336
|
-
toolbarElement?.removeEventListener('click', this.onTooltipTrigger);
|
|
342
|
+
if (!this.alive) {
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
345
|
+
this.disabledChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
346
|
+
this.context.disabled.set(this.disabled);
|
|
347
|
+
this.syncEditable();
|
|
348
|
+
});
|
|
349
|
+
this.readonlyChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
|
|
350
|
+
this.context.readonly.set(this.readonly);
|
|
351
|
+
this.syncEditable();
|
|
337
352
|
});
|
|
338
|
-
this.
|
|
353
|
+
this.context.disabled.set(this.disabled);
|
|
354
|
+
this.context.readonly.set(this.readonly);
|
|
339
355
|
this.syncEditable();
|
|
340
356
|
this.syncEditorFromValue(this.value);
|
|
341
357
|
}
|
|
@@ -345,106 +361,41 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
|
|
|
345
361
|
}
|
|
346
362
|
this.changeHandlerTimer = setTimeout(() => {
|
|
347
363
|
this.changeHandlerTimer = null;
|
|
348
|
-
|
|
349
|
-
if (!quill || this.disabled || this.readonly)
|
|
364
|
+
if (this.disabled || this.readonly) {
|
|
350
365
|
return;
|
|
351
|
-
|
|
366
|
+
}
|
|
367
|
+
if (this.wysiwyg.isEmpty()) {
|
|
352
368
|
this.publishHtml(null);
|
|
353
369
|
return;
|
|
354
370
|
}
|
|
355
|
-
|
|
356
|
-
const converter = new QuillDeltaToHtmlConverter(delta, {
|
|
357
|
-
inlineStyles: true,
|
|
358
|
-
allowBackgroundClasses: true,
|
|
359
|
-
});
|
|
360
|
-
this.publishHtml(converter.convert());
|
|
371
|
+
this.publishHtml(this.wysiwyg.getHTML());
|
|
361
372
|
}, 300);
|
|
362
373
|
}
|
|
363
374
|
publishHtml(html) {
|
|
364
|
-
if (html === this.lastCommittedHtml)
|
|
375
|
+
if (html === this.lastCommittedHtml) {
|
|
365
376
|
return;
|
|
377
|
+
}
|
|
366
378
|
this.lastCommittedHtml = html;
|
|
367
379
|
this.commitValue(html, true);
|
|
368
380
|
}
|
|
369
381
|
syncEditorFromValue(value) {
|
|
370
|
-
|
|
371
|
-
if (!quill)
|
|
372
|
-
return;
|
|
373
|
-
const next = normalizeHtml(value);
|
|
374
|
-
if (next === this.lastCommittedHtml)
|
|
382
|
+
if (!this.wysiwyg.ready()) {
|
|
375
383
|
return;
|
|
376
|
-
this.applyingExternal = true;
|
|
377
|
-
this.lastCommittedHtml = next;
|
|
378
|
-
try {
|
|
379
|
-
if (!next) {
|
|
380
|
-
quill.setText('', 'api');
|
|
381
|
-
}
|
|
382
|
-
else {
|
|
383
|
-
const delta = quill.clipboard.convert({ html: next });
|
|
384
|
-
quill.setContents(delta, 'api');
|
|
385
|
-
}
|
|
386
384
|
}
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
watchTooltip(container, toolbarElement) {
|
|
392
|
-
const tooltip = container.querySelector('.ql-tooltip');
|
|
393
|
-
if (tooltip) {
|
|
394
|
-
this.tooltipObserver = new MutationObserver(() => this.onTooltipTrigger());
|
|
395
|
-
this.tooltipObserver.observe(tooltip, { attributes: true, attributeFilter: ['class'] });
|
|
396
|
-
}
|
|
397
|
-
toolbarElement?.addEventListener('click', this.onTooltipTrigger);
|
|
398
|
-
}
|
|
399
|
-
/**
|
|
400
|
-
* Quill anchors the link/video popover to the caret and lets it spill out of the
|
|
401
|
-
* editor. Keep it fully inside the writing area so it does not cover the toolbar
|
|
402
|
-
* or get clipped at the field edge.
|
|
403
|
-
*/
|
|
404
|
-
clampTooltip() {
|
|
405
|
-
const quill = this.wysiwyg();
|
|
406
|
-
const tooltip = quill?.container.querySelector('.ql-tooltip');
|
|
407
|
-
if (!quill || !tooltip || tooltip.classList.contains('ql-hidden'))
|
|
385
|
+
const next = normalizeWysiwygHtml(value);
|
|
386
|
+
if (next === this.lastCommittedHtml) {
|
|
408
387
|
return;
|
|
409
|
-
const pad = 8;
|
|
410
|
-
const containerRect = quill.container.getBoundingClientRect();
|
|
411
|
-
if (tooltip.getBoundingClientRect().width > containerRect.width - pad * 2) {
|
|
412
|
-
tooltip.style.maxWidth = `${Math.max(0, containerRect.width - pad * 2)}px`;
|
|
413
|
-
}
|
|
414
|
-
const tipRect = tooltip.getBoundingClientRect();
|
|
415
|
-
let left = tooltip.offsetLeft;
|
|
416
|
-
let top = tooltip.offsetTop;
|
|
417
|
-
if (tipRect.left < containerRect.left + pad) {
|
|
418
|
-
left += containerRect.left + pad - tipRect.left;
|
|
419
|
-
}
|
|
420
|
-
else if (tipRect.right > containerRect.right - pad) {
|
|
421
|
-
left -= tipRect.right - (containerRect.right - pad);
|
|
422
388
|
}
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
top -= bottomOverflow;
|
|
426
|
-
}
|
|
427
|
-
const shiftedTop = tipRect.top - bottomOverflow;
|
|
428
|
-
if (shiftedTop < containerRect.top + pad) {
|
|
429
|
-
top += containerRect.top + pad - shiftedTop;
|
|
430
|
-
}
|
|
431
|
-
tooltip.style.left = `${left}px`;
|
|
432
|
-
tooltip.style.top = `${top}px`;
|
|
389
|
+
this.lastCommittedHtml = next;
|
|
390
|
+
this.wysiwyg.setContent(next, false);
|
|
433
391
|
}
|
|
434
392
|
syncEditable() {
|
|
435
|
-
|
|
436
|
-
if (!quill)
|
|
437
|
-
return;
|
|
438
|
-
if (this.disabled || this.readonly) {
|
|
439
|
-
quill.disable();
|
|
440
|
-
}
|
|
441
|
-
else {
|
|
442
|
-
quill.enable();
|
|
443
|
-
}
|
|
393
|
+
this.wysiwyg.setEditable(!this.disabled && !this.readonly);
|
|
444
394
|
}
|
|
445
395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
446
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXWysiwygContainerComponent, isStandalone: true, selector: "ax-wysiwyg-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, initialLine: { classPropertyName: "initialLine", publicName: "initialLine", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "style.--ax-comp-wysiwyg-initial-line": "initialLine() + \"\"", "attr.name": "name || null", "class.ax-disable": "disabled", "class.ax-readonly": "readonly && !disabled" } }, providers: [
|
|
447
|
-
|
|
396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: AXWysiwygContainerComponent, isStandalone: true, selector: "ax-wysiwyg-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, initialLine: { classPropertyName: "initialLine", publicName: "initialLine", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "style.--ax-comp-wysiwyg-initial-line": "initialLine() + \"\"", "attr.name": "name || null", "class.ax-disable": "disabled", "class.ax-readonly": "readonly && !disabled", "class.ax-wysiwyg-compact": "mode() === 'compact'" } }, providers: [
|
|
397
|
+
AXWysiwyg,
|
|
398
|
+
AXWysiwygContext,
|
|
448
399
|
{ provide: AXComponent, useExisting: AXWysiwygContainerComponent },
|
|
449
400
|
{ provide: AXFocusableComponent, useExisting: AXWysiwygContainerComponent },
|
|
450
401
|
{ provide: AXValuableComponent, useExisting: AXWysiwygContainerComponent },
|
|
@@ -453,7 +404,7 @@ class AXWysiwygContainerComponent extends classes((MXInputBaseValueComponent), M
|
|
|
453
404
|
useExisting: forwardRef(() => AXWysiwygContainerComponent),
|
|
454
405
|
multi: true,
|
|
455
406
|
},
|
|
456
|
-
], queries: [{ propertyName: "container", first: true, predicate: AXWysiwygViewComponent, descendants: true, isSignal: true }, { propertyName: "toolbar", first: true, predicate: AXWysiwygToolbarComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly && !disabled\"\n>\n <div class=\"ax-quill-container\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer quill,components;@layer quill{.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}}@layer quill{.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}}@layer components{ax-wysiwyg-container{display:block;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-container>.ax-editor-container{position:relative;display:block;height:auto;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 0);overflow:visible!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;--ax-comp-wysiwyg-editor-min-height: calc(var(--ax-comp-wysiwyg-initial-line, 3) * 1.42em + 1.5rem)}:is(ax-wysiwyg-container>.ax-editor-container.ax-state-disabled,ax-wysiwyg-container>.ax-editor-container.ax-state-readonly) ax-wysiwyg-toolbar{pointer-events:none;opacity:60%}ax-wysiwyg-container .ax-quill-container{display:flex;height:auto;flex-direction:column;overflow:visible}ax-wysiwyg-container ax-wysiwyg-view{position:relative;z-index:0;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-shrink:0;flex-grow:0;flex-basis:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height)}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-],ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]{float:none;display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);color:inherit;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-] ax-icon,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-] ax-icon,ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-] svg,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-] svg{pointer-events:none;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:focus-visible,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:focus-visible{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:focus-visible,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:focus-visible{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-].ql-active,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-].ql-active{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-].ql-active,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-].ql-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 15%,transparent)}}ax-wysiwyg-container .ql-container.ql-snow{border:0!important;height:auto;width:100%;max-width:100%;overflow:visible;min-height:var(--ax-comp-wysiwyg-editor-min-height)}ax-wysiwyg-container .ql-toolbar.ql-snow{border:0!important;font-family:inherit;padding:0}ax-wysiwyg-container ax-wysiwyg-view:not(:first-child),ax-wysiwyg-container ax-wysiwyg-toolbar:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-wysiwyg-container .ql-ui{background-color:transparent;color:rgba(var(--ax-sys-color-on-surface))}ax-wysiwyg-container .ql-snow .ql-editor .ql-code-block-container{margin-block:calc(var(--spacing, .25rem) * 2);max-width:100%;overflow-x:auto;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);background:#0d1117;color:#c9d1d9}ax-wysiwyg-container .ql-editor img,ax-wysiwyg-container .ql-editor video,ax-wysiwyg-container .ql-editor iframe{max-width:100%;height:auto}ax-wysiwyg-container .ql-editor .hljs-comment,ax-wysiwyg-container .ql-editor .hljs-quote{color:#8b949e}ax-wysiwyg-container .ql-editor .hljs-keyword,ax-wysiwyg-container .ql-editor .hljs-selector-tag,ax-wysiwyg-container .ql-editor .hljs-type{color:#ff7b72}ax-wysiwyg-container .ql-editor .hljs-string,ax-wysiwyg-container .ql-editor .hljs-attr,ax-wysiwyg-container .ql-editor .hljs-number,ax-wysiwyg-container .ql-editor .hljs-literal{color:#a5d6ff}ax-wysiwyg-container .ql-editor .hljs-title,ax-wysiwyg-container .ql-editor .hljs-section,ax-wysiwyg-container .ql-editor .hljs-built_in{color:#d2a8ff}ax-wysiwyg-container .ql-editor.ql-blank:before{color:rgba(var(--ax-sys-color-text-default));font-style:normal;inset-inline:.75rem}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-editor.ql-blank:before{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}ax-wysiwyg-container .ql-editor{text-align:start;--tw-outline-style: none;outline-style:none;overflow-wrap:break-word;height:auto;width:100%;max-width:100%;max-height:24rem;overflow-y:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height);color:inherit}ax-wysiwyg-container .ql-formats{position:relative;margin:calc(var(--spacing, .25rem) * 0);display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center;gap:calc(var(--spacing, .25rem) * .5);overflow:visible;min-width:max-content}ax-wysiwyg-container .ql-snow .ql-formats:after{content:none;display:none}ax-wysiwyg-container .ql-formats+.ql-formats:before{content:\"\";margin-inline:calc(var(--spacing, .25rem) * 1);height:calc(var(--spacing, .25rem) * 4);width:1px;flex-shrink:0;align-self:center;background:var(--color-border-surface)}ax-wysiwyg-container .ql-snow .ql-picker{float:none;height:auto;overflow:visible;color:inherit}ax-wysiwyg-container .ql-snow .ql-picker.ql-size{width:5.75rem}ax-wysiwyg-container .ql-snow .ql-picker.ql-header{width:7.5rem}ax-wysiwyg-container .ql-snow .ql-picker-label{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);max-width:100%;align-items:center;border-radius:var(--radius-md, .375rem);border:0!important;overflow:visible;white-space:nowrap;padding-inline-start:.5rem;padding-inline-end:1.35rem;color:inherit}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-label,ax-wysiwyg-container .ql-snow .ql-icon-picker .ql-picker-label{width:calc(var(--spacing, .25rem) * 8);justify-content:center;padding-inline:0}ax-wysiwyg-container .ql-snow .ql-picker-label:hover,ax-wysiwyg-container .ql-snow .ql-picker.ql-expanded .ql-picker-label{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface));border:0!important}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow .ql-picker-label:hover,ax-wysiwyg-container .ql-snow .ql-picker.ql-expanded .ql-picker-label{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-wysiwyg-container .ql-toolbar.ql-snow .ql-picker-options,ax-wysiwyg-container .ql-snow .ql-picker-options{z-index:50;overflow:visible;border:0!important;box-shadow:0 8px 24px #0000001f;background:var(--color-surface)!important;color:inherit;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item{display:block;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);border:0!important;float:none;width:auto;height:auto;color:inherit}ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item:hover,ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item.ql-selected{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item:hover,ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item.ql-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-wysiwyg-container .ql-snow .ql-icon-picker .ql-picker-options{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 1);width:auto;min-width:2rem}ax-wysiwyg-container .ql-snow .ql-icon-picker .ql-picker-item{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-sm, .25rem);border:0!important;float:none;padding:0}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-options{display:flex;flex-wrap:wrap;gap:3px;width:152px;padding:.5rem;white-space:normal}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-item{float:none;display:block;width:16px;height:16px;margin:0;padding:0;border:1px solid rgb(0 0 0 / .12)!important;border-radius:2px}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-item.ql-selected,ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#0000008c!important}ax-wysiwyg-container .ql-snow .ql-tooltip{z-index:30;max-width:calc(100% - 1rem);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);transform:none;border:0;box-shadow:0 8px 24px #0000001f;background:var(--color-surface);color:inherit}ax-wysiwyg-container .ql-snow .ql-tooltip input[type=text]{border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-outline-style: none;outline-style:none;border:1px solid var(--color-border-surface);background:var(--color-surface);color:inherit}ax-wysiwyg-container .ql-snow .ql-tooltip a.ql-action,ax-wysiwyg-container .ql-snow .ql-tooltip a.ql-remove,ax-wysiwyg-container .ql-snow .ql-tooltip a.ql-preview{color:rgba(var(--ax-sys-color-primary-surface))}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-swatch{pointer-events:none;position:absolute;z-index:1;margin:calc(var(--spacing, .25rem) * 0);display:block;left:50%;bottom:.1rem;width:.875rem;height:.3rem;transform:translate(-50%)}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-swatch .ax-indicator-color{height:100%;width:100%;border-radius:var(--radius-sm, .25rem);box-shadow:inset 0 0 0 1px #00000059,0 0 0 1px #ffffffd9}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-text-color .ax-indicator-color{background-color:currentColor}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-highlight-color .ax-indicator-color{background-color:currentColor}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-highlight-color .ax-indicator-color{background-color:color-mix(in srgb,currentColor 22%,transparent)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n/*!\n* Quill Editor v2.0.3\n* https://quilljs.com\n* Copyright (c) 2017-2024, Slab\n* Copyright (c) 2014, Jason Chen\n* Copyright (c) 2013, salesforce.com\n*/\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
407
|
+
], queries: [{ propertyName: "view", first: true, predicate: AXWysiwygViewComponent, descendants: true, isSignal: true }, { propertyName: "toolbar", first: true, predicate: AXWysiwygToolbarComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly && !disabled\"\n>\n <div class=\"ax-wysiwyg-editor-inner\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer components{ax-wysiwyg-container{display:block;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-container>.ax-editor-container{position:relative;display:block;height:auto;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 0);overflow:visible!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;--ax-comp-wysiwyg-editor-min-height: calc(var(--ax-comp-wysiwyg-initial-line, 3) * 1.42em + 1.5rem)}:is(ax-wysiwyg-container>.ax-editor-container.ax-state-disabled,ax-wysiwyg-container>.ax-editor-container.ax-state-readonly) ax-wysiwyg-toolbar{pointer-events:none;opacity:60%}ax-wysiwyg-container .ax-wysiwyg-editor-inner{display:flex;height:auto;flex-direction:column;overflow:visible}ax-wysiwyg-container ax-wysiwyg-view{position:relative;z-index:0;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-shrink:0;flex-grow:0;flex-basis:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height)}ax-wysiwyg-container ax-wysiwyg-view:not(:first-child),ax-wysiwyg-container ax-wysiwyg-toolbar:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-wysiwyg-container .ax-wysiwyg-editor-host,ax-wysiwyg-container .ax-wysiwyg-editor-host.tiptap,ax-wysiwyg-container .ax-wysiwyg-editor-host.ProseMirror,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror{text-align:start;--tw-outline-style: none;outline-style:none;overflow-wrap:break-word;height:auto;width:100%;max-width:100%;max-height:24rem;overflow-y:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height);padding:.75rem;color:inherit}ax-wysiwyg-container .ax-wysiwyg-editor-host p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror p.is-editor-empty:first-child:before{pointer-events:none;float:inline-start;height:calc(var(--spacing, .25rem) * 0);color:rgba(var(--ax-sys-color-text-default));content:attr(data-placeholder)}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ax-wysiwyg-editor-host p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror p.is-editor-empty:first-child:before{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}ax-wysiwyg-container .ax-wysiwyg-editor-host p,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap p,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror p{margin-block:calc(var(--spacing, .25rem) * 2)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h1,.tiptap h1,.ProseMirror h1){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h2,.tiptap h2,.ProseMirror h2){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h3,.tiptap h3,.ProseMirror h3){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h4,.tiptap h4,.ProseMirror h4){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h5,.tiptap h5,.ProseMirror h5){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h6,.tiptap h6,.ProseMirror h6){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ul,.tiptap ul,.ProseMirror ul),ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ol,.tiptap ol,.ProseMirror ol){margin-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:1.5rem;list-style-position:outside}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ul,.tiptap ul,.ProseMirror ul){list-style-type:disc}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ol,.tiptap ol,.ProseMirror ol){list-style-type:decimal}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(li,.tiptap li,.ProseMirror li){display:list-item}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(li>p,.tiptap li>p,.ProseMirror li>p){margin:0}ax-wysiwyg-container .ax-wysiwyg-editor-host blockquote,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap blockquote,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror blockquote{margin-block:calc(var(--spacing, .25rem) * 2);border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px;border-color:rgba(var(--ax-sys-color-border-surface));padding-inline-start:calc(var(--spacing, .25rem) * 4);font-style:italic}ax-wysiwyg-container .ax-wysiwyg-editor-host pre,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap pre,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror pre{margin-block:calc(var(--spacing, .25rem) * 2);max-width:100%;overflow-x:auto;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:#0d1117;color:#c9d1d9}ax-wysiwyg-container .ax-wysiwyg-editor-host code,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap code,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror code{border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 1);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:currentColor}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ax-wysiwyg-editor-host code,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap code,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror code{background:color-mix(in srgb,currentColor 8%,transparent)}}ax-wysiwyg-container .ax-wysiwyg-editor-host pre code,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap pre code,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror pre code{background:transparent;padding:0}ax-wysiwyg-container .ax-wysiwyg-editor-host a,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap a,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror a{color:rgba(var(--ax-sys-color-primary-surface));text-decoration-line:underline}ax-wysiwyg-container .ax-wysiwyg-editor-host img,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap img,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror img,ax-wysiwyg-container .ax-wysiwyg-editor-host iframe,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap iframe,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror iframe{max-width:100%;height:auto}ax-wysiwyg-container .ax-wysiwyg-editor-host [data-wysiwyg-video] iframe{aspect-ratio:16 / 9;width:100%;min-height:12rem}ax-wysiwyg-container ax-wysiwyg-toolbar .ax-wysiwyg-toolbar-tools{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1);padding:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-container ax-wysiwyg-toolbar .ax-wysiwyg-tool-group{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}ax-wysiwyg-container ax-wysiwyg-toolbar .ax-wysiwyg-tool-group+.ax-wysiwyg-tool-group:before{content:\"\";margin-inline:calc(var(--spacing, .25rem) * 1);height:calc(var(--spacing, .25rem) * 4);width:1px;flex-shrink:0;align-self:center;background:var(--color-border-surface)}ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected,ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected:hover{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected,ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 15%,transparent)}}ax-wysiwyg-container ax-wysiwyg-toolbar ax-wysiwyg-font-style .ax-wysiwyg-font-size-combo .ax-editor-container{min-height:var(--height-default);height:var(--height-default)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
457
408
|
}
|
|
458
409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygContainerComponent, decorators: [{
|
|
459
410
|
type: Component,
|
|
@@ -462,8 +413,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
462
413
|
'[attr.name]': 'name || null',
|
|
463
414
|
'[class.ax-disable]': 'disabled',
|
|
464
415
|
'[class.ax-readonly]': 'readonly && !disabled',
|
|
416
|
+
'[class.ax-wysiwyg-compact]': "mode() === 'compact'",
|
|
417
|
+
ngSkipHydration: 'true',
|
|
465
418
|
}, providers: [
|
|
466
|
-
|
|
419
|
+
AXWysiwyg,
|
|
420
|
+
AXWysiwygContext,
|
|
467
421
|
{ provide: AXComponent, useExisting: AXWysiwygContainerComponent },
|
|
468
422
|
{ provide: AXFocusableComponent, useExisting: AXWysiwygContainerComponent },
|
|
469
423
|
{ provide: AXValuableComponent, useExisting: AXWysiwygContainerComponent },
|
|
@@ -472,63 +426,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
472
426
|
useExisting: forwardRef(() => AXWysiwygContainerComponent),
|
|
473
427
|
multi: true,
|
|
474
428
|
},
|
|
475
|
-
], template: "<div\n class=\"ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly && !disabled\"\n>\n <div class=\"ax-quill-container\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer quill,components;@layer quill{.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}}@layer quill{.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}}@layer components{ax-wysiwyg-container{display:block;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-container>.ax-editor-container{position:relative;display:block;height:auto;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 0);overflow:visible!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;--ax-comp-wysiwyg-editor-min-height: calc(var(--ax-comp-wysiwyg-initial-line, 3) * 1.42em + 1.5rem)}:is(ax-wysiwyg-container>.ax-editor-container.ax-state-disabled,ax-wysiwyg-container>.ax-editor-container.ax-state-readonly) ax-wysiwyg-toolbar{pointer-events:none;opacity:60%}ax-wysiwyg-container .ax-quill-container{display:flex;height:auto;flex-direction:column;overflow:visible}ax-wysiwyg-container ax-wysiwyg-view{position:relative;z-index:0;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-shrink:0;flex-grow:0;flex-basis:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height)}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-],ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]{float:none;display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);color:inherit;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-] ax-icon,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-] ax-icon,ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-] svg,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-] svg{pointer-events:none;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: 1;line-height:1}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:focus-visible,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:focus-visible{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:hover,ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-]:focus-visible,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-]:focus-visible{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-].ql-active,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-].ql-active{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow.ql-toolbar button[class*=ql-].ql-active,ax-wysiwyg-container .ql-snow .ql-toolbar button[class*=ql-].ql-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 15%,transparent)}}ax-wysiwyg-container .ql-container.ql-snow{border:0!important;height:auto;width:100%;max-width:100%;overflow:visible;min-height:var(--ax-comp-wysiwyg-editor-min-height)}ax-wysiwyg-container .ql-toolbar.ql-snow{border:0!important;font-family:inherit;padding:0}ax-wysiwyg-container ax-wysiwyg-view:not(:first-child),ax-wysiwyg-container ax-wysiwyg-toolbar:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-wysiwyg-container .ql-ui{background-color:transparent;color:rgba(var(--ax-sys-color-on-surface))}ax-wysiwyg-container .ql-snow .ql-editor .ql-code-block-container{margin-block:calc(var(--spacing, .25rem) * 2);max-width:100%;overflow-x:auto;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);background:#0d1117;color:#c9d1d9}ax-wysiwyg-container .ql-editor img,ax-wysiwyg-container .ql-editor video,ax-wysiwyg-container .ql-editor iframe{max-width:100%;height:auto}ax-wysiwyg-container .ql-editor .hljs-comment,ax-wysiwyg-container .ql-editor .hljs-quote{color:#8b949e}ax-wysiwyg-container .ql-editor .hljs-keyword,ax-wysiwyg-container .ql-editor .hljs-selector-tag,ax-wysiwyg-container .ql-editor .hljs-type{color:#ff7b72}ax-wysiwyg-container .ql-editor .hljs-string,ax-wysiwyg-container .ql-editor .hljs-attr,ax-wysiwyg-container .ql-editor .hljs-number,ax-wysiwyg-container .ql-editor .hljs-literal{color:#a5d6ff}ax-wysiwyg-container .ql-editor .hljs-title,ax-wysiwyg-container .ql-editor .hljs-section,ax-wysiwyg-container .ql-editor .hljs-built_in{color:#d2a8ff}ax-wysiwyg-container .ql-editor.ql-blank:before{color:rgba(var(--ax-sys-color-text-default));font-style:normal;inset-inline:.75rem}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-editor.ql-blank:before{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}ax-wysiwyg-container .ql-editor{text-align:start;--tw-outline-style: none;outline-style:none;overflow-wrap:break-word;height:auto;width:100%;max-width:100%;max-height:24rem;overflow-y:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height);color:inherit}ax-wysiwyg-container .ql-formats{position:relative;margin:calc(var(--spacing, .25rem) * 0);display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center;gap:calc(var(--spacing, .25rem) * .5);overflow:visible;min-width:max-content}ax-wysiwyg-container .ql-snow .ql-formats:after{content:none;display:none}ax-wysiwyg-container .ql-formats+.ql-formats:before{content:\"\";margin-inline:calc(var(--spacing, .25rem) * 1);height:calc(var(--spacing, .25rem) * 4);width:1px;flex-shrink:0;align-self:center;background:var(--color-border-surface)}ax-wysiwyg-container .ql-snow .ql-picker{float:none;height:auto;overflow:visible;color:inherit}ax-wysiwyg-container .ql-snow .ql-picker.ql-size{width:5.75rem}ax-wysiwyg-container .ql-snow .ql-picker.ql-header{width:7.5rem}ax-wysiwyg-container .ql-snow .ql-picker-label{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);max-width:100%;align-items:center;border-radius:var(--radius-md, .375rem);border:0!important;overflow:visible;white-space:nowrap;padding-inline-start:.5rem;padding-inline-end:1.35rem;color:inherit}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-label,ax-wysiwyg-container .ql-snow .ql-icon-picker .ql-picker-label{width:calc(var(--spacing, .25rem) * 8);justify-content:center;padding-inline:0}ax-wysiwyg-container .ql-snow .ql-picker-label:hover,ax-wysiwyg-container .ql-snow .ql-picker.ql-expanded .ql-picker-label{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface));border:0!important}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow .ql-picker-label:hover,ax-wysiwyg-container .ql-snow .ql-picker.ql-expanded .ql-picker-label{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-wysiwyg-container .ql-toolbar.ql-snow .ql-picker-options,ax-wysiwyg-container .ql-snow .ql-picker-options{z-index:50;overflow:visible;border:0!important;box-shadow:0 8px 24px #0000001f;background:var(--color-surface)!important;color:inherit;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item{display:block;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);border:0!important;float:none;width:auto;height:auto;color:inherit}ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item:hover,ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item.ql-selected{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item:hover,ax-wysiwyg-container .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-item.ql-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}ax-wysiwyg-container .ql-snow .ql-icon-picker .ql-picker-options{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 1);width:auto;min-width:2rem}ax-wysiwyg-container .ql-snow .ql-icon-picker .ql-picker-item{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;border-radius:var(--radius-sm, .25rem);border:0!important;float:none;padding:0}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-options{display:flex;flex-wrap:wrap;gap:3px;width:152px;padding:.5rem;white-space:normal}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-item{float:none;display:block;width:16px;height:16px;margin:0;padding:0;border:1px solid rgb(0 0 0 / .12)!important;border-radius:2px}ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-item.ql-selected,ax-wysiwyg-container .ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#0000008c!important}ax-wysiwyg-container .ql-snow .ql-tooltip{z-index:30;max-width:calc(100% - 1rem);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);transform:none;border:0;box-shadow:0 8px 24px #0000001f;background:var(--color-surface);color:inherit}ax-wysiwyg-container .ql-snow .ql-tooltip input[type=text]{border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-outline-style: none;outline-style:none;border:1px solid var(--color-border-surface);background:var(--color-surface);color:inherit}ax-wysiwyg-container .ql-snow .ql-tooltip a.ql-action,ax-wysiwyg-container .ql-snow .ql-tooltip a.ql-remove,ax-wysiwyg-container .ql-snow .ql-tooltip a.ql-preview{color:rgba(var(--ax-sys-color-primary-surface))}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-swatch{pointer-events:none;position:absolute;z-index:1;margin:calc(var(--spacing, .25rem) * 0);display:block;left:50%;bottom:.1rem;width:.875rem;height:.3rem;transform:translate(-50%)}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-swatch .ax-indicator-color{height:100%;width:100%;border-radius:var(--radius-sm, .25rem);box-shadow:inset 0 0 0 1px #00000059,0 0 0 1px #ffffffd9}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-text-color .ax-indicator-color{background-color:currentColor}ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-highlight-color .ax-indicator-color{background-color:currentColor}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container ax-wysiwyg-colors .ax-wysiwyg-highlight-color .ax-indicator-color{background-color:color-mix(in srgb,currentColor 22%,transparent)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n/*!\n* Quill Editor v2.0.3\n* https://quilljs.com\n* Copyright (c) 2017-2024, Slab\n* Copyright (c) 2014, Jason Chen\n* Copyright (c) 2013, salesforce.com\n*/\n"] }]
|
|
476
|
-
}], propDecorators: { placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], initialLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLine", required: false }] }],
|
|
477
|
-
function
|
|
478
|
-
if (value == null)
|
|
429
|
+
], template: "<div\n class=\"ax-editor-container ax-default {{ look }}\"\n [class.ax-state-disabled]=\"disabled\"\n [class.ax-state-readonly]=\"readonly && !disabled\"\n>\n <div class=\"ax-wysiwyg-editor-inner\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"ax-validation-rule\"> </ng-content>\n</div>\n<div class=\"ax-error-container\"></div>\n", styles: ["@layer properties;@layer components{ax-wysiwyg-container{display:block;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow:visible}ax-wysiwyg-container>.ax-editor-container{position:relative;display:block;height:auto;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 0);overflow:visible!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0;--ax-comp-wysiwyg-editor-min-height: calc(var(--ax-comp-wysiwyg-initial-line, 3) * 1.42em + 1.5rem)}:is(ax-wysiwyg-container>.ax-editor-container.ax-state-disabled,ax-wysiwyg-container>.ax-editor-container.ax-state-readonly) ax-wysiwyg-toolbar{pointer-events:none;opacity:60%}ax-wysiwyg-container .ax-wysiwyg-editor-inner{display:flex;height:auto;flex-direction:column;overflow:visible}ax-wysiwyg-container ax-wysiwyg-view{position:relative;z-index:0;height:auto;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-shrink:0;flex-grow:0;flex-basis:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height)}ax-wysiwyg-container ax-wysiwyg-view:not(:first-child),ax-wysiwyg-container ax-wysiwyg-toolbar:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-surface))}ax-wysiwyg-container .ax-wysiwyg-editor-host,ax-wysiwyg-container .ax-wysiwyg-editor-host.tiptap,ax-wysiwyg-container .ax-wysiwyg-editor-host.ProseMirror,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror{text-align:start;--tw-outline-style: none;outline-style:none;overflow-wrap:break-word;height:auto;width:100%;max-width:100%;max-height:24rem;overflow-y:auto;min-height:var(--ax-comp-wysiwyg-editor-min-height);padding:.75rem;color:inherit}ax-wysiwyg-container .ax-wysiwyg-editor-host p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror p.is-editor-empty:first-child:before{pointer-events:none;float:inline-start;height:calc(var(--spacing, .25rem) * 0);color:rgba(var(--ax-sys-color-text-default));content:attr(data-placeholder)}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ax-wysiwyg-editor-host p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap p.is-editor-empty:first-child:before,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror p.is-editor-empty:first-child:before{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}ax-wysiwyg-container .ax-wysiwyg-editor-host p,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap p,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror p{margin-block:calc(var(--spacing, .25rem) * 2)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h1,.tiptap h1,.ProseMirror h1){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h2,.tiptap h2,.ProseMirror h2){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h3,.tiptap h3,.ProseMirror h3){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h4,.tiptap h4,.ProseMirror h4){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h5,.tiptap h5,.ProseMirror h5){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(h6,.tiptap h6,.ProseMirror h6){margin-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ul,.tiptap ul,.ProseMirror ul),ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ol,.tiptap ol,.ProseMirror ol){margin-block:calc(var(--spacing, .25rem) * 2);padding-inline-start:1.5rem;list-style-position:outside}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ul,.tiptap ul,.ProseMirror ul){list-style-type:disc}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(ol,.tiptap ol,.ProseMirror ol){list-style-type:decimal}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(li,.tiptap li,.ProseMirror li){display:list-item}ax-wysiwyg-container .ax-wysiwyg-editor-host :is(li>p,.tiptap li>p,.ProseMirror li>p){margin:0}ax-wysiwyg-container .ax-wysiwyg-editor-host blockquote,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap blockquote,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror blockquote{margin-block:calc(var(--spacing, .25rem) * 2);border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px;border-color:rgba(var(--ax-sys-color-border-surface));padding-inline-start:calc(var(--spacing, .25rem) * 4);font-style:italic}ax-wysiwyg-container .ax-wysiwyg-editor-host pre,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap pre,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror pre{margin-block:calc(var(--spacing, .25rem) * 2);max-width:100%;overflow-x:auto;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:#0d1117;color:#c9d1d9}ax-wysiwyg-container .ax-wysiwyg-editor-host code,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap code,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror code{border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 1);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:currentColor}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container .ax-wysiwyg-editor-host code,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap code,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror code{background:color-mix(in srgb,currentColor 8%,transparent)}}ax-wysiwyg-container .ax-wysiwyg-editor-host pre code,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap pre code,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror pre code{background:transparent;padding:0}ax-wysiwyg-container .ax-wysiwyg-editor-host a,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap a,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror a{color:rgba(var(--ax-sys-color-primary-surface));text-decoration-line:underline}ax-wysiwyg-container .ax-wysiwyg-editor-host img,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap img,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror img,ax-wysiwyg-container .ax-wysiwyg-editor-host iframe,ax-wysiwyg-container .ax-wysiwyg-editor-host .tiptap iframe,ax-wysiwyg-container .ax-wysiwyg-editor-host .ProseMirror iframe{max-width:100%;height:auto}ax-wysiwyg-container .ax-wysiwyg-editor-host [data-wysiwyg-video] iframe{aspect-ratio:16 / 9;width:100%;min-height:12rem}ax-wysiwyg-container ax-wysiwyg-toolbar .ax-wysiwyg-toolbar-tools{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1);padding:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-container ax-wysiwyg-toolbar .ax-wysiwyg-tool-group{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}ax-wysiwyg-container ax-wysiwyg-toolbar .ax-wysiwyg-tool-group+.ax-wysiwyg-tool-group:before{content:\"\";margin-inline:calc(var(--spacing, .25rem) * 1);height:calc(var(--spacing, .25rem) * 4);width:1px;flex-shrink:0;align-self:center;background:var(--color-border-surface)}ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected,ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected:hover{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected,ax-wysiwyg-container ax-wysiwyg-toolbar ax-button.ax-button-icon>button.ax-state-selected:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 15%,transparent)}}ax-wysiwyg-container ax-wysiwyg-toolbar ax-wysiwyg-font-style .ax-wysiwyg-font-size-combo .ax-editor-container{min-height:var(--height-default);height:var(--height-default)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
430
|
+
}], propDecorators: { placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], initialLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialLine", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXWysiwygViewComponent), { isSignal: true }] }], toolbar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXWysiwygToolbarComponent), { isSignal: true }] }] } });
|
|
431
|
+
function normalizeWysiwygHtml(value) {
|
|
432
|
+
if (value == null) {
|
|
479
433
|
return null;
|
|
434
|
+
}
|
|
480
435
|
const trimmed = value.trim();
|
|
481
|
-
if (!trimmed || trimmed === '<p
|
|
436
|
+
if (!trimmed || trimmed === '<p></p>' || trimmed === '<p><br></p>') {
|
|
482
437
|
return null;
|
|
438
|
+
}
|
|
483
439
|
return value;
|
|
484
440
|
}
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
icons['underline'] = icon('under-line');
|
|
493
|
-
icons['strike'] = icon('strike');
|
|
494
|
-
icons['code-block'] = icon('code');
|
|
495
|
-
icons['color'] = icon('color-palette');
|
|
496
|
-
icons['background'] = icon('highlight');
|
|
497
|
-
icons['image'] = icon('image');
|
|
498
|
-
icons['link'] = icon('link');
|
|
499
|
-
icons['video'] = icon('play');
|
|
500
|
-
icons['undo'] = icon('undo');
|
|
501
|
-
icons['redo'] = icon('redo');
|
|
502
|
-
const list = (icons['list'] ?? {});
|
|
503
|
-
list['ordered'] = icon('order-list');
|
|
504
|
-
list['bullet'] = icon('un-order-list');
|
|
505
|
-
icons['list'] = list;
|
|
506
|
-
const direction = (icons['direction'] ?? {});
|
|
507
|
-
direction[''] = icon('align-left');
|
|
508
|
-
direction['rtl'] =
|
|
509
|
-
'<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M20 7H9v2h11V7zm0 4H4v2h16v-2zm0 4h-9v2h9v-2zM3.5 16.5 7 13v7z"/></svg>';
|
|
510
|
-
icons['direction'] = direction;
|
|
511
|
-
const align = (icons['align'] ?? {});
|
|
512
|
-
align[''] = icon('align-left');
|
|
513
|
-
align['center'] = icon('align-center');
|
|
514
|
-
align['justify'] = icon('align-justify');
|
|
515
|
-
align['right'] = icon('align-right');
|
|
516
|
-
icons['align'] = align;
|
|
517
|
-
quillIconsRegistered = true;
|
|
441
|
+
|
|
442
|
+
function resolveAXWysiwygButton(key, defaults, config) {
|
|
443
|
+
const entry = config?.[key];
|
|
444
|
+
if (entry === false) {
|
|
445
|
+
return null;
|
|
446
|
+
}
|
|
447
|
+
return { ...defaults, ...entry };
|
|
518
448
|
}
|
|
519
449
|
|
|
520
450
|
/**
|
|
521
|
-
*
|
|
451
|
+
* Text alignment controls for the WYSIWYG toolbar.
|
|
522
452
|
* @category Components
|
|
523
453
|
*/
|
|
524
454
|
class AXWysiwygAlignmentComponent {
|
|
455
|
+
constructor() {
|
|
456
|
+
this.buttons = input(/* @ts-ignore */
|
|
457
|
+
...(ngDevMode ? [undefined, { debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
458
|
+
this.wysiwyg = inject(AXWysiwyg);
|
|
459
|
+
this.context = inject(AXWysiwygContext);
|
|
460
|
+
this.state = this.wysiwyg.state;
|
|
461
|
+
this.i18n = AX_WYSIWYG_I18N;
|
|
462
|
+
this.alignButtons = computed(() => {
|
|
463
|
+
const icons = {
|
|
464
|
+
left: 'ax-icon-align-left',
|
|
465
|
+
center: 'ax-icon-align-center',
|
|
466
|
+
right: 'ax-icon-align-right',
|
|
467
|
+
justify: 'ax-icon-align-justify',
|
|
468
|
+
};
|
|
469
|
+
const tooltips = {
|
|
470
|
+
left: AX_WYSIWYG_I18N.tools.alignLeft,
|
|
471
|
+
center: AX_WYSIWYG_I18N.tools.alignCenter,
|
|
472
|
+
right: AX_WYSIWYG_I18N.tools.alignRight,
|
|
473
|
+
justify: AX_WYSIWYG_I18N.tools.alignJustify,
|
|
474
|
+
};
|
|
475
|
+
return ['left', 'center', 'right', 'justify']
|
|
476
|
+
.map((align) => {
|
|
477
|
+
const resolved = resolveAXWysiwygButton(align, { icon: icons[align], tooltip: tooltips[align] }, this.buttons());
|
|
478
|
+
return resolved ? { align, config: resolved } : null;
|
|
479
|
+
})
|
|
480
|
+
.filter((item) => item != null);
|
|
481
|
+
}, /* @ts-ignore */
|
|
482
|
+
...(ngDevMode ? [{ debugName: "alignButtons" }] : /* istanbul ignore next */ []));
|
|
483
|
+
this.activeAlignIcon = computed(() => {
|
|
484
|
+
const current = this.state().textAlign ?? 'left';
|
|
485
|
+
return this.alignButtons().find((item) => item.align === current)?.config.icon ?? 'ax-icon-align-left';
|
|
486
|
+
}, /* @ts-ignore */
|
|
487
|
+
...(ngDevMode ? [{ debugName: "activeAlignIcon" }] : /* istanbul ignore next */ []));
|
|
488
|
+
}
|
|
489
|
+
isAlignActive(align) {
|
|
490
|
+
const current = this.state().textAlign;
|
|
491
|
+
if (align === 'left') {
|
|
492
|
+
return current === 'left' || current === null;
|
|
493
|
+
}
|
|
494
|
+
return current === align;
|
|
495
|
+
}
|
|
525
496
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygAlignmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
497
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXWysiwygAlignmentComponent, isStandalone: true, selector: "ax-wysiwyg-alignment", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXWysiwygAlignmentComponent }], ngImport: i0, template: "@if (context.compact()) {\n <div class=\"ax-wysiwyg-tool-group ax-wysiwyg-align-menu-group\">\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"i18n.menu.align | translate | async\"\n [attr.aria-label]=\"i18n.menu.align | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ activeAlignIcon() }}\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list class=\"ax-wysiwyg-align-menu\">\n <ax-title>{{ i18n.menu.align | translate | async }}</ax-title>\n @for (item of alignButtons(); track item.align) {\n <ax-button-item\n [text]=\"item.config.tooltip!\"\n [selected]=\"isAlignActive(item.align)\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.setTextAlign(item.align)\"\n >\n <ax-prefix>\n <ax-icon class=\"ax-icon {{ item.config.icon }}\"></ax-icon>\n </ax-prefix>\n @if (isAlignActive(item.align)) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n} @else {\n <div class=\"ax-wysiwyg-tool-group\">\n @for (item of alignButtons(); track item.align) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"isAlignActive(item.align)\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"item.config.tooltip | translate | async\"\n (onClick)=\"wysiwyg.setTextAlign(item.align)\"\n >\n <ax-icon class=\"ax-icon {{ item.config.icon }}\"></ax-icon>\n </ax-button>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-wysiwyg-alignment .ax-wysiwyg-align-menu-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center}ax-wysiwyg-alignment .ax-wysiwyg-align-menu{min-width:calc(var(--spacing, .25rem) * 44);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-alignment .ax-wysiwyg-align-menu ax-title{padding-inline:calc(var(--spacing, .25rem) * 3.5);padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:60%}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
527
498
|
}
|
|
528
499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygAlignmentComponent, decorators: [{
|
|
529
500
|
type: Component,
|
|
530
|
-
args: [{ selector: 'ax-wysiwyg-alignment', encapsulation: ViewEncapsulation.None,
|
|
531
|
-
|
|
501
|
+
args: [{ selector: 'ax-wysiwyg-alignment', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
502
|
+
AsyncPipe,
|
|
503
|
+
AXButtonComponent,
|
|
504
|
+
AXButtonItemComponent,
|
|
505
|
+
AXButtonItemListComponent,
|
|
506
|
+
AXDecoratorGenericComponent,
|
|
507
|
+
AXDecoratorIconComponent,
|
|
508
|
+
AXDropdownPanelComponent,
|
|
509
|
+
AXTranslatorPipe,
|
|
510
|
+
], providers: [{ provide: AXComponent, useExisting: AXWysiwygAlignmentComponent }], template: "@if (context.compact()) {\n <div class=\"ax-wysiwyg-tool-group ax-wysiwyg-align-menu-group\">\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"i18n.menu.align | translate | async\"\n [attr.aria-label]=\"i18n.menu.align | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ activeAlignIcon() }}\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list class=\"ax-wysiwyg-align-menu\">\n <ax-title>{{ i18n.menu.align | translate | async }}</ax-title>\n @for (item of alignButtons(); track item.align) {\n <ax-button-item\n [text]=\"item.config.tooltip!\"\n [selected]=\"isAlignActive(item.align)\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.setTextAlign(item.align)\"\n >\n <ax-prefix>\n <ax-icon class=\"ax-icon {{ item.config.icon }}\"></ax-icon>\n </ax-prefix>\n @if (isAlignActive(item.align)) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n} @else {\n <div class=\"ax-wysiwyg-tool-group\">\n @for (item of alignButtons(); track item.align) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"isAlignActive(item.align)\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"item.config.tooltip | translate | async\"\n (onClick)=\"wysiwyg.setTextAlign(item.align)\"\n >\n <ax-icon class=\"ax-icon {{ item.config.icon }}\"></ax-icon>\n </ax-button>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-wysiwyg-alignment .ax-wysiwyg-align-menu-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center}ax-wysiwyg-alignment .ax-wysiwyg-align-menu{min-width:calc(var(--spacing, .25rem) * 44);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-alignment .ax-wysiwyg-align-menu ax-title{padding-inline:calc(var(--spacing, .25rem) * 3.5);padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:60%}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
511
|
+
}], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }] } });
|
|
532
512
|
|
|
533
513
|
/**
|
|
534
514
|
* Text and highlight color controls for the WYSIWYG toolbar.
|
|
@@ -536,67 +516,308 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
536
516
|
*/
|
|
537
517
|
class AXWysiwygColorsComponent {
|
|
538
518
|
constructor() {
|
|
539
|
-
this.
|
|
519
|
+
this.buttons = input(/* @ts-ignore */
|
|
520
|
+
...(ngDevMode ? [undefined, { debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
521
|
+
this.clearLabel = '@acorex:common.general.clear';
|
|
522
|
+
this.wysiwyg = inject(AXWysiwyg);
|
|
523
|
+
this.context = inject(AXWysiwygContext);
|
|
524
|
+
this.state = this.wysiwyg.state;
|
|
525
|
+
this.textColorButton = computed(() => resolveAXWysiwygButton('textColor', { icon: 'ax-icon-color-palette', tooltip: AX_WYSIWYG_I18N.tools.textColor }, this.buttons()), /* @ts-ignore */
|
|
526
|
+
...(ngDevMode ? [{ debugName: "textColorButton" }] : /* istanbul ignore next */ []));
|
|
527
|
+
this.highlightButton = computed(() => resolveAXWysiwygButton('highlight', { icon: 'ax-icon-highlight', tooltip: AX_WYSIWYG_I18N.tools.highlight }, this.buttons()), /* @ts-ignore */
|
|
528
|
+
...(ngDevMode ? [{ debugName: "highlightButton" }] : /* istanbul ignore next */ []));
|
|
529
|
+
this.draftTextColor = signal('#111827', /* @ts-ignore */
|
|
530
|
+
...(ngDevMode ? [{ debugName: "draftTextColor" }] : /* istanbul ignore next */ []));
|
|
531
|
+
this.draftHighlightColor = signal('#fef08a', /* @ts-ignore */
|
|
532
|
+
...(ngDevMode ? [{ debugName: "draftHighlightColor" }] : /* istanbul ignore next */ []));
|
|
540
533
|
}
|
|
541
534
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygColorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXWysiwygColorsComponent, isStandalone: true, selector: "ax-wysiwyg-colors", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXWysiwygColorsComponent }], ngImport: i0, template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (textColorButton(); as btn) {\n <div class=\"ax-wysiwyg-color-control\">\n <ax-button\n class=\"ax-sm\"\n #textColorTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"!!state().textColor\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n <ax-color-indicator\n class=\"ax-wysiwyg-swatch ax-wysiwyg-text-swatch\"\n [previewColor]=\"state().textColor || 'currentColor'\"\n ></ax-color-indicator>\n </ax-button>\n <ax-popover [target]=\"textColorTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-color-panel ax-md\">\n <ax-color-palette\n [ngModel]=\"draftTextColor()\"\n (ngModelChange)=\"draftTextColor.set($event); wysiwyg.setColor($event)\"\n >\n <ax-color-palette-picker></ax-color-palette-picker>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n </ax-color-palette>\n <ax-button\n look=\"flat\"\n [text]=\"clearLabel\"\n [disabled]=\"!state().textColor\"\n (onClick)=\"wysiwyg.unsetColor()\"\n ></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n\n @if (highlightButton(); as btn) {\n <div class=\"ax-wysiwyg-color-control\">\n <ax-button\n class=\"ax-sm\"\n #highlightTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"!!state().highlightColor\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n <ax-color-indicator\n class=\"ax-wysiwyg-swatch ax-wysiwyg-highlight-swatch\"\n [previewColor]=\"state().highlightColor || '#fef08a'\"\n ></ax-color-indicator>\n </ax-button>\n <ax-popover [target]=\"highlightTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-color-panel ax-md\">\n <ax-color-palette\n [ngModel]=\"draftHighlightColor()\"\n (ngModelChange)=\"draftHighlightColor.set($event); wysiwyg.setHighlight($event)\"\n >\n <ax-color-palette-picker></ax-color-palette-picker>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n </ax-color-palette>\n <ax-button\n look=\"flat\"\n [text]=\"clearLabel\"\n [disabled]=\"!state().highlightColor\"\n (onClick)=\"wysiwyg.unsetHighlight()\"\n ></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n</div>\n", styles: ["@layer components{ax-wysiwyg-colors .ax-wysiwyg-color-control{position:relative;display:inline-flex}ax-wysiwyg-colors .ax-wysiwyg-swatch{pointer-events:none;position:absolute;z-index:1;display:block;left:50%;bottom:.1rem;width:.875rem;height:.3rem;transform:translate(-50%)}ax-wysiwyg-colors .ax-wysiwyg-swatch .ax-indicator-color{height:100%;width:100%;border-radius:var(--radius-sm, .25rem);box-shadow:inset 0 0 0 1px #00000059,0 0 0 1px #ffffffd9}ax-wysiwyg-colors .ax-wysiwyg-text-swatch .ax-indicator-color{background-color:currentColor}ax-wysiwyg-colors .ax-wysiwyg-highlight-swatch .ax-indicator-color{background-color:currentColor}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-colors .ax-wysiwyg-highlight-swatch .ax-indicator-color{background-color:color-mix(in srgb,currentColor 22%,transparent)}}ax-wysiwyg-colors .ax-wysiwyg-color-panel{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDecoratorColorIndicatorComponent, selector: "ax-color-indicator", inputs: ["previewColor"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXColorPaletteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
543
536
|
}
|
|
544
537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygColorsComponent, decorators: [{
|
|
545
538
|
type: Component,
|
|
546
|
-
args: [{ selector: 'ax-wysiwyg-colors', encapsulation: ViewEncapsulation.None,
|
|
547
|
-
|
|
539
|
+
args: [{ selector: 'ax-wysiwyg-colors', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
540
|
+
AsyncPipe,
|
|
541
|
+
FormsModule,
|
|
542
|
+
AXButtonComponent,
|
|
543
|
+
AXDecoratorIconComponent,
|
|
544
|
+
AXDecoratorColorIndicatorComponent,
|
|
545
|
+
AXPopoverComponent,
|
|
546
|
+
AXColorPaletteComponent,
|
|
547
|
+
AXColorPalettePickerComponent,
|
|
548
|
+
AXColorPaletteSwatchesComponent,
|
|
549
|
+
AXColorPaletteInputComponent,
|
|
550
|
+
AXTranslatorPipe,
|
|
551
|
+
], providers: [{ provide: AXComponent, useExisting: AXWysiwygColorsComponent }], template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (textColorButton(); as btn) {\n <div class=\"ax-wysiwyg-color-control\">\n <ax-button\n class=\"ax-sm\"\n #textColorTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"!!state().textColor\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n <ax-color-indicator\n class=\"ax-wysiwyg-swatch ax-wysiwyg-text-swatch\"\n [previewColor]=\"state().textColor || 'currentColor'\"\n ></ax-color-indicator>\n </ax-button>\n <ax-popover [target]=\"textColorTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-color-panel ax-md\">\n <ax-color-palette\n [ngModel]=\"draftTextColor()\"\n (ngModelChange)=\"draftTextColor.set($event); wysiwyg.setColor($event)\"\n >\n <ax-color-palette-picker></ax-color-palette-picker>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n </ax-color-palette>\n <ax-button\n look=\"flat\"\n [text]=\"clearLabel\"\n [disabled]=\"!state().textColor\"\n (onClick)=\"wysiwyg.unsetColor()\"\n ></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n\n @if (highlightButton(); as btn) {\n <div class=\"ax-wysiwyg-color-control\">\n <ax-button\n class=\"ax-sm\"\n #highlightTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"!!state().highlightColor\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n <ax-color-indicator\n class=\"ax-wysiwyg-swatch ax-wysiwyg-highlight-swatch\"\n [previewColor]=\"state().highlightColor || '#fef08a'\"\n ></ax-color-indicator>\n </ax-button>\n <ax-popover [target]=\"highlightTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-color-panel ax-md\">\n <ax-color-palette\n [ngModel]=\"draftHighlightColor()\"\n (ngModelChange)=\"draftHighlightColor.set($event); wysiwyg.setHighlight($event)\"\n >\n <ax-color-palette-picker></ax-color-palette-picker>\n <ax-color-palette-swatches></ax-color-palette-swatches>\n <ax-color-palette-input></ax-color-palette-input>\n </ax-color-palette>\n <ax-button\n look=\"flat\"\n [text]=\"clearLabel\"\n [disabled]=\"!state().highlightColor\"\n (onClick)=\"wysiwyg.unsetHighlight()\"\n ></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n</div>\n", styles: ["@layer components{ax-wysiwyg-colors .ax-wysiwyg-color-control{position:relative;display:inline-flex}ax-wysiwyg-colors .ax-wysiwyg-swatch{pointer-events:none;position:absolute;z-index:1;display:block;left:50%;bottom:.1rem;width:.875rem;height:.3rem;transform:translate(-50%)}ax-wysiwyg-colors .ax-wysiwyg-swatch .ax-indicator-color{height:100%;width:100%;border-radius:var(--radius-sm, .25rem);box-shadow:inset 0 0 0 1px #00000059,0 0 0 1px #ffffffd9}ax-wysiwyg-colors .ax-wysiwyg-text-swatch .ax-indicator-color{background-color:currentColor}ax-wysiwyg-colors .ax-wysiwyg-highlight-swatch .ax-indicator-color{background-color:currentColor}@supports (color: color-mix(in lab,red,red)){ax-wysiwyg-colors .ax-wysiwyg-highlight-swatch .ax-indicator-color{background-color:color-mix(in srgb,currentColor 22%,transparent)}}ax-wysiwyg-colors .ax-wysiwyg-color-panel{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
552
|
+
}], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }] } });
|
|
548
553
|
|
|
554
|
+
const HEADING_MENU_KEYS = {
|
|
555
|
+
1: 'heading1',
|
|
556
|
+
2: 'heading2',
|
|
557
|
+
3: 'heading3',
|
|
558
|
+
4: 'heading4',
|
|
559
|
+
5: 'heading5',
|
|
560
|
+
6: 'heading6',
|
|
561
|
+
};
|
|
549
562
|
/**
|
|
550
563
|
* Font style, size, and heading controls for the WYSIWYG toolbar.
|
|
551
564
|
* @category Components
|
|
552
565
|
*/
|
|
553
566
|
class AXWysiwygFontStyleComponent {
|
|
567
|
+
constructor() {
|
|
568
|
+
this.headingLevels = input([1, 2, 3, 4, 5, 6], /* @ts-ignore */
|
|
569
|
+
...(ngDevMode ? [{ debugName: "headingLevels" }] : /* istanbul ignore next */ []));
|
|
570
|
+
this.buttons = input(/* @ts-ignore */
|
|
571
|
+
...(ngDevMode ? [undefined, { debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
572
|
+
this.menuItems = input(/* @ts-ignore */
|
|
573
|
+
...(ngDevMode ? [undefined, { debugName: "menuItems" }] : /* istanbul ignore next */ []));
|
|
574
|
+
this.wysiwyg = inject(AXWysiwyg);
|
|
575
|
+
this.context = inject(AXWysiwygContext);
|
|
576
|
+
this.state = this.wysiwyg.state;
|
|
577
|
+
this.i18n = AX_WYSIWYG_I18N;
|
|
578
|
+
this.insertPopover = viewChild('insertPopover', /* @ts-ignore */
|
|
579
|
+
...(ngDevMode ? [{ debugName: "insertPopover" }] : /* istanbul ignore next */ []));
|
|
580
|
+
this.insertUrl = signal('', /* @ts-ignore */
|
|
581
|
+
...(ngDevMode ? [{ debugName: "insertUrl" }] : /* istanbul ignore next */ []));
|
|
582
|
+
this.insertKind = signal(null, /* @ts-ignore */
|
|
583
|
+
...(ngDevMode ? [{ debugName: "insertKind" }] : /* istanbul ignore next */ []));
|
|
584
|
+
this.boldButton = computed(() => resolveAXWysiwygButton('bold', { icon: 'ax-icon-bold', tooltip: AX_WYSIWYG_I18N.tools.bold }, this.buttons()), /* @ts-ignore */
|
|
585
|
+
...(ngDevMode ? [{ debugName: "boldButton" }] : /* istanbul ignore next */ []));
|
|
586
|
+
this.italicButton = computed(() => resolveAXWysiwygButton('italic', { icon: 'ax-icon-italic', tooltip: AX_WYSIWYG_I18N.tools.italic }, this.buttons()), /* @ts-ignore */
|
|
587
|
+
...(ngDevMode ? [{ debugName: "italicButton" }] : /* istanbul ignore next */ []));
|
|
588
|
+
this.underlineButton = computed(() => resolveAXWysiwygButton('underline', { icon: 'ax-icon-under-line', tooltip: AX_WYSIWYG_I18N.tools.underline }, this.buttons()), /* @ts-ignore */
|
|
589
|
+
...(ngDevMode ? [{ debugName: "underlineButton" }] : /* istanbul ignore next */ []));
|
|
590
|
+
this.strikeButton = computed(() => resolveAXWysiwygButton('strike', { icon: 'ax-icon-strike', tooltip: AX_WYSIWYG_I18N.tools.strike }, this.buttons()), /* @ts-ignore */
|
|
591
|
+
...(ngDevMode ? [{ debugName: "strikeButton" }] : /* istanbul ignore next */ []));
|
|
592
|
+
this.codeButton = computed(() => resolveAXWysiwygButton('code', { icon: 'ax-icon-code', tooltip: AX_WYSIWYG_I18N.tools.code }, this.buttons()), /* @ts-ignore */
|
|
593
|
+
...(ngDevMode ? [{ debugName: "codeButton" }] : /* istanbul ignore next */ []));
|
|
594
|
+
this.codeBlockButton = computed(() => resolveAXWysiwygButton('codeBlock', { icon: 'ax-icon-code', tooltip: AX_WYSIWYG_I18N.tools.codeBlock }, this.buttons()), /* @ts-ignore */
|
|
595
|
+
...(ngDevMode ? [{ debugName: "codeBlockButton" }] : /* istanbul ignore next */ []));
|
|
596
|
+
this.paragraphMenuItem = computed(() => resolveAXWysiwygButton('paragraph', { text: AX_WYSIWYG_I18N.blocks.paragraph }, this.menuItems()), /* @ts-ignore */
|
|
597
|
+
...(ngDevMode ? [{ debugName: "paragraphMenuItem" }] : /* istanbul ignore next */ []));
|
|
598
|
+
this.blockquoteMenuItem = computed(() => resolveAXWysiwygButton('blockquote', { text: AX_WYSIWYG_I18N.blocks.blockquote }, this.menuItems()), /* @ts-ignore */
|
|
599
|
+
...(ngDevMode ? [{ debugName: "blockquoteMenuItem" }] : /* istanbul ignore next */ []));
|
|
600
|
+
this.codeBlockMenuItem = computed(() => resolveAXWysiwygButton('codeBlock', { text: AX_WYSIWYG_I18N.blocks.codeBlock }, this.menuItems()), /* @ts-ignore */
|
|
601
|
+
...(ngDevMode ? [{ debugName: "codeBlockMenuItem" }] : /* istanbul ignore next */ []));
|
|
602
|
+
this.bulletListMenuItem = computed(() => resolveAXWysiwygButton('bulletList', { text: AX_WYSIWYG_I18N.blocks.bulletList }, this.menuItems()), /* @ts-ignore */
|
|
603
|
+
...(ngDevMode ? [{ debugName: "bulletListMenuItem" }] : /* istanbul ignore next */ []));
|
|
604
|
+
this.orderedListMenuItem = computed(() => resolveAXWysiwygButton('orderedList', { text: AX_WYSIWYG_I18N.blocks.orderedList }, this.menuItems()), /* @ts-ignore */
|
|
605
|
+
...(ngDevMode ? [{ debugName: "orderedListMenuItem" }] : /* istanbul ignore next */ []));
|
|
606
|
+
this.imageMenuItem = computed(() => resolveAXWysiwygButton('image', { text: AX_WYSIWYG_I18N.blocks.image }, this.menuItems()), /* @ts-ignore */
|
|
607
|
+
...(ngDevMode ? [{ debugName: "imageMenuItem" }] : /* istanbul ignore next */ []));
|
|
608
|
+
this.videoMenuItem = computed(() => resolveAXWysiwygButton('video', { text: AX_WYSIWYG_I18N.blocks.video }, this.menuItems()), /* @ts-ignore */
|
|
609
|
+
...(ngDevMode ? [{ debugName: "videoMenuItem" }] : /* istanbul ignore next */ []));
|
|
610
|
+
this.headingButtons = computed(() => this.headingLevels().map((level) => ({
|
|
611
|
+
level,
|
|
612
|
+
label: `H${level}`,
|
|
613
|
+
menuKey: HEADING_MENU_KEYS[level],
|
|
614
|
+
config: resolveAXWysiwygButton(HEADING_MENU_KEYS[level], { text: AX_WYSIWYG_I18N.blocks.heading(level) }, this.menuItems()),
|
|
615
|
+
})), /* @ts-ignore */
|
|
616
|
+
...(ngDevMode ? [{ debugName: "headingButtons" }] : /* istanbul ignore next */ []));
|
|
617
|
+
this.fontSizeItems = computed(() => [
|
|
618
|
+
{ id: 'small', text: AX_WYSIWYG_I18N.fontSize.small, value: 'small' },
|
|
619
|
+
{ id: 'normal', text: AX_WYSIWYG_I18N.fontSize.normal, value: 'normal' },
|
|
620
|
+
{ id: 'large', text: AX_WYSIWYG_I18N.fontSize.large, value: 'large' },
|
|
621
|
+
{ id: 'huge', text: AX_WYSIWYG_I18N.fontSize.huge, value: 'huge' },
|
|
622
|
+
], /* @ts-ignore */
|
|
623
|
+
...(ngDevMode ? [{ debugName: "fontSizeItems" }] : /* istanbul ignore next */ []));
|
|
624
|
+
this.fontSizeComboValue = computed(() => this.state().fontSize ?? 'normal', /* @ts-ignore */
|
|
625
|
+
...(ngDevMode ? [{ debugName: "fontSizeComboValue" }] : /* istanbul ignore next */ []));
|
|
626
|
+
this.blockLabelSource = computed(() => {
|
|
627
|
+
const s = this.state();
|
|
628
|
+
if (s.orderedList) {
|
|
629
|
+
return this.orderedListMenuItem()?.text ?? AX_WYSIWYG_I18N.blocks.orderedList;
|
|
630
|
+
}
|
|
631
|
+
if (s.bulletList) {
|
|
632
|
+
return this.bulletListMenuItem()?.text ?? AX_WYSIWYG_I18N.blocks.bulletList;
|
|
633
|
+
}
|
|
634
|
+
if (s.blockquote) {
|
|
635
|
+
return this.blockquoteMenuItem()?.text ?? AX_WYSIWYG_I18N.blocks.blockquote;
|
|
636
|
+
}
|
|
637
|
+
if (s.codeBlock) {
|
|
638
|
+
return this.codeBlockMenuItem()?.text ?? AX_WYSIWYG_I18N.blocks.codeBlock;
|
|
639
|
+
}
|
|
640
|
+
if (s.headingLevel) {
|
|
641
|
+
const heading = this.headingButtons().find((h) => h.level === s.headingLevel);
|
|
642
|
+
return heading?.config?.text ?? AX_WYSIWYG_I18N.blocks.heading(s.headingLevel);
|
|
643
|
+
}
|
|
644
|
+
return this.paragraphMenuItem()?.text ?? AX_WYSIWYG_I18N.blocks.paragraph;
|
|
645
|
+
}, /* @ts-ignore */
|
|
646
|
+
...(ngDevMode ? [{ debugName: "blockLabelSource" }] : /* istanbul ignore next */ []));
|
|
647
|
+
this.blockLabel = toTranslatedSignal(this.blockLabelSource);
|
|
648
|
+
this.insertPlaceholderSource = computed(() => this.insertKind() === 'video' ? AX_WYSIWYG_I18N.insert.videoUrl : AX_WYSIWYG_I18N.insert.imageUrl, /* @ts-ignore */
|
|
649
|
+
...(ngDevMode ? [{ debugName: "insertPlaceholderSource" }] : /* istanbul ignore next */ []));
|
|
650
|
+
this.insertPlaceholder = toTranslatedSignal(this.insertPlaceholderSource);
|
|
651
|
+
}
|
|
652
|
+
isHeadingActive(level) {
|
|
653
|
+
return this.state().headingLevel === level;
|
|
654
|
+
}
|
|
655
|
+
isParagraphActive() {
|
|
656
|
+
const s = this.state();
|
|
657
|
+
return !s.headingLevel && !s.bulletList && !s.orderedList && !s.blockquote && !s.codeBlock;
|
|
658
|
+
}
|
|
659
|
+
onFontSizeComboChange(value) {
|
|
660
|
+
if (value == null || value === 'normal') {
|
|
661
|
+
this.wysiwyg.setFontSize(null);
|
|
662
|
+
return;
|
|
663
|
+
}
|
|
664
|
+
if (value === 'small' || value === 'large' || value === 'huge') {
|
|
665
|
+
this.wysiwyg.setFontSize(value);
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
beginInsert(kind) {
|
|
669
|
+
this.insertKind.set(kind);
|
|
670
|
+
this.insertUrl.set('');
|
|
671
|
+
queueMicrotask(() => this.insertPopover()?.open());
|
|
672
|
+
}
|
|
673
|
+
applyInsert() {
|
|
674
|
+
const url = this.insertUrl().trim();
|
|
675
|
+
if (!url) {
|
|
676
|
+
return;
|
|
677
|
+
}
|
|
678
|
+
if (this.insertKind() === 'image') {
|
|
679
|
+
this.wysiwyg.insertImage(url);
|
|
680
|
+
}
|
|
681
|
+
else if (this.insertKind() === 'video') {
|
|
682
|
+
this.wysiwyg.insertVideo(url);
|
|
683
|
+
}
|
|
684
|
+
this.insertPopover()?.close();
|
|
685
|
+
this.insertUrl.set('');
|
|
686
|
+
this.insertKind.set(null);
|
|
687
|
+
}
|
|
554
688
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygFontStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: AXWysiwygFontStyleComponent, isStandalone: true, selector: "ax-wysiwyg-font-style", providers: [{ provide: AXComponent, useExisting: AXWysiwygFontStyleComponent }], ngImport: i0, template: "<div class=\"ax-wysiwyg-tool-group\">\n <span class=\"ql-formats\">\n <button type=\"button\" class=\"ql-bold\" title=\"Bold\" aria-label=\"Bold\"></button>\n <button type=\"button\" class=\"ql-italic\" title=\"Italic\" aria-label=\"Italic\"></button>\n <button type=\"button\" class=\"ql-underline\" title=\"Underline\" aria-label=\"Underline\"></button>\n <button type=\"button\" class=\"ql-strike\" title=\"Strikethrough\" aria-label=\"Strikethrough\"></button>\n <button type=\"button\" class=\"ql-code-block\" title=\"Code block\" aria-label=\"Code block\"></button>\n </span>\n\n <span class=\"ql-formats\">\n <select class=\"ql-size\" title=\"Font size\" aria-label=\"Font size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n\n <span class=\"ql-formats\">\n <select class=\"ql-header\" title=\"Heading\" aria-label=\"Heading\">\n <option value=\"1\">H1</option>\n <option value=\"2\">H2</option>\n <option value=\"3\">H3</option>\n <option value=\"4\">H4</option>\n <option value=\"5\">H5</option>\n <option value=\"6\">H6</option>\n <option selected></option>\n </select>\n </span>\n</div>\n", encapsulation: i0.ViewEncapsulation.None }); }
|
|
689
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXWysiwygFontStyleComponent, isStandalone: true, selector: "ax-wysiwyg-font-style", inputs: { headingLevels: { classPropertyName: "headingLevels", publicName: "headingLevels", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXWysiwygFontStyleComponent }], viewQueries: [{ propertyName: "insertPopover", first: true, predicate: ["insertPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (context.compact()) {\n <div class=\"ax-wysiwyg-tool-group ax-wysiwyg-block-menu-group\">\n <ax-button\n #blockMenuTrigger\n class=\"ax-sm ax-wysiwyg-block-menu-trigger\"\n look=\"blank\"\n [text]=\"blockLabel()\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"i18n.menu.blockType | translate | async\"\n >\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-chevron-down\"></ax-icon>\n </ax-suffix>\n <ax-dropdown-panel>\n <ax-button-item-list class=\"ax-wysiwyg-block-menu\">\n <ax-title>{{ i18n.menu.blockType | translate | async }}</ax-title>\n @if (paragraphMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"isParagraphActive()\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.setParagraph()\"\n >\n @if (isParagraphActive()) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @for (heading of headingButtons(); track heading.level) {\n @if (heading.config; as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"isHeadingActive(heading.level)\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleHeading(heading.level)\"\n >\n @if (isHeadingActive(heading.level)) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n }\n @if (blockquoteMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().blockquote\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleBlockquote()\"\n >\n @if (state().blockquote) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @if (codeBlockMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().codeBlock\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleCodeBlock()\"\n >\n @if (state().codeBlock) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @if (bulletListMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().bulletList\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleBulletList()\"\n >\n @if (state().bulletList) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @if (orderedListMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().orderedList\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleOrderedList()\"\n >\n @if (state().orderedList) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n\n <ax-divider></ax-divider>\n <ax-title>{{ i18n.menu.insert | translate | async }}</ax-title>\n @if (imageMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"beginInsert('image')\"\n ></ax-button-item>\n }\n @if (videoMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"beginInsert('video')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n\n <ax-popover\n #insertPopover\n [target]=\"blockMenuTrigger\"\n openOn=\"manual\"\n closeOn=\"clickOut\"\n placement=\"bottom-start\"\n >\n <div class=\"ax-wysiwyg-block-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"insertPlaceholder()\"\n [ngModel]=\"insertUrl()\"\n (ngModelChange)=\"insertUrl.set($event)\"\n ></ax-text-box>\n <ax-button\n look=\"flat\"\n [text]=\"i18n.insert.insert\"\n (onClick)=\"applyInsert()\"\n ></ax-button>\n </div>\n </ax-popover>\n </div>\n}\n\n<div class=\"ax-wysiwyg-tool-group\">\n @if (boldButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().bold\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleBold()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (italicButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().italic\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleItalic()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (underlineButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().underline\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleUnderline()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (strikeButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().strike\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleStrike()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (context.compact()) {\n @if (codeButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().code\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleCode()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n } @else if (codeBlockButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().codeBlock\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleCodeBlock()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n</div>\n\n<div class=\"ax-wysiwyg-tool-group ax-wysiwyg-font-size-group\">\n <ax-combo-box\n class=\"ax-wysiwyg-font-size-combo ax-sm\"\n [items]=\"fontSizeItems()\"\n [searchable]=\"false\"\n [adaptivityEnabled]=\"false\"\n look=\"blank\"\n [placeholder]=\"i18n.fontSize.placeholder\"\n name=\"wysiwyg-font-size\"\n [disabled]=\"context.interactionDisabled()\"\n [ngModel]=\"fontSizeComboValue()\"\n (ngModelChange)=\"onFontSizeComboChange($event)\"\n ></ax-combo-box>\n</div>\n\n@if (!context.compact()) {\n <div class=\"ax-wysiwyg-tool-group\">\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n text=\"P\"\n [toggleable]=\"true\"\n [selected]=\"isParagraphActive()\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"i18n.tools.paragraph | translate | async\"\n [attr.aria-label]=\"i18n.tools.paragraph | translate | async\"\n (onClick)=\"wysiwyg.setParagraph()\"\n ></ax-button>\n @for (item of headingButtons(); track item.level) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [text]=\"item.label\"\n [toggleable]=\"true\"\n [selected]=\"isHeadingActive(item.level)\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"(item.config?.text ?? i18n.blocks.heading(item.level)) | translate | async\"\n [attr.aria-label]=\"(item.config?.text ?? i18n.blocks.heading(item.level)) | translate | async\"\n (onClick)=\"wysiwyg.toggleHeading(item.level)\"\n ></ax-button>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-wysiwyg-font-style .ax-wysiwyg-block-menu-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center}ax-wysiwyg-font-style .ax-wysiwyg-block-menu-trigger{max-width:calc(var(--spacing, .25rem) * 40);min-width:calc(var(--spacing, .25rem) * 28);justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-font-style .ax-wysiwyg-block-menu{min-width:calc(var(--spacing, .25rem) * 52);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-font-style .ax-wysiwyg-block-menu ax-title{padding-inline:calc(var(--spacing, .25rem) * 3.5);padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:60%}ax-wysiwyg-font-style .ax-wysiwyg-block-menu ax-divider{margin-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-font-style .ax-wysiwyg-block-insert-panel{display:flex;min-width:calc(var(--spacing, .25rem) * 56);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "component", type: AXComboBoxComponent, selector: "ax-combo-box", inputs: ["name", "items", "searchable", "multiple", "adaptivityEnabled", "caption", "alternate", "placeholder", "searchPlaceholder", "highlightSearch", "emptyTemplate", "itemTemplate", "selectedTemplate", "disabled", "readonly", "look", "value"], outputs: ["lookChange", "valueChange", "onValueChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
556
690
|
}
|
|
557
691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygFontStyleComponent, decorators: [{
|
|
558
692
|
type: Component,
|
|
559
|
-
args: [{ selector: 'ax-wysiwyg-font-style', encapsulation: ViewEncapsulation.None,
|
|
560
|
-
|
|
693
|
+
args: [{ selector: 'ax-wysiwyg-font-style', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
694
|
+
AsyncPipe,
|
|
695
|
+
FormsModule,
|
|
696
|
+
AXButtonComponent,
|
|
697
|
+
AXButtonItemComponent,
|
|
698
|
+
AXButtonItemListComponent,
|
|
699
|
+
AXComboBoxComponent,
|
|
700
|
+
AXDecoratorGenericComponent,
|
|
701
|
+
AXDecoratorIconComponent,
|
|
702
|
+
AXDropdownPanelComponent,
|
|
703
|
+
AXPopoverComponent,
|
|
704
|
+
AXTextBoxComponent,
|
|
705
|
+
AXTranslatorPipe,
|
|
706
|
+
], providers: [{ provide: AXComponent, useExisting: AXWysiwygFontStyleComponent }], template: "@if (context.compact()) {\n <div class=\"ax-wysiwyg-tool-group ax-wysiwyg-block-menu-group\">\n <ax-button\n #blockMenuTrigger\n class=\"ax-sm ax-wysiwyg-block-menu-trigger\"\n look=\"blank\"\n [text]=\"blockLabel()\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"i18n.menu.blockType | translate | async\"\n >\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-chevron-down\"></ax-icon>\n </ax-suffix>\n <ax-dropdown-panel>\n <ax-button-item-list class=\"ax-wysiwyg-block-menu\">\n <ax-title>{{ i18n.menu.blockType | translate | async }}</ax-title>\n @if (paragraphMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"isParagraphActive()\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.setParagraph()\"\n >\n @if (isParagraphActive()) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @for (heading of headingButtons(); track heading.level) {\n @if (heading.config; as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"isHeadingActive(heading.level)\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleHeading(heading.level)\"\n >\n @if (isHeadingActive(heading.level)) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n }\n @if (blockquoteMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().blockquote\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleBlockquote()\"\n >\n @if (state().blockquote) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @if (codeBlockMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().codeBlock\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleCodeBlock()\"\n >\n @if (state().codeBlock) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @if (bulletListMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().bulletList\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleBulletList()\"\n >\n @if (state().bulletList) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n @if (orderedListMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [selected]=\"state().orderedList\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"wysiwyg.toggleOrderedList()\"\n >\n @if (state().orderedList) {\n <ax-suffix>\n <ax-icon class=\"ax-icon ax-icon-check\"></ax-icon>\n </ax-suffix>\n }\n </ax-button-item>\n }\n\n <ax-divider></ax-divider>\n <ax-title>{{ i18n.menu.insert | translate | async }}</ax-title>\n @if (imageMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"beginInsert('image')\"\n ></ax-button-item>\n }\n @if (videoMenuItem(); as item) {\n <ax-button-item\n [text]=\"item.text!\"\n [disabled]=\"context.interactionDisabled()\"\n (onClick)=\"beginInsert('video')\"\n ></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n\n <ax-popover\n #insertPopover\n [target]=\"blockMenuTrigger\"\n openOn=\"manual\"\n closeOn=\"clickOut\"\n placement=\"bottom-start\"\n >\n <div class=\"ax-wysiwyg-block-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"insertPlaceholder()\"\n [ngModel]=\"insertUrl()\"\n (ngModelChange)=\"insertUrl.set($event)\"\n ></ax-text-box>\n <ax-button\n look=\"flat\"\n [text]=\"i18n.insert.insert\"\n (onClick)=\"applyInsert()\"\n ></ax-button>\n </div>\n </ax-popover>\n </div>\n}\n\n<div class=\"ax-wysiwyg-tool-group\">\n @if (boldButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().bold\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleBold()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (italicButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().italic\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleItalic()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (underlineButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().underline\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleUnderline()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (strikeButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().strike\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleStrike()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (context.compact()) {\n @if (codeButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().code\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleCode()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n } @else if (codeBlockButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().codeBlock\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleCodeBlock()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n</div>\n\n<div class=\"ax-wysiwyg-tool-group ax-wysiwyg-font-size-group\">\n <ax-combo-box\n class=\"ax-wysiwyg-font-size-combo ax-sm\"\n [items]=\"fontSizeItems()\"\n [searchable]=\"false\"\n [adaptivityEnabled]=\"false\"\n look=\"blank\"\n [placeholder]=\"i18n.fontSize.placeholder\"\n name=\"wysiwyg-font-size\"\n [disabled]=\"context.interactionDisabled()\"\n [ngModel]=\"fontSizeComboValue()\"\n (ngModelChange)=\"onFontSizeComboChange($event)\"\n ></ax-combo-box>\n</div>\n\n@if (!context.compact()) {\n <div class=\"ax-wysiwyg-tool-group\">\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n text=\"P\"\n [toggleable]=\"true\"\n [selected]=\"isParagraphActive()\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"i18n.tools.paragraph | translate | async\"\n [attr.aria-label]=\"i18n.tools.paragraph | translate | async\"\n (onClick)=\"wysiwyg.setParagraph()\"\n ></ax-button>\n @for (item of headingButtons(); track item.level) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [text]=\"item.label\"\n [toggleable]=\"true\"\n [selected]=\"isHeadingActive(item.level)\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"(item.config?.text ?? i18n.blocks.heading(item.level)) | translate | async\"\n [attr.aria-label]=\"(item.config?.text ?? i18n.blocks.heading(item.level)) | translate | async\"\n (onClick)=\"wysiwyg.toggleHeading(item.level)\"\n ></ax-button>\n }\n </div>\n}\n", styles: ["@layer properties;@layer components{ax-wysiwyg-font-style .ax-wysiwyg-block-menu-group{display:flex;flex-shrink:0;flex-wrap:nowrap;align-items:center}ax-wysiwyg-font-style .ax-wysiwyg-block-menu-trigger{max-width:calc(var(--spacing, .25rem) * 40);min-width:calc(var(--spacing, .25rem) * 28);justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-font-style .ax-wysiwyg-block-menu{min-width:calc(var(--spacing, .25rem) * 52);padding-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-font-style .ax-wysiwyg-block-menu ax-title{padding-inline:calc(var(--spacing, .25rem) * 3.5);padding-top:calc(var(--spacing, .25rem) * 2);padding-bottom:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:60%}ax-wysiwyg-font-style .ax-wysiwyg-block-menu ax-divider{margin-block:calc(var(--spacing, .25rem) * 1)}ax-wysiwyg-font-style .ax-wysiwyg-block-insert-panel{display:flex;min-width:calc(var(--spacing, .25rem) * 56);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
707
|
+
}], propDecorators: { headingLevels: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevels", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], insertPopover: [{ type: i0.ViewChild, args: ['insertPopover', { isSignal: true }] }] } });
|
|
561
708
|
|
|
562
709
|
/**
|
|
563
710
|
* Undo and redo controls for the WYSIWYG toolbar.
|
|
564
711
|
* @category Components
|
|
565
712
|
*/
|
|
566
713
|
class AXWysiwygHistoryComponent {
|
|
714
|
+
constructor() {
|
|
715
|
+
this.buttons = input(/* @ts-ignore */
|
|
716
|
+
...(ngDevMode ? [undefined, { debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
717
|
+
this.wysiwyg = inject(AXWysiwyg);
|
|
718
|
+
this.context = inject(AXWysiwygContext);
|
|
719
|
+
this.state = this.wysiwyg.state;
|
|
720
|
+
this.undoButton = computed(() => resolveAXWysiwygButton('undo', { icon: 'ax-icon-undo', tooltip: AX_WYSIWYG_I18N.tools.undo }, this.buttons()), /* @ts-ignore */
|
|
721
|
+
...(ngDevMode ? [{ debugName: "undoButton" }] : /* istanbul ignore next */ []));
|
|
722
|
+
this.redoButton = computed(() => resolveAXWysiwygButton('redo', { icon: 'ax-icon-redo', tooltip: AX_WYSIWYG_I18N.tools.redo }, this.buttons()), /* @ts-ignore */
|
|
723
|
+
...(ngDevMode ? [{ debugName: "redoButton" }] : /* istanbul ignore next */ []));
|
|
724
|
+
}
|
|
567
725
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
568
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
726
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXWysiwygHistoryComponent, isStandalone: true, selector: "ax-wysiwyg-history", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXWysiwygHistoryComponent }], ngImport: i0, template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (undoButton(); as undo) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled() || !state().canUndo\"\n [attr.title]=\"undo.tooltip | translate | async\"\n [attr.aria-label]=\"undo.tooltip | translate | async\"\n (onClick)=\"wysiwyg.undo()\"\n >\n <ax-icon class=\"ax-icon {{ undo.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (redoButton(); as redo) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled() || !state().canRedo\"\n [attr.title]=\"redo.tooltip | translate | async\"\n [attr.aria-label]=\"redo.tooltip | translate | async\"\n (onClick)=\"wysiwyg.redo()\"\n >\n <ax-icon class=\"ax-icon {{ redo.icon }}\"></ax-icon>\n </ax-button>\n }\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
569
727
|
}
|
|
570
728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygHistoryComponent, decorators: [{
|
|
571
729
|
type: Component,
|
|
572
|
-
args: [{ selector: 'ax-wysiwyg-history', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXWysiwygHistoryComponent }], template: "<
|
|
573
|
-
}] });
|
|
730
|
+
args: [{ selector: 'ax-wysiwyg-history', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, AXButtonComponent, AXDecoratorIconComponent, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXWysiwygHistoryComponent }], template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (undoButton(); as undo) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled() || !state().canUndo\"\n [attr.title]=\"undo.tooltip | translate | async\"\n [attr.aria-label]=\"undo.tooltip | translate | async\"\n (onClick)=\"wysiwyg.undo()\"\n >\n <ax-icon class=\"ax-icon {{ undo.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (redoButton(); as redo) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled() || !state().canRedo\"\n [attr.title]=\"redo.tooltip | translate | async\"\n [attr.aria-label]=\"redo.tooltip | translate | async\"\n (onClick)=\"wysiwyg.redo()\"\n >\n <ax-icon class=\"ax-icon {{ redo.icon }}\"></ax-icon>\n </ax-button>\n }\n</div>\n" }]
|
|
731
|
+
}], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }] } });
|
|
574
732
|
|
|
575
733
|
/**
|
|
576
|
-
*
|
|
734
|
+
* Link, image, and video insertion controls for the WYSIWYG toolbar.
|
|
577
735
|
* @category Components
|
|
578
736
|
*/
|
|
579
737
|
class AXWysiwygInsertComponent {
|
|
738
|
+
constructor() {
|
|
739
|
+
this.buttons = input(/* @ts-ignore */
|
|
740
|
+
...(ngDevMode ? [undefined, { debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
741
|
+
this.i18n = AX_WYSIWYG_I18N;
|
|
742
|
+
this.wysiwyg = inject(AXWysiwyg);
|
|
743
|
+
this.context = inject(AXWysiwygContext);
|
|
744
|
+
this.state = this.wysiwyg.state;
|
|
745
|
+
this.linkButton = computed(() => resolveAXWysiwygButton('link', { icon: 'ax-icon-link', tooltip: AX_WYSIWYG_I18N.tools.link }, this.buttons()), /* @ts-ignore */
|
|
746
|
+
...(ngDevMode ? [{ debugName: "linkButton" }] : /* istanbul ignore next */ []));
|
|
747
|
+
this.imageButton = computed(() => resolveAXWysiwygButton('image', { icon: 'ax-icon-image', tooltip: AX_WYSIWYG_I18N.tools.image }, this.buttons()), /* @ts-ignore */
|
|
748
|
+
...(ngDevMode ? [{ debugName: "imageButton" }] : /* istanbul ignore next */ []));
|
|
749
|
+
this.videoButton = computed(() => resolveAXWysiwygButton('video', { icon: 'ax-icon-play', tooltip: AX_WYSIWYG_I18N.tools.video }, this.buttons()), /* @ts-ignore */
|
|
750
|
+
...(ngDevMode ? [{ debugName: "videoButton" }] : /* istanbul ignore next */ []));
|
|
751
|
+
this.linkUrl = signal('', /* @ts-ignore */
|
|
752
|
+
...(ngDevMode ? [{ debugName: "linkUrl" }] : /* istanbul ignore next */ []));
|
|
753
|
+
this.imageUrl = signal('', /* @ts-ignore */
|
|
754
|
+
...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
|
|
755
|
+
this.videoUrl = signal('', /* @ts-ignore */
|
|
756
|
+
...(ngDevMode ? [{ debugName: "videoUrl" }] : /* istanbul ignore next */ []));
|
|
757
|
+
}
|
|
758
|
+
applyLink() {
|
|
759
|
+
const url = this.linkUrl().trim();
|
|
760
|
+
if (url) {
|
|
761
|
+
this.wysiwyg.setLink(url);
|
|
762
|
+
}
|
|
763
|
+
}
|
|
764
|
+
removeLink() {
|
|
765
|
+
this.wysiwyg.unsetLink();
|
|
766
|
+
this.linkUrl.set('');
|
|
767
|
+
}
|
|
768
|
+
applyImage() {
|
|
769
|
+
const url = this.imageUrl().trim();
|
|
770
|
+
if (url) {
|
|
771
|
+
this.wysiwyg.insertImage(url);
|
|
772
|
+
}
|
|
773
|
+
}
|
|
774
|
+
applyVideo() {
|
|
775
|
+
const url = this.videoUrl().trim();
|
|
776
|
+
if (url) {
|
|
777
|
+
this.wysiwyg.insertVideo(url);
|
|
778
|
+
}
|
|
779
|
+
}
|
|
580
780
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygInsertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
581
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
781
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXWysiwygInsertComponent, isStandalone: true, selector: "ax-wysiwyg-insert", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXWysiwygInsertComponent }], ngImport: i0, template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (linkButton(); as btn) {\n <div class=\"ax-wysiwyg-insert-control\">\n <ax-button\n class=\"ax-sm\"\n #linkTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"!!state().linkHref\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n <ax-popover [target]=\"linkTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"i18n.insert.linkUrl | translate | async\"\n [ngModel]=\"linkUrl()\"\n (ngModelChange)=\"linkUrl.set($event)\"\n ></ax-text-box>\n <div class=\"ax-wysiwyg-insert-actions\">\n <ax-button look=\"flat\" [text]=\"i18n.insert.apply\" (onClick)=\"applyLink()\"></ax-button>\n <ax-button\n look=\"flat\"\n [text]=\"i18n.insert.remove\"\n [disabled]=\"!state().linkHref\"\n (onClick)=\"removeLink()\"\n ></ax-button>\n </div>\n </div>\n </ax-popover>\n </div>\n }\n\n @if (!context.compact()) {\n @if (imageButton(); as btn) {\n <div class=\"ax-wysiwyg-insert-control\">\n <ax-button\n class=\"ax-sm\"\n #imageTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n <ax-popover [target]=\"imageTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"i18n.insert.imageUrl | translate | async\"\n [ngModel]=\"imageUrl()\"\n (ngModelChange)=\"imageUrl.set($event)\"\n ></ax-text-box>\n <ax-button look=\"flat\" [text]=\"i18n.insert.insert\" (onClick)=\"applyImage()\"></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n\n @if (videoButton(); as btn) {\n <div class=\"ax-wysiwyg-insert-control\">\n <ax-button\n class=\"ax-sm\"\n #videoTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n <ax-popover [target]=\"videoTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"i18n.insert.videoUrl | translate | async\"\n [ngModel]=\"videoUrl()\"\n (ngModelChange)=\"videoUrl.set($event)\"\n ></ax-text-box>\n <ax-button look=\"flat\" [text]=\"i18n.insert.insert\" (onClick)=\"applyVideo()\"></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n }\n</div>\n", styles: ["@layer components{ax-wysiwyg-insert .ax-wysiwyg-insert-panel{display:flex;min-width:calc(var(--spacing, .25rem) * 56);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2)}ax-wysiwyg-insert .ax-wysiwyg-insert-actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
582
782
|
}
|
|
583
783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygInsertComponent, decorators: [{
|
|
584
784
|
type: Component,
|
|
585
|
-
args: [{ selector: 'ax-wysiwyg-insert', encapsulation: ViewEncapsulation.None,
|
|
586
|
-
|
|
785
|
+
args: [{ selector: 'ax-wysiwyg-insert', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
786
|
+
AsyncPipe,
|
|
787
|
+
FormsModule,
|
|
788
|
+
AXButtonComponent,
|
|
789
|
+
AXDecoratorIconComponent,
|
|
790
|
+
AXPopoverComponent,
|
|
791
|
+
AXTextBoxComponent,
|
|
792
|
+
AXTranslatorPipe,
|
|
793
|
+
], providers: [{ provide: AXComponent, useExisting: AXWysiwygInsertComponent }], template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (linkButton(); as btn) {\n <div class=\"ax-wysiwyg-insert-control\">\n <ax-button\n class=\"ax-sm\"\n #linkTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"!!state().linkHref\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n <ax-popover [target]=\"linkTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"i18n.insert.linkUrl | translate | async\"\n [ngModel]=\"linkUrl()\"\n (ngModelChange)=\"linkUrl.set($event)\"\n ></ax-text-box>\n <div class=\"ax-wysiwyg-insert-actions\">\n <ax-button look=\"flat\" [text]=\"i18n.insert.apply\" (onClick)=\"applyLink()\"></ax-button>\n <ax-button\n look=\"flat\"\n [text]=\"i18n.insert.remove\"\n [disabled]=\"!state().linkHref\"\n (onClick)=\"removeLink()\"\n ></ax-button>\n </div>\n </div>\n </ax-popover>\n </div>\n }\n\n @if (!context.compact()) {\n @if (imageButton(); as btn) {\n <div class=\"ax-wysiwyg-insert-control\">\n <ax-button\n class=\"ax-sm\"\n #imageTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n <ax-popover [target]=\"imageTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"i18n.insert.imageUrl | translate | async\"\n [ngModel]=\"imageUrl()\"\n (ngModelChange)=\"imageUrl.set($event)\"\n ></ax-text-box>\n <ax-button look=\"flat\" [text]=\"i18n.insert.insert\" (onClick)=\"applyImage()\"></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n\n @if (videoButton(); as btn) {\n <div class=\"ax-wysiwyg-insert-control\">\n <ax-button\n class=\"ax-sm\"\n #videoTrigger\n look=\"blank\"\n [iconOnly]=\"true\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n [attr.aria-label]=\"btn.tooltip | translate | async\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n <ax-popover [target]=\"videoTrigger\" trigger=\"click\" placement=\"bottom-start\">\n <div class=\"ax-wysiwyg-insert-panel\">\n <ax-text-box\n look=\"none\"\n [placeholder]=\"i18n.insert.videoUrl | translate | async\"\n [ngModel]=\"videoUrl()\"\n (ngModelChange)=\"videoUrl.set($event)\"\n ></ax-text-box>\n <ax-button look=\"flat\" [text]=\"i18n.insert.insert\" (onClick)=\"applyVideo()\"></ax-button>\n </div>\n </ax-popover>\n </div>\n }\n }\n</div>\n", styles: ["@layer components{ax-wysiwyg-insert .ax-wysiwyg-insert-panel{display:flex;min-width:calc(var(--spacing, .25rem) * 56);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2)}ax-wysiwyg-insert .ax-wysiwyg-insert-actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
794
|
+
}], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }] } });
|
|
587
795
|
|
|
588
796
|
/**
|
|
589
797
|
* List and text-direction controls for the WYSIWYG toolbar.
|
|
590
798
|
* @category Components
|
|
591
799
|
*/
|
|
592
800
|
class AXWysiwygListComponent {
|
|
801
|
+
constructor() {
|
|
802
|
+
this.buttons = input(/* @ts-ignore */
|
|
803
|
+
...(ngDevMode ? [undefined, { debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
804
|
+
this.wysiwyg = inject(AXWysiwyg);
|
|
805
|
+
this.context = inject(AXWysiwygContext);
|
|
806
|
+
this.state = this.wysiwyg.state;
|
|
807
|
+
this.bulletButton = computed(() => resolveAXWysiwygButton('bulletList', { icon: 'ax-icon-un-order-list', tooltip: AX_WYSIWYG_I18N.tools.bulletList }, this.buttons()), /* @ts-ignore */
|
|
808
|
+
...(ngDevMode ? [{ debugName: "bulletButton" }] : /* istanbul ignore next */ []));
|
|
809
|
+
this.orderedButton = computed(() => resolveAXWysiwygButton('orderedList', { icon: 'ax-icon-order-list', tooltip: AX_WYSIWYG_I18N.tools.orderedList }, this.buttons()), /* @ts-ignore */
|
|
810
|
+
...(ngDevMode ? [{ debugName: "orderedButton" }] : /* istanbul ignore next */ []));
|
|
811
|
+
this.rtlButton = computed(() => resolveAXWysiwygButton('rtl', { icon: 'ax-icon-text-direction-rtl', tooltip: AX_WYSIWYG_I18N.tools.rtl }, this.buttons()), /* @ts-ignore */
|
|
812
|
+
...(ngDevMode ? [{ debugName: "rtlButton" }] : /* istanbul ignore next */ []));
|
|
813
|
+
}
|
|
593
814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
594
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXWysiwygListComponent, isStandalone: true, selector: "ax-wysiwyg-list", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXWysiwygListComponent }], ngImport: i0, template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (!context.compact()) {\n @if (orderedButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().orderedList\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleOrderedList()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (bulletButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().bulletList\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleBulletList()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n }\n @if (rtlButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().textDirection === 'rtl'\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.setTextDirection(state().textDirection === 'rtl' ? 'ltr' : 'rtl')\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
595
816
|
}
|
|
596
817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygListComponent, decorators: [{
|
|
597
818
|
type: Component,
|
|
598
|
-
args: [{ selector: 'ax-wysiwyg-list', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXWysiwygListComponent }], template: "<
|
|
599
|
-
}] });
|
|
819
|
+
args: [{ selector: 'ax-wysiwyg-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, AXButtonComponent, AXDecoratorIconComponent, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXWysiwygListComponent }], template: "<div class=\"ax-wysiwyg-tool-group\">\n @if (!context.compact()) {\n @if (orderedButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().orderedList\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleOrderedList()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n @if (bulletButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().bulletList\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.toggleBulletList()\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n }\n @if (rtlButton(); as btn) {\n <ax-button\n class=\"ax-sm\"\n look=\"blank\"\n [iconOnly]=\"true\"\n [toggleable]=\"true\"\n [selected]=\"state().textDirection === 'rtl'\"\n [disabled]=\"context.interactionDisabled()\"\n [attr.title]=\"btn.tooltip | translate | async\"\n (onClick)=\"wysiwyg.setTextDirection(state().textDirection === 'rtl' ? 'ltr' : 'rtl')\"\n >\n <ax-icon class=\"ax-icon {{ btn.icon }}\"></ax-icon>\n </ax-button>\n }\n</div>\n" }]
|
|
820
|
+
}], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }] } });
|
|
600
821
|
|
|
601
822
|
const COMPONENT = [
|
|
602
823
|
AXWysiwygContainerComponent,
|
|
@@ -628,7 +849,12 @@ class AXWysiwygModule {
|
|
|
628
849
|
AXWysiwygInsertComponent,
|
|
629
850
|
AXWysiwygListComponent,
|
|
630
851
|
AXWysiwygToolbarComponent] }); }
|
|
631
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygModule, imports: [
|
|
852
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygModule, imports: [AXWysiwygAlignmentComponent,
|
|
853
|
+
AXWysiwygColorsComponent,
|
|
854
|
+
AXWysiwygFontStyleComponent,
|
|
855
|
+
AXWysiwygHistoryComponent,
|
|
856
|
+
AXWysiwygInsertComponent,
|
|
857
|
+
AXWysiwygListComponent] }); }
|
|
632
858
|
}
|
|
633
859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXWysiwygModule, decorators: [{
|
|
634
860
|
type: NgModule,
|
|
@@ -642,5 +868,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
642
868
|
* Generated bundle index. Do not edit.
|
|
643
869
|
*/
|
|
644
870
|
|
|
645
|
-
export { AXWysiwygAlignmentComponent, AXWysiwygColorsComponent, AXWysiwygContainerComponent, AXWysiwygFontStyleComponent, AXWysiwygHistoryComponent, AXWysiwygInsertComponent, AXWysiwygListComponent, AXWysiwygModule, AXWysiwygToolbarComponent, AXWysiwygViewComponent };
|
|
871
|
+
export { AXWysiwygAlignmentComponent, AXWysiwygColorsComponent, AXWysiwygContainerComponent, AXWysiwygFontStyleComponent, AXWysiwygHistoryComponent, AXWysiwygInsertComponent, AXWysiwygListComponent, AXWysiwygModule, AXWysiwygToolbarComponent, AXWysiwygViewComponent, AX_WYSIWYG_I18N };
|
|
646
872
|
//# sourceMappingURL=acorex-components-wysiwyg.mjs.map
|