nexheal-lib 0.0.27 → 0.0.28

package/fesm2022/nexheal-lib.mjs

@@ -1495,6 +1495,358 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['checkboxContainer']
             }] } });
 
+class ClickOutsideDirective {
+    clickOutside = new EventEmitter();
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        fromEvent(this.document, 'click')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            const clickedInside = this.host.nativeElement.contains(event.target);
+            if (!clickedInside) {
+                this.clickOutside.emit(event);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickOutside]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { clickOutside: [{
+                type: Output
+            }] } });
+
+class ColorPicker {
+    title;
+    required = false;
+    customClass = "";
+    inline = false;
+    format = "rgb";
+    defaultColor = "#ff0000";
+    disabled = false;
+    readonly = false;
+    onChange = new EventEmitter();
+    blurEvent = new EventEmitter();
+    // current colour as HSB (the picker works in HSB space)
+    h = 0;
+    s = 100;
+    b = 100;
+    overlayVisible = false;
+    value = null;
+    dragMode = null;
+    dragEl = null;
+    moveListener = null;
+    upListener = null;
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    ngOnDestroy() {
+        this.unbindDragListeners();
+    }
+    // ---- ControlValueAccessor ----
+    writeValue(value) {
+        this.value = value ?? null;
+        if (value == null || value === "") {
+            this.setFromHex(this.defaultColor);
+            return;
+        }
+        if (typeof value === "string") {
+            this.setFromHex(value);
+        }
+        else if ("r" in value) {
+            const hsb = this.rgbToHsb(value.r, value.g, value.b);
+            this.h = hsb.h;
+            this.s = hsb.s;
+            this.b = hsb.b;
+        }
+        else if ("h" in value) {
+            this.h = value.h;
+            this.s = value.s;
+            this.b = value.b;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (isDisabled) {
+            this.close();
+        }
+    }
+    // ---- Template bindings ----
+    /** Background of the saturation/brightness box: the pure hue at full S/B. */
+    get hueBackground() {
+        const c = this.hsbToRgb(this.h, 100, 100);
+        return `rgb(${c.r}, ${c.g}, ${c.b})`;
+    }
+    /** Hex of the currently selected colour (used for the preview swatch + hex field). */
+    get previewColor() {
+        const c = this.hsbToRgb(this.h, this.s, this.b);
+        return this.rgbToHex(c.r, c.g, c.b);
+    }
+    get satHandleLeft() {
+        return this.s;
+    }
+    get briHandleTop() {
+        return 100 - this.b;
+    }
+    get hueHandleTop() {
+        return (this.h / 360) * 100;
+    }
+    // ---- Open / close ----
+    toggle() {
+        if (this.disabled || this.readonly)
+            return;
+        this.overlayVisible ? this.close() : this.open();
+    }
+    open() {
+        if (this.disabled || this.readonly)
+            return;
+        this.overlayVisible = true;
+    }
+    close() {
+        if (!this.overlayVisible)
+            return;
+        this.overlayVisible = false;
+        this.onTouchedFn();
+        this.blurEvent.emit();
+    }
+    // ---- Dragging on the saturation/brightness box and hue strip ----
+    onSelectorDown(event) {
+        if (this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.dragMode = "selector";
+        this.dragEl = event.currentTarget;
+        this.handleDrag(event);
+        this.bindDragListeners();
+    }
+    onHueDown(event) {
+        if (this.disabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.dragMode = "hue";
+        this.dragEl = event.currentTarget;
+        this.handleDrag(event);
+        this.bindDragListeners();
+    }
+    bindDragListeners() {
+        this.unbindDragListeners();
+        this.moveListener = (e) => this.handleDrag(e);
+        this.upListener = () => {
+            this.unbindDragListeners();
+            this.onTouchedFn();
+        };
+        document.addEventListener("mousemove", this.moveListener);
+        document.addEventListener("mouseup", this.upListener);
+        document.addEventListener("touchmove", this.moveListener, { passive: false });
+        document.addEventListener("touchend", this.upListener);
+    }
+    unbindDragListeners() {
+        if (this.moveListener) {
+            document.removeEventListener("mousemove", this.moveListener);
+            document.removeEventListener("touchmove", this.moveListener);
+        }
+        if (this.upListener) {
+            document.removeEventListener("mouseup", this.upListener);
+            document.removeEventListener("touchend", this.upListener);
+        }
+        this.moveListener = null;
+        this.upListener = null;
+        this.dragMode = null;
+        this.dragEl = null;
+    }
+    handleDrag(event) {
+        if (!this.dragEl)
+            return;
+        if (this.isTouch(event) && event.cancelable)
+            event.preventDefault();
+        const point = this.getPoint(event);
+        const rect = this.dragEl.getBoundingClientRect();
+        if (!rect.width || !rect.height)
+            return;
+        if (this.dragMode === "selector") {
+            const x = this.clamp(point.x - rect.left, 0, rect.width);
+            const y = this.clamp(point.y - rect.top, 0, rect.height);
+            this.s = Math.round((x / rect.width) * 100);
+            this.b = Math.round(100 - (y / rect.height) * 100);
+        }
+        else if (this.dragMode === "hue") {
+            const y = this.clamp(point.y - rect.top, 0, rect.height);
+            this.h = Math.min(359, Math.round((y / rect.height) * 360));
+        }
+        this.emitChange();
+    }
+    // ---- helpers ----
+    emitChange() {
+        const out = this.getValueToEmit();
+        this.value = out;
+        this.onChangeFn(out);
+        this.onChange.emit(out);
+    }
+    getValueToEmit() {
+        if (this.format === "hsb") {
+            return { h: this.h, s: this.s, b: this.b };
+        }
+        const rgb = this.hsbToRgb(this.h, this.s, this.b);
+        if (this.format === "rgb") {
+            return rgb;
+        }
+        return this.rgbToHex(rgb.r, rgb.g, rgb.b);
+    }
+    setFromHex(hex) {
+        const rgb = this.hexToRgb(hex);
+        if (!rgb)
+            return;
+        const hsb = this.rgbToHsb(rgb.r, rgb.g, rgb.b);
+        this.h = hsb.h;
+        this.s = hsb.s;
+        this.b = hsb.b;
+    }
+    isTouch(event) {
+        return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
+    }
+    getPoint(event) {
+        if (this.isTouch(event)) {
+            const touch = event.touches[0] ?? event.changedTouches[0];
+            return { x: touch.clientX, y: touch.clientY };
+        }
+        return { x: event.clientX, y: event.clientY };
+    }
+    clamp(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+    // ---- colour space conversions ----
+    hsbToRgb(h, s, br) {
+        const sat = s / 100;
+        const val = br / 100;
+        const c = val * sat;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = val - c;
+        let r = 0, g = 0, b = 0;
+        if (h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255),
+        };
+    }
+    rgbToHsb(r, g, b) {
+        const rr = r / 255, gg = g / 255, bb = b / 255;
+        const max = Math.max(rr, gg, bb);
+        const min = Math.min(rr, gg, bb);
+        const d = max - min;
+        let h = 0;
+        if (d !== 0) {
+            if (max === rr)
+                h = ((gg - bb) / d) % 6;
+            else if (max === gg)
+                h = (bb - rr) / d + 2;
+            else
+                h = (rr - gg) / d + 4;
+            h = Math.round(h * 60);
+            if (h < 0)
+                h += 360;
+        }
+        const s = max === 0 ? 0 : Math.round((d / max) * 100);
+        const br = Math.round(max * 100);
+        return { h, s, b: br };
+    }
+    hexToRgb(hex) {
+        if (!hex)
+            return null;
+        let h = hex.trim().replace(/^#/, "");
+        if (h.length === 3) {
+            h = h.split("").map((c) => c + c).join("");
+        }
+        if (!/^[0-9a-fA-F]{6}$/.test(h))
+            return null;
+        const num = parseInt(h, 16);
+        return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };
+    }
+    rgbToHex(r, g, b) {
+        const toHex = (n) => n.toString(16).padStart(2, "0");
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorPicker),
+                multi: true,
+            },
+        ], 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{ selector: "color-picker", standalone: true, imports: [CommonModule, ClickOutsideDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPicker),
+                            multi: true,
+                        },
+                    ], 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"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], defaultColor: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }] } });
+
 class InputControl {
     type = "text";
     title;
@@ -1732,34 +2084,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 type: Input
             }] } });
 
-class ClickOutsideDirective {
-    clickOutside = new EventEmitter();
-    host = inject(ElementRef);
-    document = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    constructor() {
-        fromEvent(this.document, 'click')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            const clickedInside = this.host.nativeElement.contains(event.target);
-            if (!clickedInside) {
-                this.clickOutside.emit(event);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickOutside]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { clickOutside: [{
-                type: Output
-            }] } });
-
 class MultiselectControl {
     cdRef;
     subscription = new Subscription();
@@ -3038,5 +3362,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutocompleteControl, CalendarControl, CheckboxControl, InputControl, MultiselectControl, SelectControl, SwitchControl, TextEditor, TextareaControl };
+export { AutocompleteControl, CalendarControl, CheckboxControl, ColorPicker, InputControl, MultiselectControl, SelectControl, SwitchControl, TextEditor, TextareaControl };
 //# sourceMappingURL=nexheal-lib.mjs.map