nexheal-lib 0.0.29 → 0.0.31

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.
Files changed (4) hide show
  1. package/fesm2022/nexheal-lib.mjs +85 -31
  2. package/fesm2022/nexheal-lib.mjs.map +1 -1
  3. package/index.d.ts +31 -10
  4. package/package.json +1 -1
package/fesm2022/nexheal-lib.mjs CHANGED
@@ -1509,6 +1509,10 @@ class ColorPicker {
1509
1509
  showValue = false;
1510
1510
  /** Where the value text sits relative to the swatch/panel. */
1511
1511
  valuePosition = "right";
1512
+ /** Trigger look: a plain `swatch`, or an `input`-style field with the swatch inside it. */
1513
+ variant = "swatch";
1514
+ /** Placeholder shown in the `input` variant when there is no value yet. */
1515
+ placeholder = "";
1512
1516
  onChange = new EventEmitter();
1513
1517
  blurEvent = new EventEmitter();
1514
1518
  // current colour as HSB (the picker works in HSB space)
@@ -1580,6 +1584,10 @@ class ColorPicker {
1580
1584
  return `hsb(${this.h}, ${this.s}%, ${this.b}%)`;
1581
1585
  return this.rgbToHex(c.r, c.g, c.b);
1582
1586
  }
1587
+ /** Whether a value has actually been set (vs. just the default colour). */
1588
+ get hasValue() {
1589
+ return this.value !== null && this.value !== "";
1590
+ }
1583
1591
  get satHandleLeft() {
1584
1592
  return this.s;
1585
1593
  }
@@ -1807,13 +1815,13 @@ class ColorPicker {
1807
1815
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
1808
1816
  }
1809
1817
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
1810
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ColorPicker, isStandalone: true, selector: "color-picker", inputs: { title: "title", required: "required", customClass: "customClass", inline: "inline", format: "format", defaultColor: "defaultColor", disabled: "disabled", readonly: "readonly", showValue: "showValue", valuePosition: "valuePosition" }, outputs: { onChange: "onChange", blurEvent: "blurEvent" }, host: { listeners: { "document:mousedown": "onDocumentPointerDown($event)", "document:touchstart": "onDocumentPointerDown($event)" } }, providers: [
1818
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: ColorPicker, isStandalone: true, selector: "color-picker", inputs: { title: "title", required: "required", customClass: "customClass", inline: "inline", format: "format", defaultColor: "defaultColor", disabled: "disabled", readonly: "readonly", showValue: "showValue", valuePosition: "valuePosition", variant: "variant", placeholder: "placeholder" }, outputs: { onChange: "onChange", blurEvent: "blurEvent" }, host: { listeners: { "document:mousedown": "onDocumentPointerDown($event)", "document:touchstart": "onDocumentPointerDown($event)" } }, providers: [
1811
1819
  {
1812
1820
  provide: NG_VALUE_ACCESSOR,
1813
1821
  useExisting: forwardRef(() => ColorPicker),
1814
1822
  multi: true,
1815
1823
  },
1816
- ], ngImport: i0, template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\n @if (title) {\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n }\n\n <div class=\"cp-wrap\" [ngClass]=\"'cp-pos-' + valuePosition\">\n @if (!inline) {\n <button #trigger type=\"button\" class=\"cp-preview\" [style.backgroundColor]=\"previewColor\" [disabled]=\"disabled\"\n (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\"></button>\n }\n\n @if (inline || overlayVisible) {\n <div class=\"cp-panel\" [class.cp-inline]=\"inline\">\n <div class=\"cp-content\">\n <div #selector class=\"cp-selector\" [style.background]=\"hueBackground\" (mousedown)=\"onSelectorDown($event)\"\n (touchstart)=\"onSelectorDown($event)\">\n <div class=\"cp-selector-white\"></div>\n <div class=\"cp-selector-black\"></div>\n <div class=\"cp-selector-handle\" [style.left.%]=\"satHandleLeft\" [style.top.%]=\"briHandleTop\"></div>\n </div>\n <div #hue class=\"cp-hue\" (mousedown)=\"onHueDown($event)\" (touchstart)=\"onHueDown($event)\">\n <div class=\"cp-hue-handle\" [style.top.%]=\"hueHandleTop\"></div>\n </div>\n </div>\n </div>\n }\n\n @if (showValue) {\n <span class=\"cp-value\" (click)=\"toggle()\">{{ displayValue }}</span>\n }\n </div>\n</div>\n", styles: [".form-group.color-picker{position:relative}.form-group.color-picker .cp-wrap{gap:8px;display:inline-flex;align-items:center}.form-group.color-picker .cp-wrap.cp-pos-right{flex-direction:row}.form-group.color-picker .cp-wrap.cp-pos-left{flex-direction:row-reverse}.form-group.color-picker .cp-wrap.cp-pos-bottom{flex-direction:column;align-items:flex-start}.form-group.color-picker .cp-value{cursor:pointer;font-size:.95em;color:#495057;-webkit-user-select:none;user-select:none;text-transform:lowercase}.form-group.color-picker .cp-preview{width:2rem;height:2rem;padding:0;cursor:pointer;border-radius:4px;border:1px solid #d0d3da;transition:box-shadow .15s ease-in-out}.form-group.color-picker .cp-preview:focus-visible{outline:none;box-shadow:0 0 0 2px #3399ff80}.form-group.color-picker.disabled .cp-preview{cursor:not-allowed;opacity:.6}.form-group.color-picker.readonly .cp-preview{cursor:default;pointer-events:none}.form-group.color-picker .cp-panel{top:calc(100% + 4px);left:0;z-index:1000;position:absolute;padding:.5rem;border-radius:4px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.color-picker .cp-panel.cp-inline{position:static;box-shadow:none;padding:0;border:1px solid #e7e7e7}.form-group.color-picker .cp-content{gap:8px;display:flex;align-items:stretch}.form-group.color-picker .cp-selector{width:150px;height:150px;position:relative;cursor:crosshair;border-radius:3px;touch-action:none;overflow:hidden}.form-group.color-picker .cp-selector-white,.form-group.color-picker .cp-selector-black{inset:0;position:absolute;pointer-events:none}.form-group.color-picker .cp-selector-white{background:linear-gradient(to right,#fff,#fff0)}.form-group.color-picker .cp-selector-black{background:linear-gradient(to top,#000,#0000)}.form-group.color-picker .cp-selector-handle{width:12px;height:12px;position:absolute;border-radius:50%;pointer-events:none;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 1px 1px #0006}.form-group.color-picker .cp-hue{width:16px;height:150px;position:relative;cursor:pointer;border-radius:3px;touch-action:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.form-group.color-picker .cp-hue-handle{left:-2px;right:-2px;height:4px;position:absolute;pointer-events:none;border:1px solid #ffffff;transform:translateY(-50%);box-shadow:0 0 1px 1px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1824
+ ], ngImport: i0, template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\n @if (title) {\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n }\n\n <div class=\"cp-wrap\" [ngClass]=\"'cp-pos-' + valuePosition\" [class.cp-wrap-input]=\"variant === 'input'\">\n @if (!inline) {\n @if (variant === 'input') {\n <button type=\"button\" class=\"cp-field form-control\" [disabled]=\"disabled\"\n (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\">\n <span class=\"cp-field-swatch\" [style.backgroundColor]=\"previewColor\"></span>\n @if (hasValue) {\n <span class=\"cp-field-value\">{{ displayValue }}</span>\n } @else {\n <span class=\"cp-field-placeholder\">{{ placeholder }}</span>\n }\n </button>\n } @else {\n <button #trigger type=\"button\" class=\"cp-preview\" [style.backgroundColor]=\"previewColor\" [disabled]=\"disabled\"\n (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\"></button>\n }\n }\n\n @if (inline || overlayVisible) {\n <div class=\"cp-panel\" [class.cp-inline]=\"inline\">\n <div class=\"cp-content\">\n <div #selector class=\"cp-selector\" [style.background]=\"hueBackground\" (mousedown)=\"onSelectorDown($event)\"\n (touchstart)=\"onSelectorDown($event)\">\n <div class=\"cp-selector-white\"></div>\n <div class=\"cp-selector-black\"></div>\n <div class=\"cp-selector-handle\" [style.left.%]=\"satHandleLeft\" [style.top.%]=\"briHandleTop\"></div>\n </div>\n <div #hue class=\"cp-hue\" (mousedown)=\"onHueDown($event)\" (touchstart)=\"onHueDown($event)\">\n <div class=\"cp-hue-handle\" [style.top.%]=\"hueHandleTop\"></div>\n </div>\n </div>\n </div>\n }\n\n @if (showValue && variant !== 'input') {\n <span class=\"cp-value\" (click)=\"toggle()\">{{ displayValue }}</span>\n }\n </div>\n</div>\n", styles: [".form-group.color-picker{position:relative}.form-group.color-picker .cp-wrap{gap:8px;display:inline-flex;align-items:center}.form-group.color-picker .cp-wrap.cp-pos-right{flex-direction:row}.form-group.color-picker .cp-wrap.cp-pos-left{flex-direction:row-reverse}.form-group.color-picker .cp-wrap.cp-pos-bottom{flex-direction:column;align-items:flex-start}.form-group.color-picker .cp-value{cursor:pointer;font-size:.95em;color:#495057;-webkit-user-select:none;user-select:none;text-transform:lowercase}.form-group.color-picker .cp-wrap.cp-wrap-input{display:block;width:100%}.form-group.color-picker .cp-field{gap:8px;width:100%;display:flex;font:inherit;cursor:pointer;text-align:left;align-items:center}.form-group.color-picker .cp-field:disabled{cursor:not-allowed}.form-group.color-picker .cp-field-swatch{width:20px;height:20px;flex:0 0 20px;border-radius:4px;border:1px solid #d0d3da}.form-group.color-picker .cp-field-value{color:#495057;font-size:1.05em;text-transform:lowercase}.form-group.color-picker .cp-field-placeholder{color:#a8a8a8;font-size:1.025em}.form-group.color-picker .cp-preview{width:2rem;height:2rem;padding:0;cursor:pointer;border-radius:4px;border:1px solid #d0d3da;transition:box-shadow .15s ease-in-out}.form-group.color-picker .cp-preview:focus-visible{outline:none;box-shadow:0 0 0 2px #3399ff80}.form-group.color-picker.disabled .cp-preview{cursor:not-allowed;opacity:.6}.form-group.color-picker.readonly .cp-preview{cursor:default;pointer-events:none}.form-group.color-picker .cp-panel{top:calc(100% + 4px);left:0;z-index:1000;position:absolute;padding:.5rem;border-radius:4px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.color-picker .cp-panel.cp-inline{position:static;box-shadow:none;padding:0;border:1px solid #e7e7e7}.form-group.color-picker .cp-content{gap:8px;display:flex;align-items:stretch}.form-group.color-picker .cp-selector{width:150px;height:150px;position:relative;cursor:crosshair;border-radius:3px;touch-action:none;overflow:hidden}.form-group.color-picker .cp-selector-white,.form-group.color-picker .cp-selector-black{inset:0;position:absolute;pointer-events:none}.form-group.color-picker .cp-selector-white{background:linear-gradient(to right,#fff,#fff0)}.form-group.color-picker .cp-selector-black{background:linear-gradient(to top,#000,#0000)}.form-group.color-picker .cp-selector-handle{width:12px;height:12px;position:absolute;border-radius:50%;pointer-events:none;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 1px 1px #0006}.form-group.color-picker .cp-hue{width:16px;height:150px;position:relative;cursor:pointer;border-radius:3px;touch-action:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.form-group.color-picker .cp-hue-handle{left:-2px;right:-2px;height:4px;position:absolute;pointer-events:none;border:1px solid #ffffff;transform:translateY(-50%);box-shadow:0 0 1px 1px #0006}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1817
1825
  }
1818
1826
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, decorators: [{
1819
1827
  type: Component,
@@ -1823,7 +1831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1823
1831
  useExisting: forwardRef(() => ColorPicker),
1824
1832
  multi: true,
1825
1833
  },
1826
- ], template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\n @if (title) {\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n }\n\n <div class=\"cp-wrap\" [ngClass]=\"'cp-pos-' + valuePosition\">\n @if (!inline) {\n <button #trigger type=\"button\" class=\"cp-preview\" [style.backgroundColor]=\"previewColor\" [disabled]=\"disabled\"\n (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\"></button>\n }\n\n @if (inline || overlayVisible) {\n <div class=\"cp-panel\" [class.cp-inline]=\"inline\">\n <div class=\"cp-content\">\n <div #selector class=\"cp-selector\" [style.background]=\"hueBackground\" (mousedown)=\"onSelectorDown($event)\"\n (touchstart)=\"onSelectorDown($event)\">\n <div class=\"cp-selector-white\"></div>\n <div class=\"cp-selector-black\"></div>\n <div class=\"cp-selector-handle\" [style.left.%]=\"satHandleLeft\" [style.top.%]=\"briHandleTop\"></div>\n </div>\n <div #hue class=\"cp-hue\" (mousedown)=\"onHueDown($event)\" (touchstart)=\"onHueDown($event)\">\n <div class=\"cp-hue-handle\" [style.top.%]=\"hueHandleTop\"></div>\n </div>\n </div>\n </div>\n }\n\n @if (showValue) {\n <span class=\"cp-value\" (click)=\"toggle()\">{{ displayValue }}</span>\n }\n </div>\n</div>\n", styles: [".form-group.color-picker{position:relative}.form-group.color-picker .cp-wrap{gap:8px;display:inline-flex;align-items:center}.form-group.color-picker .cp-wrap.cp-pos-right{flex-direction:row}.form-group.color-picker .cp-wrap.cp-pos-left{flex-direction:row-reverse}.form-group.color-picker .cp-wrap.cp-pos-bottom{flex-direction:column;align-items:flex-start}.form-group.color-picker .cp-value{cursor:pointer;font-size:.95em;color:#495057;-webkit-user-select:none;user-select:none;text-transform:lowercase}.form-group.color-picker .cp-preview{width:2rem;height:2rem;padding:0;cursor:pointer;border-radius:4px;border:1px solid #d0d3da;transition:box-shadow .15s ease-in-out}.form-group.color-picker .cp-preview:focus-visible{outline:none;box-shadow:0 0 0 2px #3399ff80}.form-group.color-picker.disabled .cp-preview{cursor:not-allowed;opacity:.6}.form-group.color-picker.readonly .cp-preview{cursor:default;pointer-events:none}.form-group.color-picker .cp-panel{top:calc(100% + 4px);left:0;z-index:1000;position:absolute;padding:.5rem;border-radius:4px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.color-picker .cp-panel.cp-inline{position:static;box-shadow:none;padding:0;border:1px solid #e7e7e7}.form-group.color-picker .cp-content{gap:8px;display:flex;align-items:stretch}.form-group.color-picker .cp-selector{width:150px;height:150px;position:relative;cursor:crosshair;border-radius:3px;touch-action:none;overflow:hidden}.form-group.color-picker .cp-selector-white,.form-group.color-picker .cp-selector-black{inset:0;position:absolute;pointer-events:none}.form-group.color-picker .cp-selector-white{background:linear-gradient(to right,#fff,#fff0)}.form-group.color-picker .cp-selector-black{background:linear-gradient(to top,#000,#0000)}.form-group.color-picker .cp-selector-handle{width:12px;height:12px;position:absolute;border-radius:50%;pointer-events:none;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 1px 1px #0006}.form-group.color-picker .cp-hue{width:16px;height:150px;position:relative;cursor:pointer;border-radius:3px;touch-action:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.form-group.color-picker .cp-hue-handle{left:-2px;right:-2px;height:4px;position:absolute;pointer-events:none;border:1px solid #ffffff;transform:translateY(-50%);box-shadow:0 0 1px 1px #0006}\n"] }]
1834
+ ], template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\">\n @if (title) {\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n }\n\n <div class=\"cp-wrap\" [ngClass]=\"'cp-pos-' + valuePosition\" [class.cp-wrap-input]=\"variant === 'input'\">\n @if (!inline) {\n @if (variant === 'input') {\n <button type=\"button\" class=\"cp-field form-control\" [disabled]=\"disabled\"\n (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\">\n <span class=\"cp-field-swatch\" [style.backgroundColor]=\"previewColor\"></span>\n @if (hasValue) {\n <span class=\"cp-field-value\">{{ displayValue }}</span>\n } @else {\n <span class=\"cp-field-placeholder\">{{ placeholder }}</span>\n }\n </button>\n } @else {\n <button #trigger type=\"button\" class=\"cp-preview\" [style.backgroundColor]=\"previewColor\" [disabled]=\"disabled\"\n (click)=\"toggle()\" [attr.aria-label]=\"'Selected color ' + previewColor\"></button>\n }\n }\n\n @if (inline || overlayVisible) {\n <div class=\"cp-panel\" [class.cp-inline]=\"inline\">\n <div class=\"cp-content\">\n <div #selector class=\"cp-selector\" [style.background]=\"hueBackground\" (mousedown)=\"onSelectorDown($event)\"\n (touchstart)=\"onSelectorDown($event)\">\n <div class=\"cp-selector-white\"></div>\n <div class=\"cp-selector-black\"></div>\n <div class=\"cp-selector-handle\" [style.left.%]=\"satHandleLeft\" [style.top.%]=\"briHandleTop\"></div>\n </div>\n <div #hue class=\"cp-hue\" (mousedown)=\"onHueDown($event)\" (touchstart)=\"onHueDown($event)\">\n <div class=\"cp-hue-handle\" [style.top.%]=\"hueHandleTop\"></div>\n </div>\n </div>\n </div>\n }\n\n @if (showValue && variant !== 'input') {\n <span class=\"cp-value\" (click)=\"toggle()\">{{ displayValue }}</span>\n }\n </div>\n</div>\n", styles: [".form-group.color-picker{position:relative}.form-group.color-picker .cp-wrap{gap:8px;display:inline-flex;align-items:center}.form-group.color-picker .cp-wrap.cp-pos-right{flex-direction:row}.form-group.color-picker .cp-wrap.cp-pos-left{flex-direction:row-reverse}.form-group.color-picker .cp-wrap.cp-pos-bottom{flex-direction:column;align-items:flex-start}.form-group.color-picker .cp-value{cursor:pointer;font-size:.95em;color:#495057;-webkit-user-select:none;user-select:none;text-transform:lowercase}.form-group.color-picker .cp-wrap.cp-wrap-input{display:block;width:100%}.form-group.color-picker .cp-field{gap:8px;width:100%;display:flex;font:inherit;cursor:pointer;text-align:left;align-items:center}.form-group.color-picker .cp-field:disabled{cursor:not-allowed}.form-group.color-picker .cp-field-swatch{width:20px;height:20px;flex:0 0 20px;border-radius:4px;border:1px solid #d0d3da}.form-group.color-picker .cp-field-value{color:#495057;font-size:1.05em;text-transform:lowercase}.form-group.color-picker .cp-field-placeholder{color:#a8a8a8;font-size:1.025em}.form-group.color-picker .cp-preview{width:2rem;height:2rem;padding:0;cursor:pointer;border-radius:4px;border:1px solid #d0d3da;transition:box-shadow .15s ease-in-out}.form-group.color-picker .cp-preview:focus-visible{outline:none;box-shadow:0 0 0 2px #3399ff80}.form-group.color-picker.disabled .cp-preview{cursor:not-allowed;opacity:.6}.form-group.color-picker.readonly .cp-preview{cursor:default;pointer-events:none}.form-group.color-picker .cp-panel{top:calc(100% + 4px);left:0;z-index:1000;position:absolute;padding:.5rem;border-radius:4px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.color-picker .cp-panel.cp-inline{position:static;box-shadow:none;padding:0;border:1px solid #e7e7e7}.form-group.color-picker .cp-content{gap:8px;display:flex;align-items:stretch}.form-group.color-picker .cp-selector{width:150px;height:150px;position:relative;cursor:crosshair;border-radius:3px;touch-action:none;overflow:hidden}.form-group.color-picker .cp-selector-white,.form-group.color-picker .cp-selector-black{inset:0;position:absolute;pointer-events:none}.form-group.color-picker .cp-selector-white{background:linear-gradient(to right,#fff,#fff0)}.form-group.color-picker .cp-selector-black{background:linear-gradient(to top,#000,#0000)}.form-group.color-picker .cp-selector-handle{width:12px;height:12px;position:absolute;border-radius:50%;pointer-events:none;border:2px solid #ffffff;transform:translate(-50%,-50%);box-shadow:0 0 1px 1px #0006}.form-group.color-picker .cp-hue{width:16px;height:150px;position:relative;cursor:pointer;border-radius:3px;touch-action:none;background:linear-gradient(to bottom,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.form-group.color-picker .cp-hue-handle{left:-2px;right:-2px;height:4px;position:absolute;pointer-events:none;border:1px solid #ffffff;transform:translateY(-50%);box-shadow:0 0 1px 1px #0006}\n"] }]
1827
1835
  }], propDecorators: { title: [{
1828
1836
  type: Input
1829
1837
  }], required: [{
@@ -1844,6 +1852,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1844
1852
  type: Input
1845
1853
  }], valuePosition: [{
1846
1854
  type: Input
1855
+ }], variant: [{
1856
+ type: Input
1857
+ }], placeholder: [{
1858
+ type: Input
1847
1859
  }], onChange: [{
1848
1860
  type: Output
1849
1861
  }], blurEvent: [{
@@ -3081,7 +3093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
3081
3093
  * `formControlName` and `[formControl]`. The emitted value is the editor's
3082
3094
  * inner HTML string.
3083
3095
  */
3084
- class TextEditor {
3096
+ class RichTextEditor {
3085
3097
  header = true;
3086
3098
  media = true;
3087
3099
  link = true;
@@ -3097,6 +3109,20 @@ class TextEditor {
3097
3109
  viewInitialized = false;
3098
3110
  /** Last selection range observed inside the editor (restored before commands). */
3099
3111
  savedRange = null;
3112
+ // ---- Color palette ----
3113
+ /** Which color popover is open, if any. */
3114
+ colorMenu = null;
3115
+ /** Preset swatches shown in the color popovers. */
3116
+ palette = [
3117
+ '#000000', '#444444', '#666666', '#999999', '#cccccc', '#eeeeee', '#f5f5f5', '#ffffff',
3118
+ '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#9900ff', '#ff00ff',
3119
+ '#e6b8af', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#cfe2f3', '#d9d2e9', '#ead1dc',
3120
+ '#cc4125', '#e69138', '#f1c232', '#6aa84f', '#45818e', '#3d85c6', '#674ea7', '#a64d79',
3121
+ ];
3122
+ // ---- Link / image modal ----
3123
+ showModal = false;
3124
+ modalType = 'link';
3125
+ modalUrls = [''];
3100
3126
  ngAfterViewInit() {
3101
3127
  this.viewInitialized = true;
3102
3128
  this.editorRef.nativeElement.innerHTML = this.pendingValue;
@@ -3134,6 +3160,15 @@ class TextEditor {
3134
3160
  this.savedRange = range.cloneRange();
3135
3161
  }
3136
3162
  }
3163
+ /** Close the color popover when a press starts outside any color tool. */
3164
+ onDocumentMouseDown(event) {
3165
+ if (!this.colorMenu)
3166
+ return;
3167
+ const target = event.target;
3168
+ if (!target || !target.closest('.color-tool')) {
3169
+ this.colorMenu = null;
3170
+ }
3171
+ }
3137
3172
  // ---- Inline formatting ----
3138
3173
  applyInlineStyle(style) {
3139
3174
  this.exec(style);
@@ -3164,16 +3199,20 @@ class TextEditor {
3164
3199
  this.exec(command);
3165
3200
  }
3166
3201
  // ---- Color / highlight ----
3167
- applyColor(event) {
3168
- this.exec('foreColor', event.target.value, true);
3202
+ toggleColorMenu(type) {
3203
+ this.colorMenu = this.colorMenu === type ? null : type;
3169
3204
  }
3170
- applyHighlight(event) {
3171
- this.exec('hiliteColor', event.target.value, true);
3205
+ /** Apply a preset swatch. */
3206
+ pickColor(type, color) {
3207
+ this.exec(type === 'text' ? 'foreColor' : 'hiliteColor', color, true);
3208
+ this.colorMenu = null;
3209
+ }
3210
+ /** Apply a custom color from the native color input. */
3211
+ pickCustomColor(type, event) {
3212
+ const color = event.target.value;
3213
+ this.exec(type === 'text' ? 'foreColor' : 'hiliteColor', color, true);
3214
+ this.colorMenu = null;
3172
3215
  }
3173
- // ---- Modal state ----
3174
- showModal = false;
3175
- modalType = 'link';
3176
- modalUrls = [''];
3177
3216
  // ---- Links / images ----
3178
3217
  createLink() {
3179
3218
  this.openModal('link');
@@ -3194,20 +3233,32 @@ class TextEditor {
3194
3233
  this.modalUrls.splice(index, 1);
3195
3234
  }
3196
3235
  }
3236
+ /** A single URL is valid for the current modal type. */
3237
+ isValidUrl(url) {
3238
+ const u = (url || '').trim();
3239
+ if (!u || u === 'https://')
3240
+ return false;
3241
+ if (this.modalType === 'image') {
3242
+ return /^(https?:\/\/|data:image\/)[^\s]+$/i.test(u);
3243
+ }
3244
+ return /^https?:\/\/[^\s]+$/i.test(u);
3245
+ }
3246
+ /** Show a row as invalid only once the user has typed something wrong. */
3247
+ isRowInvalid(url) {
3248
+ const u = (url || '').trim();
3249
+ return !!u && u !== 'https://' && !this.isValidUrl(u);
3250
+ }
3251
+ /** Whether the modal has at least one valid URL (enables "Insert"). */
3252
+ get hasValidUrl() {
3253
+ return this.modalUrls.some((u) => this.isValidUrl(u));
3254
+ }
3197
3255
  confirmModal() {
3198
- const urls = this.modalUrls.map(u => u.trim()).filter(u => u && u !== 'https://');
3199
- if (urls.length === 0) {
3200
- this.cancelModal();
3256
+ const urls = this.modalUrls.filter((u) => this.isValidUrl(u)).map((u) => u.trim());
3257
+ if (urls.length === 0)
3201
3258
  return;
3202
- }
3203
3259
  this.showModal = false;
3204
3260
  for (const url of urls) {
3205
- if (this.modalType === 'link') {
3206
- this.exec('createLink', url);
3207
- }
3208
- else {
3209
- this.exec('insertImage', url);
3210
- }
3261
+ this.exec(this.modalType === 'link' ? 'createLink' : 'insertImage', url);
3211
3262
  }
3212
3263
  this.modalUrls = [''];
3213
3264
  }
@@ -3251,24 +3302,24 @@ class TextEditor {
3251
3302
  selection.removeAllRanges();
3252
3303
  selection.addRange(this.savedRange);
3253
3304
  }
3254
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
3255
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: TextEditor, isStandalone: true, selector: "app-text-editor", inputs: { header: "header", media: "media", link: "link", placeholder: "placeholder", readonly: "readonly" }, host: { listeners: { "document:selectionchange": "saveSelection()" } }, providers: [
3305
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
3306
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: RichTextEditor, isStandalone: true, selector: "rich-text-editor", inputs: { header: "header", media: "media", link: "link", placeholder: "placeholder", readonly: "readonly" }, host: { listeners: { "document:selectionchange": "saveSelection()", "document:mousedown": "onDocumentMouseDown($event)" } }, providers: [
3256
3307
  {
3257
3308
  provide: NG_VALUE_ACCESSOR,
3258
- useExisting: forwardRef(() => TextEditor),
3309
+ useExisting: forwardRef(() => RichTextEditor),
3259
3310
  multi: true,
3260
3311
  },
3261
- ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n <i class=\"he he-bold\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n <i class=\"he he-italics\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n <i class=\"he he-underline\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"header\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n <i class=\"he he-heading-1\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n <i class=\"he he-heading-2\"></i>\n </button>\n </div>\n <div class=\"toolbar-items more-gap\">\n <div class=\"input-wrap\" title=\"Text Color\" (mousedown)=\"$event.preventDefault()\">\n <i class=\"he he-text-drop\"></i>\n <input type=\"color\" (input)=\"applyColor($event)\" />\n </div>\n <div class=\"input-wrap\" title=\"Background Color\" (mousedown)=\"$event.preventDefault()\">\n <i class=\"he he-background-drop\"></i>\n <input type=\"color\" (input)=\"applyHighlight($event)\" />\n </div>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n <i class=\"he he-left-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n <i class=\"he he-center-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n <i class=\"he he-right-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n <i class=\"he he-justify\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n <i class=\"he he-text-indent-left\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n <i class=\"he he-text-indent-right\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"media\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n <i class=\"he he-unordered-list\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n <i class=\"he he-ordered-list\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"link\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n <i class=\"he he-link\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n <i class=\"he he-image\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n <i class=\"he he-undo\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n <i class=\"he he-redo\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"Clear Formatting\">\n <i class=\"he he-text-clear-format\"></i>\n </button>\n </div>\n </div>\n\n <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\n [attr.data-placeholder]=\"placeholder\">\n </div>\n\n <!-- Custom Modal for Link/Image URL -->\n <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\n <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"editor-modal-header\">\n <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n <div class=\"editor-modal-body\">\n <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n <input type=\"text\" class=\"url-input\"\n [ngModel]=\"modalUrls[i]\"\n (ngModelChange)=\"modalUrls[i] = $event\"\n [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n + Add more\n </button>\n </div>\n <div class=\"editor-modal-footer\">\n <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n <button type=\"button\" class=\"modal-btn confirm-btn\" (click)=\"confirmModal()\">Insert</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-input{flex:1;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:6px 8px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3312
+ ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n <i class=\"he he-bold\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n <i class=\"he he-italics\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n <i class=\"he he-underline\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"header\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n <i class=\"he he-heading-1\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n <i class=\"he he-heading-2\"></i>\n </button>\n </div>\n <div class=\"toolbar-items more-gap\">\n <div class=\"color-tool\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('text')\" title=\"Text Color\">\n <i class=\"he he-text-drop\"></i>\n </button>\n <div class=\"color-popover\" *ngIf=\"colorMenu === 'text'\">\n <div class=\"color-grid\">\n <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('text', c)\"></button>\n </div>\n <label class=\"color-custom\">\n <span>Custom</span>\n <input type=\"color\" (change)=\"pickCustomColor('text', $event)\" />\n </label>\n </div>\n </div>\n <div class=\"color-tool\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('background')\" title=\"Background Color\">\n <i class=\"he he-background-drop\"></i>\n </button>\n <div class=\"color-popover\" *ngIf=\"colorMenu === 'background'\">\n <div class=\"color-grid\">\n <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('background', c)\"></button>\n </div>\n <label class=\"color-custom\">\n <span>Custom</span>\n <input type=\"color\" (change)=\"pickCustomColor('background', $event)\" />\n </label>\n </div>\n </div>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n <i class=\"he he-left-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n <i class=\"he he-center-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n <i class=\"he he-right-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n <i class=\"he he-justify\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n <i class=\"he he-text-indent-left\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n <i class=\"he he-text-indent-right\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"media\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n <i class=\"he he-unordered-list\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n <i class=\"he he-ordered-list\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"link\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n <i class=\"he he-link\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n <i class=\"he he-image\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n <i class=\"he he-undo\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n <i class=\"he he-redo\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"Clear Formatting\">\n <i class=\"he he-text-clear-format\"></i>\n </button>\n </div>\n </div>\n\n <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\n [attr.data-placeholder]=\"placeholder\">\n </div>\n\n <!-- Custom Modal for Link/Image URL -->\n <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\n <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"editor-modal-header\">\n <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n <div class=\"editor-modal-body\">\n <div class=\"url-list\">\n <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n <div class=\"url-field\">\n <input type=\"text\" class=\"url-input\" [class.invalid]=\"isRowInvalid(modalUrls[i])\"\n [ngModel]=\"modalUrls[i]\"\n (ngModelChange)=\"modalUrls[i] = $event\"\n [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n <span class=\"url-error\" *ngIf=\"isRowInvalid(modalUrls[i])\">Enter a valid URL</span>\n </div>\n <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n </div>\n <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n + Add more\n </button>\n </div>\n <div class=\"editor-modal-footer\">\n <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n <button type=\"button\" class=\"modal-btn confirm-btn\" [disabled]=\"!hasValidUrl\" (click)=\"confirmModal()\">Insert</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button{cursor:pointer;min-width:25px;min-height:20px;border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items button:hover i{color:#000}.text-editor .toolbar .toolbar-items .color-tool{position:relative}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .color-popover{top:calc(100% + 6px);left:0;z-index:30;padding:8px;position:absolute;background:#fff;border-radius:6px;border:1px solid #e0e0e0;box-shadow:0 4px 16px #00000026}.text-editor .color-popover .color-grid{gap:4px;display:grid;grid-template-columns:repeat(8,18px)}.text-editor .color-popover .color-swatch{width:18px;height:18px;padding:0;cursor:pointer;border-radius:3px;border:1px solid rgba(0,0,0,.15);transition:transform .1s ease}.text-editor .color-popover .color-swatch:hover{transform:scale(1.15)}.text-editor .color-popover .color-custom{gap:8px;display:flex;margin-top:8px;font-size:12px;color:#555;cursor:pointer;align-items:center;justify-content:space-between}.text-editor .color-popover .color-custom input[type=color]{width:28px;height:20px;padding:0;cursor:pointer;background:none;border:1px solid #cccccc}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-list{max-height:200px;overflow-y:auto;margin-bottom:10px;padding-right:2px}.text-editor .editor-modal-body .url-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-field{flex:1;display:flex;flex-direction:column;gap:2px}.text-editor .editor-modal-body .url-input{width:100%;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-input.invalid{border-color:#e04040}.text-editor .editor-modal-body .url-input.invalid:focus{border-color:#e04040;box-shadow:0 0 0 2px #e0404026}.text-editor .editor-modal-body .url-error{font-size:11px;color:#e04040}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:8px 9px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}.text-editor .editor-modal-footer .confirm-btn:disabled{opacity:.5;cursor:not-allowed}.text-editor .editor-modal-footer .confirm-btn:disabled:hover{background:#007bff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3262
3313
  }
3263
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextEditor, decorators: [{
3314
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextEditor, decorators: [{
3264
3315
  type: Component,
3265
- args: [{ selector: 'app-text-editor', standalone: true, imports: [CommonModule, FormsModule], providers: [
3316
+ args: [{ selector: 'rich-text-editor', standalone: true, imports: [CommonModule, FormsModule], providers: [
3266
3317
  {
3267
3318
  provide: NG_VALUE_ACCESSOR,
3268
- useExisting: forwardRef(() => TextEditor),
3319
+ useExisting: forwardRef(() => RichTextEditor),
3269
3320
  multi: true,
3270
3321
  },
3271
- ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n <i class=\"he he-bold\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n <i class=\"he he-italics\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n <i class=\"he he-underline\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"header\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n <i class=\"he he-heading-1\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n <i class=\"he he-heading-2\"></i>\n </button>\n </div>\n <div class=\"toolbar-items more-gap\">\n <div class=\"input-wrap\" title=\"Text Color\" (mousedown)=\"$event.preventDefault()\">\n <i class=\"he he-text-drop\"></i>\n <input type=\"color\" (input)=\"applyColor($event)\" />\n </div>\n <div class=\"input-wrap\" title=\"Background Color\" (mousedown)=\"$event.preventDefault()\">\n <i class=\"he he-background-drop\"></i>\n <input type=\"color\" (input)=\"applyHighlight($event)\" />\n </div>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n <i class=\"he he-left-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n <i class=\"he he-center-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n <i class=\"he he-right-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n <i class=\"he he-justify\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n <i class=\"he he-text-indent-left\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n <i class=\"he he-text-indent-right\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"media\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n <i class=\"he he-unordered-list\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n <i class=\"he he-ordered-list\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"link\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n <i class=\"he he-link\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n <i class=\"he he-image\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n <i class=\"he he-undo\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n <i class=\"he he-redo\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"Clear Formatting\">\n <i class=\"he he-text-clear-format\"></i>\n </button>\n </div>\n </div>\n\n <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\n [attr.data-placeholder]=\"placeholder\">\n </div>\n\n <!-- Custom Modal for Link/Image URL -->\n <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\n <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"editor-modal-header\">\n <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n <div class=\"editor-modal-body\">\n <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n <input type=\"text\" class=\"url-input\"\n [ngModel]=\"modalUrls[i]\"\n (ngModelChange)=\"modalUrls[i] = $event\"\n [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n + Add more\n </button>\n </div>\n <div class=\"editor-modal-footer\">\n <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n <button type=\"button\" class=\"modal-btn confirm-btn\" (click)=\"confirmModal()\">Insert</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button,.text-editor .toolbar .toolbar-items .input-wrap{cursor:pointer;min-width:25px;min-height:20px}.text-editor .toolbar .toolbar-items button:hover i,.text-editor .toolbar .toolbar-items .input-wrap:hover i{color:#000}.text-editor .toolbar .toolbar-items button{border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items .input-wrap{gap:2px;display:flex;cursor:pointer;align-items:center;flex-direction:column;justify-content:center}.text-editor .toolbar .toolbar-items .input-wrap input[type=color]{width:80%;padding:0;height:2px;border:none;cursor:inherit}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-input{flex:1;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:6px 8px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}\n"] }]
3322
+ ], template: "<div class=\"text-editor\" [ngClass]=\"{'readonly': readonly || disabled}\">\n <div class=\"toolbar\" *ngIf=\"!readonly && !disabled\">\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('bold')\" title=\"Bold\">\n <i class=\"he he-bold\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('italic')\" title=\"Italic\">\n <i class=\"he he-italics\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyInlineStyle('underline')\" title=\"Underline\">\n <i class=\"he he-underline\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"header\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h1')\" title=\"Header 1\">\n <i class=\"he he-heading-1\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyBlockFormat('h2')\" title=\"Header 2\">\n <i class=\"he he-heading-2\"></i>\n </button>\n </div>\n <div class=\"toolbar-items more-gap\">\n <div class=\"color-tool\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('text')\" title=\"Text Color\">\n <i class=\"he he-text-drop\"></i>\n </button>\n <div class=\"color-popover\" *ngIf=\"colorMenu === 'text'\">\n <div class=\"color-grid\">\n <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('text', c)\"></button>\n </div>\n <label class=\"color-custom\">\n <span>Custom</span>\n <input type=\"color\" (change)=\"pickCustomColor('text', $event)\" />\n </label>\n </div>\n </div>\n <div class=\"color-tool\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleColorMenu('background')\" title=\"Background Color\">\n <i class=\"he he-background-drop\"></i>\n </button>\n <div class=\"color-popover\" *ngIf=\"colorMenu === 'background'\">\n <div class=\"color-grid\">\n <button type=\"button\" class=\"color-swatch\" *ngFor=\"let c of palette\" [style.backgroundColor]=\"c\"\n [title]=\"c\" (mousedown)=\"$event.preventDefault()\" (click)=\"pickColor('background', c)\"></button>\n </div>\n <label class=\"color-custom\">\n <span>Custom</span>\n <input type=\"color\" (change)=\"pickCustomColor('background', $event)\" />\n </label>\n </div>\n </div>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('left')\" title=\"Justify Left\">\n <i class=\"he he-left-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('center')\" title=\"Justify Center\">\n <i class=\"he he-center-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('right')\" title=\"Justify Right\">\n <i class=\"he he-right-align\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"setAlignment('justify')\" title=\"Justify Full\">\n <i class=\"he he-justify\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"indent()\" title=\"Indent\">\n <i class=\"he he-text-indent-left\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"outdent()\" title=\"Outdent\">\n <i class=\"he he-text-indent-right\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"media\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ul')\" title=\"Unordered list\">\n <i class=\"he he-unordered-list\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"applyList('ol')\" title=\"Ordered list\">\n <i class=\"he he-ordered-list\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\" *ngIf=\"link\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"createLink()\" title=\"Link\">\n <i class=\"he he-link\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"insertImage()\" title=\"Image\">\n <i class=\"he he-image\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"undo()\" title=\"Undo\">\n <i class=\"he he-undo\"></i>\n </button>\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"redo()\" title=\"Redo\">\n <i class=\"he he-redo\"></i>\n </button>\n </div>\n <div class=\"toolbar-items\">\n <button type=\"button\" (mousedown)=\"$event.preventDefault()\" (click)=\"clearFormatting()\" title=\"Clear Formatting\">\n <i class=\"he he-text-clear-format\"></i>\n </button>\n </div>\n </div>\n\n <div #editor class=\"editor-content\" [attr.contenteditable]=\"(readonly || disabled) ? 'false' : 'true'\" (input)=\"onInput()\" (blur)=\"onTouched()\"\n [attr.data-placeholder]=\"placeholder\">\n </div>\n\n <!-- Custom Modal for Link/Image URL -->\n <div class=\"editor-modal-overlay\" *ngIf=\"showModal\" (click)=\"cancelModal()\">\n <div class=\"editor-modal\" (click)=\"$event.stopPropagation()\">\n <div class=\"editor-modal-header\">\n <span>{{ modalType === 'link' ? 'Insert Link' : 'Insert Image' }}</span>\n <button type=\"button\" class=\"editor-modal-close\" (click)=\"cancelModal()\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n <div class=\"editor-modal-body\">\n <div class=\"url-list\">\n <div class=\"url-row\" *ngFor=\"let url of modalUrls; let i = index; trackBy: trackByIndex\">\n <div class=\"url-field\">\n <input type=\"text\" class=\"url-input\" [class.invalid]=\"isRowInvalid(modalUrls[i])\"\n [ngModel]=\"modalUrls[i]\"\n (ngModelChange)=\"modalUrls[i] = $event\"\n [placeholder]=\"modalType === 'link' ? 'https://example.com' : 'https://example.com/image.png'\" />\n <span class=\"url-error\" *ngIf=\"isRowInvalid(modalUrls[i])\">Enter a valid URL</span>\n </div>\n <button type=\"button\" class=\"url-remove-btn\" *ngIf=\"modalUrls.length > 1\" (click)=\"removeUrlRow(i)\" title=\"Remove\">\n <i class=\"he he-close\"></i>\n </button>\n </div>\n </div>\n <button type=\"button\" class=\"url-add-btn\" (click)=\"addUrlRow()\">\n + Add more\n </button>\n </div>\n <div class=\"editor-modal-footer\">\n <button type=\"button\" class=\"modal-btn cancel-btn\" (click)=\"cancelModal()\">Cancel</button>\n <button type=\"button\" class=\"modal-btn confirm-btn\" [disabled]=\"!hasValidUrl\" (click)=\"confirmModal()\">Insert</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".text-editor{border:1px solid #ccc}.text-editor .toolbar{gap:.75rem;display:flex;flex-wrap:wrap;background:#f8f8f8;padding:.75rem;border-bottom:1px solid #cccccc}.text-editor .toolbar .toolbar-items{height:18px;display:flex;flex-wrap:wrap;align-items:center;padding-right:.75rem;border-right:1px solid #969090}.text-editor .toolbar .toolbar-items button{cursor:pointer;min-width:25px;min-height:20px;border:0;display:grid;place-items:center;background:transparent}.text-editor .toolbar .toolbar-items button:hover{background:#eee}.text-editor .toolbar .toolbar-items button:hover i{color:#000}.text-editor .toolbar .toolbar-items .color-tool{position:relative}.text-editor .toolbar .toolbar-items i{font-size:13px;color:#3c4148}.text-editor .toolbar .toolbar-items i.he-bold{font-weight:600}.text-editor .toolbar .toolbar-items i.he-underline{font-size:14px}.text-editor .toolbar .toolbar-items i.he-text-drop{font-size:12px}.text-editor .toolbar .toolbar-items i.he-background-drop{top:-1px;font-size:12px}.text-editor .toolbar .toolbar-items i.he-heading-1,.text-editor .toolbar .toolbar-items i.he-link,.text-editor .toolbar .toolbar-items i.he-left-align,.text-editor .toolbar .toolbar-items i.he-center-align,.text-editor .toolbar .toolbar-items i.he-right-align,.text-editor .toolbar .toolbar-items i.he-justify{font-size:16px}.text-editor .toolbar .toolbar-items i.he-text-indent-left,.text-editor .toolbar .toolbar-items i.he-text-indent-right{font-size:17px}.text-editor .toolbar .toolbar-items i.he-heading-2{top:1px;font-size:16px}.text-editor .toolbar .toolbar-items i.he-unordered-list,.text-editor .toolbar .toolbar-items i.he-ordered-list{top:-1px;font-size:20px}.text-editor .toolbar .toolbar-items i.he-image{font-size:15px;font-weight:600}.text-editor .toolbar .toolbar-items i.he-redo,.text-editor .toolbar .toolbar-items i.he-undo{top:-1px;font-size:14px}.text-editor .toolbar .toolbar-items.more-gap{gap:5px}.text-editor .toolbar .toolbar-items:last-child{border-right:0}.text-editor .color-popover{top:calc(100% + 6px);left:0;z-index:30;padding:8px;position:absolute;background:#fff;border-radius:6px;border:1px solid #e0e0e0;box-shadow:0 4px 16px #00000026}.text-editor .color-popover .color-grid{gap:4px;display:grid;grid-template-columns:repeat(8,18px)}.text-editor .color-popover .color-swatch{width:18px;height:18px;padding:0;cursor:pointer;border-radius:3px;border:1px solid rgba(0,0,0,.15);transition:transform .1s ease}.text-editor .color-popover .color-swatch:hover{transform:scale(1.15)}.text-editor .color-popover .color-custom{gap:8px;display:flex;margin-top:8px;font-size:12px;color:#555;cursor:pointer;align-items:center;justify-content:space-between}.text-editor .color-popover .color-custom input[type=color]{width:28px;height:20px;padding:0;cursor:pointer;background:none;border:1px solid #cccccc}.text-editor .editor-content{outline:none;min-height:200px;position:relative;background:#fff;padding:.75rem}.text-editor .editor-content[data-placeholder]:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;position:absolute;left:.75rem;top:.75rem}.text-editor .editor-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:10000}.text-editor .editor-modal{background:#fff;border-radius:8px;box-shadow:0 8px 32px #0003;width:420px;max-width:90vw;animation:modalFadeIn .2s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.text-editor .editor-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e8e8e8}.text-editor .editor-modal-header span{font-size:15px;font-weight:600;color:#1a1a1a}.text-editor .editor-modal-close{background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;display:grid;place-items:center}.text-editor .editor-modal-close i{font-size:14px;color:#666}.text-editor .editor-modal-close:hover{background:#f0f0f0}.text-editor .editor-modal-close:hover i{color:#333}.text-editor .editor-modal-body{padding:16px 18px}.text-editor .editor-modal-body .url-list{max-height:200px;overflow-y:auto;margin-bottom:10px;padding-right:2px}.text-editor .editor-modal-body .url-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}.text-editor .editor-modal-body .url-field{flex:1;display:flex;flex-direction:column;gap:2px}.text-editor .editor-modal-body .url-input{width:100%;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;color:#333;outline:none;transition:border-color .2s}.text-editor .editor-modal-body .url-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff26}.text-editor .editor-modal-body .url-input::placeholder{color:#aaa}.text-editor .editor-modal-body .url-input.invalid{border-color:#e04040}.text-editor .editor-modal-body .url-input.invalid:focus{border-color:#e04040;box-shadow:0 0 0 2px #e0404026}.text-editor .editor-modal-body .url-error{font-size:11px;color:#e04040}.text-editor .editor-modal-body .url-remove-btn{background:none;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:8px 9px;display:grid;place-items:center;transition:all .15s}.text-editor .editor-modal-body .url-remove-btn i{font-size:11px;color:#999}.text-editor .editor-modal-body .url-remove-btn:hover{background:#fff0f0;border-color:#faa}.text-editor .editor-modal-body .url-remove-btn:hover i{color:#e04040}.text-editor .editor-modal-body .url-add-btn{background:none;border:1px dashed #c0c0c0;border-radius:6px;cursor:pointer;padding:6px 14px;font-size:12px;color:#007bff;transition:all .15s;width:100%}.text-editor .editor-modal-body .url-add-btn:hover{background:#f0f8ff;border-color:#007bff}.text-editor .editor-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 18px;border-top:1px solid #e8e8e8}.text-editor .editor-modal-footer .modal-btn{padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid transparent}.text-editor .editor-modal-footer .cancel-btn{background:#f5f5f5;color:#555;border-color:#ddd}.text-editor .editor-modal-footer .cancel-btn:hover{background:#eaeaea}.text-editor .editor-modal-footer .confirm-btn{background:#007bff;color:#fff}.text-editor .editor-modal-footer .confirm-btn:hover{background:#0069d9}.text-editor .editor-modal-footer .confirm-btn:disabled{opacity:.5;cursor:not-allowed}.text-editor .editor-modal-footer .confirm-btn:disabled:hover{background:#007bff}\n"] }]
3272
3323
  }], propDecorators: { header: [{
3273
3324
  type: Input
3274
3325
  }], media: [{
@@ -3285,6 +3336,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
3285
3336
  }], saveSelection: [{
3286
3337
  type: HostListener,
3287
3338
  args: ['document:selectionchange']
3339
+ }], onDocumentMouseDown: [{
3340
+ type: HostListener,
3341
+ args: ['document:mousedown', ['$event']]
3288
3342
  }] } });
3289
3343
 
3290
3344
  class TextareaControl {
@@ -3399,5 +3453,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
3399
3453
  * Generated bundle index. Do not edit.
3400
3454
  */
3401
3455
 
3402
- export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, SelectControl, SwitchControl, TextEditor, TextareaControl };
3456
+ export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, RichTextEditor, SelectControl, SwitchControl, TextareaControl };
3403
3457
  //# sourceMappingURL=nexheal-lib.mjs.map