nexheal-lib 0.0.27 → 0.0.29

package/fesm2022/nexheal-lib.mjs

@@ -1495,6 +1495,367 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 args: ['checkboxContainer']
             }] } });
 
+class ColorPicker {
+    elementRef = inject(ElementRef);
+    title;
+    required = false;
+    customClass = "";
+    inline = false;
+    format = "rgb";
+    defaultColor = "#ff0000";
+    disabled = false;
+    readonly = false;
+    /** Show the chosen value as text next to the swatch. */
+    showValue = false;
+    /** Where the value text sits relative to the swatch/panel. */
+    valuePosition = "right";
+    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);
+    }
+    /** The chosen value as a display string, formatted to match `format`. */
+    get displayValue() {
+        const c = this.hsbToRgb(this.h, this.s, this.b);
+        if (this.format === "rgb")
+            return `rgb(${c.r}, ${c.g}, ${c.b})`;
+        if (this.format === "hsb")
+            return `hsb(${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();
+    }
+    /**
+     * Close the popup when a press starts outside the component. Uses
+     * `mousedown`/`touchstart` (not `click`) so it stays reliable even when a
+     * drag ends outside the panel or an outside element stops click propagation.
+     */
+    onDocumentPointerDown(event) {
+        if (this.inline || !this.overlayVisible)
+            return;
+        const target = event.target;
+        if (target && !this.elementRef.nativeElement.contains(target)) {
+            this.close();
+        }
+    }
+    // ---- 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", showValue: "showValue", valuePosition: "valuePosition" }, outputs: { onChange: "onChange", blurEvent: "blurEvent" }, host: { listeners: { "document:mousedown": "onDocumentPointerDown($event)", "document:touchstart": "onDocumentPointerDown($event)" } }, 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  @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"] }] });
+}
+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], 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  @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"] }]
+        }], 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
+            }], showValue: [{
+                type: Input
+            }], valuePosition: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], blurEvent: [{
+                type: Output
+            }], onDocumentPointerDown: [{
+                type: HostListener,
+                args: ["document:mousedown", ["$event"]]
+            }, {
+                type: HostListener,
+                args: ["document:touchstart", ["$event"]]
+            }] } });
+
 class InputControl {
     type = "text";
     title;
@@ -3038,5 +3399,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