nexheal-lib 0.0.28 → 0.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/nexheal-lib.mjs +69 -32
- package/fesm2022/nexheal-lib.mjs.map +1 -1
- package/index.d.ts +14 -1
- package/package.json +1 -1
package/fesm2022/nexheal-lib.mjs
CHANGED
|
@@ -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,10 @@ 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";
|
|
1535
1512
|
onChange = new EventEmitter();
|
|
1536
1513
|
blurEvent = new EventEmitter();
|
|
1537
1514
|
// current colour as HSB (the picker works in HSB space)
|
|
@@ -1594,6 +1571,15 @@ class ColorPicker {
|
|
|
1594
1571
|
const c = this.hsbToRgb(this.h, this.s, this.b);
|
|
1595
1572
|
return this.rgbToHex(c.r, c.g, c.b);
|
|
1596
1573
|
}
|
|
1574
|
+
/** The chosen value as a display string, formatted to match `format`. */
|
|
1575
|
+
get displayValue() {
|
|
1576
|
+
const c = this.hsbToRgb(this.h, this.s, this.b);
|
|
1577
|
+
if (this.format === "rgb")
|
|
1578
|
+
return `rgb(${c.r}, ${c.g}, ${c.b})`;
|
|
1579
|
+
if (this.format === "hsb")
|
|
1580
|
+
return `hsb(${this.h}, ${this.s}%, ${this.b}%)`;
|
|
1581
|
+
return this.rgbToHex(c.r, c.g, c.b);
|
|
1582
|
+
}
|
|
1597
1583
|
get satHandleLeft() {
|
|
1598
1584
|
return this.s;
|
|
1599
1585
|
}
|
|
@@ -1621,6 +1607,19 @@ class ColorPicker {
|
|
|
1621
1607
|
this.onTouchedFn();
|
|
1622
1608
|
this.blurEvent.emit();
|
|
1623
1609
|
}
|
|
1610
|
+
/**
|
|
1611
|
+
* Close the popup when a press starts outside the component. Uses
|
|
1612
|
+
* `mousedown`/`touchstart` (not `click`) so it stays reliable even when a
|
|
1613
|
+
* drag ends outside the panel or an outside element stops click propagation.
|
|
1614
|
+
*/
|
|
1615
|
+
onDocumentPointerDown(event) {
|
|
1616
|
+
if (this.inline || !this.overlayVisible)
|
|
1617
|
+
return;
|
|
1618
|
+
const target = event.target;
|
|
1619
|
+
if (target && !this.elementRef.nativeElement.contains(target)) {
|
|
1620
|
+
this.close();
|
|
1621
|
+
}
|
|
1622
|
+
}
|
|
1624
1623
|
// ---- Dragging on the saturation/brightness box and hue strip ----
|
|
1625
1624
|
onSelectorDown(event) {
|
|
1626
1625
|
if (this.disabled || this.readonly)
|
|
@@ -1808,23 +1807,23 @@ class ColorPicker {
|
|
|
1808
1807
|
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
|
1809
1808
|
}
|
|
1810
1809
|
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: [
|
|
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: [
|
|
1812
1811
|
{
|
|
1813
1812
|
provide: NG_VALUE_ACCESSOR,
|
|
1814
1813
|
useExisting: forwardRef(() => ColorPicker),
|
|
1815
1814
|
multi: true,
|
|
1816
1815
|
},
|
|
1817
|
-
], ngImport: i0, template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\"
|
|
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"] }] });
|
|
1818
1817
|
}
|
|
1819
1818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, decorators: [{
|
|
1820
1819
|
type: Component,
|
|
1821
|
-
args: [{ selector: "color-picker", standalone: true, imports: [CommonModule
|
|
1820
|
+
args: [{ selector: "color-picker", standalone: true, imports: [CommonModule], providers: [
|
|
1822
1821
|
{
|
|
1823
1822
|
provide: NG_VALUE_ACCESSOR,
|
|
1824
1823
|
useExisting: forwardRef(() => ColorPicker),
|
|
1825
1824
|
multi: true,
|
|
1826
1825
|
},
|
|
1827
|
-
], template: "<div class=\"form-group color-picker\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" [class.disabled]=\"disabled\"
|
|
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"] }]
|
|
1828
1827
|
}], propDecorators: { title: [{
|
|
1829
1828
|
type: Input
|
|
1830
1829
|
}], required: [{
|
|
@@ -1841,10 +1840,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
1841
1840
|
type: Input
|
|
1842
1841
|
}], readonly: [{
|
|
1843
1842
|
type: Input
|
|
1843
|
+
}], showValue: [{
|
|
1844
|
+
type: Input
|
|
1845
|
+
}], valuePosition: [{
|
|
1846
|
+
type: Input
|
|
1844
1847
|
}], onChange: [{
|
|
1845
1848
|
type: Output
|
|
1846
1849
|
}], blurEvent: [{
|
|
1847
1850
|
type: Output
|
|
1851
|
+
}], onDocumentPointerDown: [{
|
|
1852
|
+
type: HostListener,
|
|
1853
|
+
args: ["document:mousedown", ["$event"]]
|
|
1854
|
+
}, {
|
|
1855
|
+
type: HostListener,
|
|
1856
|
+
args: ["document:touchstart", ["$event"]]
|
|
1848
1857
|
}] } });
|
|
1849
1858
|
|
|
1850
1859
|
class InputControl {
|
|
@@ -2084,6 +2093,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2084
2093
|
type: Input
|
|
2085
2094
|
}] } });
|
|
2086
2095
|
|
|
2096
|
+
class ClickOutsideDirective {
|
|
2097
|
+
clickOutside = new EventEmitter();
|
|
2098
|
+
host = inject(ElementRef);
|
|
2099
|
+
document = inject(DOCUMENT);
|
|
2100
|
+
destroyRef = inject(DestroyRef);
|
|
2101
|
+
constructor() {
|
|
2102
|
+
fromEvent(this.document, 'click')
|
|
2103
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
2104
|
+
.subscribe((event) => {
|
|
2105
|
+
const clickedInside = this.host.nativeElement.contains(event.target);
|
|
2106
|
+
if (!clickedInside) {
|
|
2107
|
+
this.clickOutside.emit(event);
|
|
2108
|
+
}
|
|
2109
|
+
});
|
|
2110
|
+
}
|
|
2111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2112
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
|
|
2113
|
+
}
|
|
2114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
2115
|
+
type: Directive,
|
|
2116
|
+
args: [{
|
|
2117
|
+
selector: '[clickOutside]',
|
|
2118
|
+
standalone: true,
|
|
2119
|
+
}]
|
|
2120
|
+
}], ctorParameters: () => [], propDecorators: { clickOutside: [{
|
|
2121
|
+
type: Output
|
|
2122
|
+
}] } });
|
|
2123
|
+
|
|
2087
2124
|
class MultiselectControl {
|
|
2088
2125
|
cdRef;
|
|
2089
2126
|
subscription = new Subscription();
|