simpo-component-library 3.6.848 → 3.6.851
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 +54 -31
- package/esm2022/lib/sections/testimonial-fullwidth/testimonial-fullwidth.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +55 -32
- 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/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.851.tgz +0 -0
- package/src/lib/styles/global-styles.css +0 -15
- package/simpo-component-library-3.6.848.tgz +0 -0
|
@@ -1880,6 +1880,11 @@ class TextEditorComponent {
|
|
|
1880
1880
|
return;
|
|
1881
1881
|
this.editor = new Editor({
|
|
1882
1882
|
element: this.editorElement.nativeElement,
|
|
1883
|
+
editorProps: {
|
|
1884
|
+
attributes: {
|
|
1885
|
+
class: 'ProseMirror'
|
|
1886
|
+
}
|
|
1887
|
+
},
|
|
1883
1888
|
extensions: [
|
|
1884
1889
|
StarterKit,
|
|
1885
1890
|
TextStyle,
|
|
@@ -1892,6 +1897,19 @@ class TextEditorComponent {
|
|
|
1892
1897
|
}),
|
|
1893
1898
|
],
|
|
1894
1899
|
content: this.value,
|
|
1900
|
+
onCreate: ({ editor }) => {
|
|
1901
|
+
setTimeout(() => {
|
|
1902
|
+
const proseMirrorElement = this.editorElement.nativeElement.querySelector('.ProseMirror');
|
|
1903
|
+
if (!proseMirrorElement)
|
|
1904
|
+
return;
|
|
1905
|
+
if (editor.isEmpty) {
|
|
1906
|
+
proseMirrorElement.classList.add('editor-empty');
|
|
1907
|
+
}
|
|
1908
|
+
else {
|
|
1909
|
+
proseMirrorElement.classList.remove('editor-empty');
|
|
1910
|
+
}
|
|
1911
|
+
});
|
|
1912
|
+
},
|
|
1895
1913
|
onSelectionUpdate: () => {
|
|
1896
1914
|
this.handleSelection();
|
|
1897
1915
|
},
|
|
@@ -1899,6 +1917,15 @@ class TextEditorComponent {
|
|
|
1899
1917
|
const html = editor.getHTML();
|
|
1900
1918
|
this.value = html;
|
|
1901
1919
|
this.valueChange.emit(html);
|
|
1920
|
+
const proseMirrorElement = this.editorElement.nativeElement.querySelector('.ProseMirror');
|
|
1921
|
+
if (!proseMirrorElement)
|
|
1922
|
+
return;
|
|
1923
|
+
if (editor.isEmpty) {
|
|
1924
|
+
proseMirrorElement.classList.add('editor-empty');
|
|
1925
|
+
}
|
|
1926
|
+
else {
|
|
1927
|
+
proseMirrorElement.classList.remove('editor-empty');
|
|
1928
|
+
}
|
|
1902
1929
|
}
|
|
1903
1930
|
});
|
|
1904
1931
|
}
|
|
@@ -1945,7 +1972,6 @@ class TextEditorComponent {
|
|
|
1945
1972
|
}
|
|
1946
1973
|
handleSelection() {
|
|
1947
1974
|
const { from, to } = this.editor.state.selection;
|
|
1948
|
-
// hide if nothing selected
|
|
1949
1975
|
if (from === to) {
|
|
1950
1976
|
if (!this.isColorPickerOpen) {
|
|
1951
1977
|
this.showToolbar = false;
|
|
@@ -1959,34 +1985,31 @@ class TextEditorComponent {
|
|
|
1959
1985
|
}
|
|
1960
1986
|
const range = selection.getRangeAt(0);
|
|
1961
1987
|
const rect = range.getBoundingClientRect();
|
|
1962
|
-
const editorRect = this.editorElement
|
|
1963
|
-
.nativeElement
|
|
1964
|
-
.getBoundingClientRect();
|
|
1988
|
+
const editorRect = this.editorElement.nativeElement.getBoundingClientRect();
|
|
1965
1989
|
this.showToolbar = true;
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
toolbarWidth -
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
left =
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
10;
|
|
1990
|
+
setTimeout(() => {
|
|
1991
|
+
const toolbar = document.querySelector('.toolbar');
|
|
1992
|
+
if (!toolbar)
|
|
1993
|
+
return;
|
|
1994
|
+
const toolbarWidth = toolbar.offsetWidth;
|
|
1995
|
+
// centered position
|
|
1996
|
+
let left = rect.left -
|
|
1997
|
+
editorRect.left +
|
|
1998
|
+
(rect.width / 2) -
|
|
1999
|
+
(toolbarWidth / 2);
|
|
2000
|
+
// left limit
|
|
2001
|
+
left = Math.max(10, left);
|
|
2002
|
+
// right limit
|
|
2003
|
+
const maxLeft = editorRect.width - toolbarWidth - 10;
|
|
2004
|
+
left = Math.min(left, maxLeft);
|
|
2005
|
+
// prevent negative value
|
|
2006
|
+
left = Math.max(10, left);
|
|
2007
|
+
this.toolbarX = left;
|
|
2008
|
+
this.toolbarY =
|
|
2009
|
+
rect.bottom -
|
|
2010
|
+
editorRect.top +
|
|
2011
|
+
10;
|
|
2012
|
+
});
|
|
1990
2013
|
}
|
|
1991
2014
|
toggleBold() {
|
|
1992
2015
|
this.editor
|
|
@@ -2127,7 +2150,7 @@ class TextEditorComponent {
|
|
|
2127
2150
|
.run();
|
|
2128
2151
|
}
|
|
2129
2152
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2130
|
-
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{min-height:120px;cursor:text;width:100%}.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}.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;padding:5px 10px;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}}\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 }] }); }
|
|
2153
|
+
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 black;border-radius:8px;box-sizing:border-box}::ng-deep .ProseMirror{outline:none;min-height:30px;width:100%;white-space:pre-wrap;word-break:break-word}::ng-deep .ProseMirror p{margin:0;line-height:1.5}::ng-deep .ProseMirror.editor-empty p:has(.ProseMirror-trailingBreak){margin-top:2rem!important;margin-bottom:0!important;line-height:0!important;min-height:0!important}::ng-deep .ProseMirror:not(.editor-empty) p:has(.ProseMirror-trailingBreak){margin-top:0!important;margin-bottom:0!important;line-height:0!important;min-height:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:1.5rem;margin:0}::ng-deep .ProseMirror li{margin-bottom:6px;line-height:1.5;text-align:inherit}::ng-deep .ProseMirror li p{margin:0;display:block}.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;line-height:normal!important}.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 }] }); }
|
|
2131
2154
|
}
|
|
2132
2155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
2133
2156
|
type: Component,
|
|
@@ -2139,7 +2162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2139
2162
|
MatSelectModule,
|
|
2140
2163
|
MatFormFieldModule,
|
|
2141
2164
|
ContenteditableValueAccessor
|
|
2142
|
-
], 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{min-height:120px;cursor:text;width:100%}.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}.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;padding:5px 10px;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}}\n"] }]
|
|
2165
|
+
], 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 black;border-radius:8px;box-sizing:border-box}::ng-deep .ProseMirror{outline:none;min-height:30px;width:100%;white-space:pre-wrap;word-break:break-word}::ng-deep .ProseMirror p{margin:0;line-height:1.5}::ng-deep .ProseMirror.editor-empty p:has(.ProseMirror-trailingBreak){margin-top:2rem!important;margin-bottom:0!important;line-height:0!important;min-height:0!important}::ng-deep .ProseMirror:not(.editor-empty) p:has(.ProseMirror-trailingBreak){margin-top:0!important;margin-bottom:0!important;line-height:0!important;min-height:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:1.5rem;margin:0}::ng-deep .ProseMirror li{margin-bottom:6px;line-height:1.5;text-align:inherit}::ng-deep .ProseMirror li p{margin:0;display:block}.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;line-height:normal!important}.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"] }]
|
|
2143
2166
|
}], propDecorators: { value: [{
|
|
2144
2167
|
type: Input
|
|
2145
2168
|
}], valueChange: [{
|
|
@@ -14397,7 +14420,7 @@ class TestimonialFullwidthComponent extends BaseSection {
|
|
|
14397
14420
|
return brightness < 128; // true = dark
|
|
14398
14421
|
}
|
|
14399
14422
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14400
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
14423
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
14401
14424
|
//directive
|
|
14402
14425
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
14403
14426
|
}
|
|
@@ -14431,7 +14454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14431
14454
|
ImageEditorDirective,
|
|
14432
14455
|
ObjectPositionDirective,
|
|
14433
14456
|
SpacingHorizontalDirective
|
|
14434
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
|
|
14457
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n data-bs-keyboard=\"false\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\" [ngStyle]=\"{'color': getIndicatorColor()}\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\">\r\n </li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n <div class=\"main-section\" [id]=\"data?.id\"\r\n [ngClass]=\"{'flex-lg-row-reverse' : style?.positionLayout?.value === 'left' , 'flex-lg-row' : style?.positionLayout?.value === 'right'}\">\r\n <div class=\"left\"\r\n [ngClass]=\"{'setHeight' : screenWidth > 475 , 'mb-1': screenWidth <= 475}\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item?.image?.url\" class=\"person-img\"\r\n [class]=\"data?.id+(item?.image?.id || '')\" [id]=\"data?.id\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\" *ngIf=\"item?.image?.url\">\r\n <img class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/753282c1776171503712178724315_3e307710-5dd9-4f94-a34b-c4971fd2d26b.jpg\"\r\n *ngIf=\"!item?.image?.url\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators li{background-color:currentColor;opacity:.5}.carousel-indicators .active{background-color:currentColor;opacity:1}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
|
|
14435
14458
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
14436
14459
|
type: Input
|
|
14437
14460
|
}], index: [{
|