simpo-component-library 3.6.862 → 3.6.864
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.
- package/esm2022/lib/elements/text-editor/text-editor.component.mjs +32 -47
- package/fesm2022/simpo-component-library.mjs +32 -47
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/components/input-fields/input-fields.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
- package/lib/elements/text-editor/text-editor.component.d.ts +7 -6
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
- package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
- package/lib/sections/image-section/image-section.component.d.ts +2 -2
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
- package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.864.tgz +0 -0
- package/simpo-component-library-3.6.862.tgz +0 -0
|
@@ -32,13 +32,14 @@ import * as i10$2 from '@angular/material/slider';
|
|
|
32
32
|
import { MatSliderModule, MatSlider } from '@angular/material/slider';
|
|
33
33
|
import * as i10$1 from '@angular/material/progress-spinner';
|
|
34
34
|
import { MatProgressSpinner, MatProgressSpinnerModule, MatSpinner } from '@angular/material/progress-spinner';
|
|
35
|
+
import * as i1$2 from '@angular/platform-browser';
|
|
36
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
35
37
|
import { CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
36
38
|
import * as i12 from '@angular/material/form-field';
|
|
37
39
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
38
40
|
import { Extension } from '@tiptap/core';
|
|
39
41
|
import * as i2$2 from '@angular/router';
|
|
40
42
|
import { RouterLink, NavigationEnd } from '@angular/router';
|
|
41
|
-
import * as i1$2 from '@angular/platform-browser';
|
|
42
43
|
import { MatMenuModule } from '@angular/material/menu';
|
|
43
44
|
import * as i7$1 from 'ngx-skeleton-loader';
|
|
44
45
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
@@ -1834,19 +1835,13 @@ const FontSize = Extension.create({
|
|
|
1834
1835
|
}
|
|
1835
1836
|
});
|
|
1836
1837
|
|
|
1837
|
-
// text-editor.component.ts
|
|
1838
1838
|
class TextEditorComponent {
|
|
1839
|
-
async ngAfterViewInit() {
|
|
1840
|
-
if (this.editable &&
|
|
1841
|
-
isPlatformBrowser(this.platformId)) {
|
|
1842
|
-
await this.initializeEditor();
|
|
1843
|
-
}
|
|
1844
|
-
}
|
|
1845
1839
|
constructor() {
|
|
1846
1840
|
this.value = '<p>Hello this is palash makhija</p>';
|
|
1847
1841
|
this.valueChange = new EventEmitter();
|
|
1848
1842
|
this.editable = false;
|
|
1849
1843
|
this.platformId = inject(PLATFORM_ID);
|
|
1844
|
+
this.sanitizer = inject(DomSanitizer);
|
|
1850
1845
|
this.selectedFontSize = '';
|
|
1851
1846
|
this.showToolbar = false;
|
|
1852
1847
|
this.toolbarX = 0;
|
|
@@ -1866,7 +1861,19 @@ class TextEditorComponent {
|
|
|
1866
1861
|
this.isColorPickerOpen = false;
|
|
1867
1862
|
}, 300);
|
|
1868
1863
|
};
|
|
1869
|
-
|
|
1864
|
+
}
|
|
1865
|
+
ngOnChanges(changes) {
|
|
1866
|
+
if (changes['value']) {
|
|
1867
|
+
console.log('INPUT VALUE:', this.value);
|
|
1868
|
+
this.updateSafeHtml();
|
|
1869
|
+
}
|
|
1870
|
+
}
|
|
1871
|
+
async ngAfterViewInit() {
|
|
1872
|
+
this.updateSafeHtml();
|
|
1873
|
+
if (this.editable &&
|
|
1874
|
+
isPlatformBrowser(this.platformId)) {
|
|
1875
|
+
await this.initializeEditor();
|
|
1876
|
+
}
|
|
1870
1877
|
}
|
|
1871
1878
|
ngOnDestroy() {
|
|
1872
1879
|
if (this.editor &&
|
|
@@ -1874,10 +1881,14 @@ class TextEditorComponent {
|
|
|
1874
1881
|
this.editor.destroy();
|
|
1875
1882
|
}
|
|
1876
1883
|
}
|
|
1884
|
+
updateSafeHtml() {
|
|
1885
|
+
this.safeHtml =
|
|
1886
|
+
this.sanitizer
|
|
1887
|
+
.bypassSecurityTrustHtml(this.value || '');
|
|
1888
|
+
}
|
|
1877
1889
|
async initializeEditor() {
|
|
1878
1890
|
if (!this.editorElement)
|
|
1879
1891
|
return;
|
|
1880
|
-
// dynamic imports for SSR safety
|
|
1881
1892
|
const { Editor } = await import('@tiptap/core');
|
|
1882
1893
|
const StarterKit = (await import('@tiptap/starter-kit')).default;
|
|
1883
1894
|
const TextStyle = (await import('@tiptap/extension-text-style'))
|
|
@@ -1916,7 +1927,9 @@ class TextEditorComponent {
|
|
|
1916
1927
|
},
|
|
1917
1928
|
onUpdate: ({ editor }) => {
|
|
1918
1929
|
const html = editor.getHTML();
|
|
1930
|
+
console.log('EDITOR HTML:', html);
|
|
1919
1931
|
this.value = html;
|
|
1932
|
+
this.updateSafeHtml();
|
|
1920
1933
|
this.valueChange.emit(html);
|
|
1921
1934
|
this.updateEmptyEditorClass();
|
|
1922
1935
|
}
|
|
@@ -2089,12 +2102,12 @@ class TextEditorComponent {
|
|
|
2089
2102
|
return;
|
|
2090
2103
|
const existingStyles = this.editor.getAttributes('textStyle');
|
|
2091
2104
|
const gradient = `
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2105
|
+
linear - gradient(
|
|
2106
|
+
to right,
|
|
2107
|
+
${this.primaryColor},
|
|
2108
|
+
${this.secondaryColor}
|
|
2109
|
+
)
|
|
2110
|
+
`;
|
|
2098
2111
|
this.editor
|
|
2099
2112
|
.chain()
|
|
2100
2113
|
.focus()
|
|
@@ -2121,34 +2134,6 @@ class TextEditorComponent {
|
|
|
2121
2134
|
from !== to;
|
|
2122
2135
|
});
|
|
2123
2136
|
}
|
|
2124
|
-
toggleFontSizeMenu(event) {
|
|
2125
|
-
this.isFontSizeMenuOpen =
|
|
2126
|
-
!this.isFontSizeMenuOpen;
|
|
2127
|
-
event.stopPropagation();
|
|
2128
|
-
}
|
|
2129
|
-
getDisplayFontSize() {
|
|
2130
|
-
const size = this.editor
|
|
2131
|
-
?.getAttributes('textStyle')?.['fontSize'];
|
|
2132
|
-
if (!size)
|
|
2133
|
-
return '16';
|
|
2134
|
-
if (size.includes('0.75rem'))
|
|
2135
|
-
return '14';
|
|
2136
|
-
if (size.includes('1rem, 3vw'))
|
|
2137
|
-
return '20';
|
|
2138
|
-
if (size.includes('1.25rem'))
|
|
2139
|
-
return '24';
|
|
2140
|
-
if (size.includes('2rem'))
|
|
2141
|
-
return '32';
|
|
2142
|
-
if (size.includes('3.1rem'))
|
|
2143
|
-
return '48';
|
|
2144
|
-
return '16';
|
|
2145
|
-
}
|
|
2146
|
-
selectCustomFontSize(cssSize, event) {
|
|
2147
|
-
event.stopPropagation();
|
|
2148
|
-
this.changeFontSize(cssSize);
|
|
2149
|
-
this.isFontSizeMenuOpen =
|
|
2150
|
-
false;
|
|
2151
|
-
}
|
|
2152
2137
|
changeFontSize(fontSize) {
|
|
2153
2138
|
this.selectedFontSize =
|
|
2154
2139
|
fontSize;
|
|
@@ -2168,7 +2153,7 @@ class TextEditorComponent {
|
|
|
2168
2153
|
.run();
|
|
2169
2154
|
}
|
|
2170
2155
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2171
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onMouseDown()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n <!-- FLOATING TOOLBAR -->\r\n <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-grip-vertical\">\r\n <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n </svg>\r\n </button>\r\n <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n <mat-option value=\"\">\r\n Default\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n 14\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n 16\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n 20\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n 24\r\n </mat-option>\r\n <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n 32\r\n </mat-option>\r\n <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n 48\r\n </mat-option>\r\n </mat-select>\r\n\r\n </mat-form-field>\r\n <!-- BOLD -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-bold\">\r\n <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ITALIC -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-italic\">\r\n <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- UNDERLINE -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-underline\">\r\n <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN LEFT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-left\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN CENTER -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-center\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN RIGHT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-right\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ORDERED LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list-ordered\">\r\n <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <path d=\"M4 6h1v4\" />\r\n <path d=\"M4 10h2\" />\r\n <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n </svg>\r\n </button>\r\n <!-- BULLET LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list\">\r\n <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- SOLID / GRADIENT -->\r\n <!-- SOLID / GRADIENT -->\r\n <div class=\"colorType\">\r\n\r\n <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n Solid\r\n </button>\r\n\r\n <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n Gradient\r\n </button>\r\n\r\n </div>\r\n\r\n <!-- SOLID COLOR -->\r\n <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n <mat-icon>format_color_text</mat-icon>\r\n\r\n <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n (input)=\"changeColor()\">\r\n\r\n </button>\r\n\r\n <!-- GRADIENT -->\r\n <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- TIPTAP EDITOR -->\r\n <div #editorContainer class=\"editable-text\">\r\n </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
|
|
2156
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onMouseDown()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n <!-- FLOATING TOOLBAR -->\r\n <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-grip-vertical\">\r\n <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n </svg>\r\n </button>\r\n <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n <mat-option value=\"\">\r\n Default\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n 14\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n 16\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n 20\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n 24\r\n </mat-option>\r\n <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n 32\r\n </mat-option>\r\n <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n 48\r\n </mat-option>\r\n </mat-select>\r\n\r\n </mat-form-field>\r\n <!-- BOLD -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-bold\">\r\n <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ITALIC -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-italic\">\r\n <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- UNDERLINE -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-underline\">\r\n <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN LEFT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-left\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN CENTER -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-center\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN RIGHT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-right\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ORDERED LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list-ordered\">\r\n <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <path d=\"M4 6h1v4\" />\r\n <path d=\"M4 10h2\" />\r\n <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n </svg>\r\n </button>\r\n <!-- BULLET LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list\">\r\n <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- SOLID / GRADIENT -->\r\n <!-- SOLID / GRADIENT -->\r\n <div class=\"colorType\">\r\n\r\n <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n Solid\r\n </button>\r\n\r\n <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n Gradient\r\n </button>\r\n\r\n </div>\r\n\r\n <!-- SOLID COLOR -->\r\n <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n <mat-icon>format_color_text</mat-icon>\r\n\r\n <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n (input)=\"changeColor()\">\r\n\r\n </button>\r\n\r\n <!-- GRADIENT -->\r\n <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- TIPTAP EDITOR -->\r\n <div #editorContainer class=\"editable-text\">\r\n </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
|
|
2172
2157
|
}
|
|
2173
2158
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
2174
2159
|
type: Component,
|
|
@@ -2180,8 +2165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2180
2165
|
MatSelectModule,
|
|
2181
2166
|
MatFormFieldModule,
|
|
2182
2167
|
ContenteditableValueAccessor
|
|
2183
|
-
], template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n <!-- FLOATING TOOLBAR -->\r\n <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-grip-vertical\">\r\n <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n </svg>\r\n </button>\r\n <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n <mat-option value=\"\">\r\n Default\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n 14\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n 16\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n 20\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n 24\r\n </mat-option>\r\n <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n 32\r\n </mat-option>\r\n <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n 48\r\n </mat-option>\r\n </mat-select>\r\n\r\n </mat-form-field>\r\n <!-- BOLD -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-bold\">\r\n <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ITALIC -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-italic\">\r\n <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- UNDERLINE -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-underline\">\r\n <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN LEFT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-left\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN CENTER -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-center\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN RIGHT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-right\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ORDERED LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list-ordered\">\r\n <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <path d=\"M4 6h1v4\" />\r\n <path d=\"M4 10h2\" />\r\n <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n </svg>\r\n </button>\r\n <!-- BULLET LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list\">\r\n <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- SOLID / GRADIENT -->\r\n <!-- SOLID / GRADIENT -->\r\n <div class=\"colorType\">\r\n\r\n <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n Solid\r\n </button>\r\n\r\n <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n Gradient\r\n </button>\r\n\r\n </div>\r\n\r\n <!-- SOLID COLOR -->\r\n <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n <mat-icon>format_color_text</mat-icon>\r\n\r\n <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n (input)=\"changeColor()\">\r\n\r\n </button>\r\n\r\n <!-- GRADIENT -->\r\n <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- TIPTAP EDITOR -->\r\n <div #editorContainer class=\"editable-text\">\r\n </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"] }]
|
|
2184
|
-
}],
|
|
2168
|
+
], template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n <!-- FLOATING TOOLBAR -->\r\n <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-grip-vertical\">\r\n <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n </svg>\r\n </button>\r\n <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n <mat-option value=\"\">\r\n Default\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n 14\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n 16\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n 20\r\n </mat-option>\r\n\r\n <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n 24\r\n </mat-option>\r\n <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n 32\r\n </mat-option>\r\n <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n 48\r\n </mat-option>\r\n </mat-select>\r\n\r\n </mat-form-field>\r\n <!-- BOLD -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-bold\">\r\n <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ITALIC -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-italic\">\r\n <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- UNDERLINE -->\r\n <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-underline\">\r\n <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN LEFT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-left\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN CENTER -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-center\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ALIGN RIGHT -->\r\n <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-align-right\">\r\n <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- ORDERED LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list-ordered\">\r\n <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <path d=\"M4 6h1v4\" />\r\n <path d=\"M4 10h2\" />\r\n <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n </svg>\r\n </button>\r\n <!-- BULLET LIST -->\r\n <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"lucide lucide-list\">\r\n <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- SOLID / GRADIENT -->\r\n <!-- SOLID / GRADIENT -->\r\n <div class=\"colorType\">\r\n\r\n <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n Solid\r\n </button>\r\n\r\n <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n Gradient\r\n </button>\r\n\r\n </div>\r\n\r\n <!-- SOLID COLOR -->\r\n <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n <mat-icon>format_color_text</mat-icon>\r\n\r\n <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n (input)=\"changeColor()\">\r\n\r\n </button>\r\n\r\n <!-- GRADIENT -->\r\n <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- TIPTAP EDITOR -->\r\n <div #editorContainer class=\"editable-text\">\r\n </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"] }]
|
|
2169
|
+
}], propDecorators: { value: [{
|
|
2185
2170
|
type: Input
|
|
2186
2171
|
}], valueChange: [{
|
|
2187
2172
|
type: Output
|