nexheal-lib 0.0.28 → 0.0.30

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.
@@ -1495,35 +1495,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1495
1495
  args: ['checkboxContainer']
1496
1496
  }] } });
1497
1497
 
1498
- class ClickOutsideDirective {
1499
- clickOutside = new EventEmitter();
1500
- host = inject(ElementRef);
1501
- document = inject(DOCUMENT);
1502
- destroyRef = inject(DestroyRef);
1503
- constructor() {
1504
- fromEvent(this.document, 'click')
1505
- .pipe(takeUntilDestroyed(this.destroyRef))
1506
- .subscribe((event) => {
1507
- const clickedInside = this.host.nativeElement.contains(event.target);
1508
- if (!clickedInside) {
1509
- this.clickOutside.emit(event);
1510
- }
1511
- });
1512
- }
1513
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1514
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
1515
- }
1516
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
1517
- type: Directive,
1518
- args: [{
1519
- selector: '[clickOutside]',
1520
- standalone: true,
1521
- }]
1522
- }], ctorParameters: () => [], propDecorators: { clickOutside: [{
1523
- type: Output
1524
- }] } });
1525
-
1526
1498
  class ColorPicker {
1499
+ elementRef = inject(ElementRef);
1527
1500
  title;
1528
1501
  required = false;
1529
1502
  customClass = "";
@@ -1532,6 +1505,14 @@ class ColorPicker {
1532
1505
  defaultColor = "#ff0000";
1533
1506
  disabled = false;
1534
1507
  readonly = false;
1508
+ /** Show the chosen value as text next to the swatch. */
1509
+ showValue = false;
1510
+ /** Where the value text sits relative to the swatch/panel. */
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 = "";
1535
1516
  onChange = new EventEmitter();
1536
1517
  blurEvent = new EventEmitter();
1537
1518
  // current colour as HSB (the picker works in HSB space)
@@ -1594,6 +1575,19 @@ class ColorPicker {
1594
1575
  const c = this.hsbToRgb(this.h, this.s, this.b);
1595
1576
  return this.rgbToHex(c.r, c.g, c.b);
1596
1577
  }
1578
+ /** The chosen value as a display string, formatted to match `format`. */
1579
+ get displayValue() {
1580
+ const c = this.hsbToRgb(this.h, this.s, this.b);
1581
+ if (this.format === "rgb")
1582
+ return `rgb(${c.r}, ${c.g}, ${c.b})`;
1583
+ if (this.format === "hsb")
1584
+ return `hsb(${this.h}, ${this.s}%, ${this.b}%)`;
1585
+ return this.rgbToHex(c.r, c.g, c.b);
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
+ }
1597
1591
  get satHandleLeft() {
1598
1592
  return this.s;
1599
1593
  }
@@ -1621,6 +1615,19 @@ class ColorPicker {
1621
1615
  this.onTouchedFn();
1622
1616
  this.blurEvent.emit();
1623
1617
  }
1618
+ /**
1619
+ * Close the popup when a press starts outside the component. Uses
1620
+ * `mousedown`/`touchstart` (not `click`) so it stays reliable even when a
1621
+ * drag ends outside the panel or an outside element stops click propagation.
1622
+ */
1623
+ onDocumentPointerDown(event) {
1624
+ if (this.inline || !this.overlayVisible)
1625
+ return;
1626
+ const target = event.target;
1627
+ if (target && !this.elementRef.nativeElement.contains(target)) {
1628
+ this.close();
1629
+ }
1630
+ }
1624
1631
  // ---- Dragging on the saturation/brightness box and hue strip ----
1625
1632
  onSelectorDown(event) {
1626
1633
  if (this.disabled || this.readonly)
@@ -1808,23 +1815,23 @@ class ColorPicker {
1808
1815
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
1809
1816
  }
1810
1817
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
1811
- 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" }, outputs: { onChange: "onChange", blurEvent: "blurEvent" }, 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: [
1812
1819
  {
1813
1820
  provide: NG_VALUE_ACCESSOR,
1814
1821
  useExisting: forwardRef(() => ColorPicker),
1815
1822
  multi: true,
1816
1823
  },
1817
- ], ngImport: i0, template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\"\n (clickOutside)=\"close()\">\n @if (title) {\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n }\n\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</div>\n", styles: [".form-group.color-picker{position:relative}.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"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
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"] }] });
1818
1825
  }
1819
1826
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, decorators: [{
1820
1827
  type: Component,
1821
- args: [{ selector: "color-picker", standalone: true, imports: [CommonModule, ClickOutsideDirective], providers: [
1828
+ args: [{ selector: "color-picker", standalone: true, imports: [CommonModule], providers: [
1822
1829
  {
1823
1830
  provide: NG_VALUE_ACCESSOR,
1824
1831
  useExisting: forwardRef(() => ColorPicker),
1825
1832
  multi: true,
1826
1833
  },
1827
- ], template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\"\n (clickOutside)=\"close()\">\n @if (title) {\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\n }\n\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</div>\n", styles: [".form-group.color-picker{position:relative}.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"] }]
1828
1835
  }], propDecorators: { title: [{
1829
1836
  type: Input
1830
1837
  }], required: [{
@@ -1841,10 +1848,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
1841
1848
  type: Input
1842
1849
  }], readonly: [{
1843
1850
  type: Input
1851
+ }], showValue: [{
1852
+ type: Input
1853
+ }], valuePosition: [{
1854
+ type: Input
1855
+ }], variant: [{
1856
+ type: Input
1857
+ }], placeholder: [{
1858
+ type: Input
1844
1859
  }], onChange: [{
1845
1860
  type: Output
1846
1861
  }], blurEvent: [{
1847
1862
  type: Output
1863
+ }], onDocumentPointerDown: [{
1864
+ type: HostListener,
1865
+ args: ["document:mousedown", ["$event"]]
1866
+ }, {
1867
+ type: HostListener,
1868
+ args: ["document:touchstart", ["$event"]]
1848
1869
  }] } });
1849
1870
 
1850
1871
  class InputControl {
@@ -2084,6 +2105,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
2084
2105
  type: Input
2085
2106
  }] } });
2086
2107
 
2108
+ class ClickOutsideDirective {
2109
+ clickOutside = new EventEmitter();
2110
+ host = inject(ElementRef);
2111
+ document = inject(DOCUMENT);
2112
+ destroyRef = inject(DestroyRef);
2113
+ constructor() {
2114
+ fromEvent(this.document, 'click')
2115
+ .pipe(takeUntilDestroyed(this.destroyRef))
2116
+ .subscribe((event) => {
2117
+ const clickedInside = this.host.nativeElement.contains(event.target);
2118
+ if (!clickedInside) {
2119
+ this.clickOutside.emit(event);
2120
+ }
2121
+ });
2122
+ }
2123
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
2124
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
2125
+ }
2126
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
2127
+ type: Directive,
2128
+ args: [{
2129
+ selector: '[clickOutside]',
2130
+ standalone: true,
2131
+ }]
2132
+ }], ctorParameters: () => [], propDecorators: { clickOutside: [{
2133
+ type: Output
2134
+ }] } });
2135
+
2087
2136
  class MultiselectControl {
2088
2137
  cdRef;
2089
2138
  subscription = new Subscription();