@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-internal.mjs

@@ -0,0 +1,379 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, input, effect, Directive } from '@angular/core';
+import { forEach, compact } from '@mirei/ts-collections';
+import { Observable, timer, take, debounceTime, map, merge, scan, filter } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isIterable } from 'rxjs/internal/util/isIterable';
+
+class AttributeBinderDirective {
+    #element;
+    #renderer;
+    constructor() {
+        this.#element = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.attributes = input({}, { ...(ngDevMode ? { debugName: "attributes" } : /* istanbul ignore next */ {}), alias: "monaAttributeBinder" });
+        effect(() => {
+            const attributes = this.attributes();
+            for (const [key, value] of Object.entries(attributes)) {
+                if (value == null || value === false) {
+                    this.#renderer.removeAttribute(this.#element.nativeElement, key);
+                }
+                else {
+                    const attributeValue = typeof value === "boolean" ? String(value) : value;
+                    this.#renderer.setAttribute(this.#element.nativeElement, key, attributeValue);
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AttributeBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: AttributeBinderDirective, isStandalone: true, selector: "[monaAttributeBinder]", inputs: { attributes: { classPropertyName: "attributes", publicName: "monaAttributeBinder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AttributeBinderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaAttributeBinder]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { attributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaAttributeBinder", required: false }] }] } });
+
+const isValidHex = (hex) => {
+    return /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(hex);
+};
+const isValidHsla = (hslaText) => {
+    return /^hsla?\(\s*(\d{1,2}|[1-2]\d{2}|3[0-5]\d|360)\s*,\s*(\d{1,2}|100)%\s*,\s*(\d{1,2}|100)%\s*(?:,\s*(0|1|0?\.\d+))?\s*\)$/.test(hslaText);
+};
+const isValidRgb = (rgbText) => {
+    return /^rgba?\(\s*(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/.test(rgbText);
+};
+
+const hex2rgba = (hex) => {
+    let r = 0, g = 0, b = 0, a = 255;
+    if (hex.length == 4 || hex.length == 5) {
+        r = parseInt(hex[1] + hex[1], 16);
+        g = parseInt(hex[2] + hex[2], 16);
+        b = parseInt(hex[3] + hex[3], 16);
+        if (hex.length == 5) {
+            a = parseInt(hex[4] + hex[4], 16);
+        }
+    }
+    else if (hex.length == 7 || hex.length == 9) {
+        r = parseInt(hex.slice(1, 3), 16);
+        g = parseInt(hex.slice(3, 5), 16);
+        b = parseInt(hex.slice(5, 7), 16);
+        if (hex.length == 9) {
+            a = parseInt(hex.slice(7, 9), 16);
+        }
+    }
+    return { r: r, g: g, b: b, a: a };
+};
+
+const hsla2hsva = (hue, saturation, lightness, alpha) => {
+    if (hue == null || saturation == null || lightness == null) {
+        return { h: 0, s: 0, v: 0, a: 255 };
+    }
+    const h = hue;
+    const s = saturation / 100;
+    const l = lightness / 100;
+    const v = l + s * Math.min(l, 1 - l);
+    const sv = v === 0 ? 0 : 2 * (1 - l / v);
+    return {
+        h: h,
+        s: sv * 100,
+        v: v * 100,
+        a: alpha ?? 255
+    };
+};
+
+const hsva2rgba = (hue, saturation, value, alpha) => {
+    if (hue == null || saturation == null || value == null) {
+        return { r: 0, g: 0, b: 0, a: 255 };
+    }
+    const h = hue;
+    const s = saturation / 100;
+    const v = value / 100;
+    const f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(0, Math.min(k, 4 - k, 1));
+    return {
+        r: Math.round(f(5) * 255),
+        g: Math.round(f(3) * 255),
+        b: Math.round(f(1) * 255),
+        a: alpha ?? 255
+    };
+};
+
+const rgba2hex = (r, g, b, a) => {
+    if (r == null || g == null || b == null || a == null) {
+        return "";
+    }
+    let rHex = r.toString(16);
+    let gHex = g.toString(16);
+    let bHex = b.toString(16);
+    let aHex = a.toString(16);
+    if (rHex.length == 1)
+        rHex = "0" + rHex;
+    if (gHex.length == 1)
+        gHex = "0" + gHex;
+    if (bHex.length == 1)
+        bHex = "0" + bHex;
+    if (aHex.length == 1)
+        aHex = "0" + aHex;
+    return `#${rHex}${gHex}${bHex}${aHex.toUpperCase() !== "FF" ? aHex : ""}`;
+};
+
+const rgba2hsla = (red, green, blue, alpha) => {
+    if (red == null || green == null || blue == null) {
+        return { h: 0, s: 0, l: 0, a: 255 };
+    }
+    const r = red / 255;
+    const g = green / 255;
+    const b = blue / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s;
+    const l = (max + min) / 2;
+    const d = max - min;
+    if (d === 0) {
+        h = s = 0;
+    }
+    else {
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100),
+        a: alpha ?? 255
+    };
+};
+
+const rgba2hsva = (r, g, b, a) => {
+    if (r == null || g == null || b == null) {
+        return { h: 0, s: 0, v: 0, a: 255 };
+    }
+    r = r / 255;
+    g = g / 255;
+    b = b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s;
+    const v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max !== min) {
+        if (max === r) {
+            h = (g - b) / d + (g < b ? 6 : 0);
+        }
+        else if (max === g) {
+            h = (b - r) / d + 2;
+        }
+        else if (max === b) {
+            h = (r - g) / d + 4;
+        }
+        h /= 6;
+    }
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        v: Math.round(v * 100),
+        a: a ?? 255
+    };
+};
+
+const string2Hsla = (hslText) => {
+    const match = RegExp(/^hsla?\(\s*(\d{1,2}|[1-2]\d{2}|3[0-5]\d|360)\s*,\s*(\d{1,2}|100)%\s*,\s*(\d{1,2}|100)%\s*(?:,\s*(0|1|0?\.\d+))?\s*\)$/).exec(hslText);
+    if (match) {
+        return {
+            h: parseInt(match[1]),
+            s: parseInt(match[2]),
+            l: parseInt(match[3]),
+            a: match[4] ? Math.round(parseFloat(match[4]) * 255) : 255
+        };
+    }
+    return { h: 0, s: 0, l: 0, a: 255 };
+};
+
+const string2rgba = (rgbText) => {
+    const match = RegExp(/^rgba?\(\s*(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\s*,\s*(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/).exec(rgbText);
+    if (match) {
+        return {
+            r: parseInt(match[1]),
+            g: parseInt(match[2]),
+            b: parseInt(match[3]),
+            a: match[4] ? Math.round(parseFloat(match[4]) * 255) : 255
+        };
+    }
+    return { r: 0, g: 0, b: 0, a: 255 };
+};
+
+/**
+ * Generates a unique control ID for an element.
+ * The ID consists of a prefix, a random hexadecimal string, and a suffix.
+ * @param {number} [level=0] - The nesting level of the element. This increases the length of the generated ID.
+ * @param {number} [length=7] - The base length of the random part of the ID.
+ * @returns {string} A unique control ID string for use for elements.
+ */
+const createElementControlId = (level = 0, length = 7) => {
+    const idLength = length + level;
+    const prefix = "mona-";
+    if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+        const array = new Uint8Array(Math.ceil(idLength / 2));
+        crypto.getRandomValues(array);
+        const randomId = Array.from(array, byte => byte.toString(16).padStart(2, "0"))
+            .join("")
+            .substring(0, idLength);
+        return `${prefix}:${randomId}:`;
+    }
+    let hex = "";
+    const chars = "0123456789abcdef";
+    for (let i = 0; i < idLength; i++) {
+        hex += chars[Math.floor(Math.random() * 16)];
+    }
+    return `${prefix}:${hex}:`;
+};
+
+function focusElement(host, element) {
+    if (element instanceof ElementRef) {
+        element.nativeElement.focus();
+    }
+    else if (element instanceof HTMLElement) {
+        element.focus();
+    }
+    else {
+        const elements = host.querySelectorAll(element);
+        if (elements.length > 0) {
+            elements[0].focus();
+        }
+    }
+}
+
+const rxFromResize = (target, options) => {
+    return new Observable(observer => {
+        const elements = Array.isArray(target) ? target : [target];
+        for (const element of elements) {
+            if (!(element instanceof Element)) {
+                observer.error(new TypeError("target must be an Element or an iterable of Elements"));
+                return;
+            }
+        }
+        const resizeObserver = new ResizeObserver(entries => observer.next(entries));
+        forEach(elements, e => resizeObserver.observe(e, options));
+        return () => resizeObserver.disconnect();
+    });
+};
+
+const rxTimeout = (destroyRef, fn, delay = 0) => {
+    timer(delay)
+        .pipe(takeUntilDestroyed(destroyRef), take(1))
+        .subscribe(() => fn());
+};
+
+const restoreOverlayScroll = (overlayRef, element) => {
+    requestAnimationFrame(() => {
+        const scrollableContent = findScrollableElement(overlayRef.overlayElement);
+        const scrollTop = scrollableContent?.scrollTop ?? 0;
+        const width = element.getBoundingClientRect().width;
+        overlayRef.updatePosition();
+        overlayRef.updateSize({ width });
+        requestAnimationFrame(() => {
+            if (scrollableContent) {
+                scrollableContent.scrollTop = scrollTop;
+            }
+        });
+    });
+};
+const findScrollableElement = (container) => {
+    const virtualViewport = container.querySelector(".cdk-virtual-scroll-viewport");
+    if (virtualViewport) {
+        return virtualViewport;
+    }
+    const scrollable = container.querySelector("ul, [style*='overflow']");
+    if (scrollable && scrollable.scrollHeight > scrollable.clientHeight) {
+        return scrollable;
+    }
+    if (container.scrollHeight > container.clientHeight) {
+        return container;
+    }
+    return null;
+};
+
+const setWindowStyles = (element, settings) => {
+    if (!element) {
+        return;
+    }
+    const classes = isIterable(settings.windowClass) ? [...settings.windowClass] : [settings.windowClass];
+    compact(classes).forEach(className => element.classList.add(className));
+    const minWidth = settings.minWidth ? `${settings.minWidth}px` : "";
+    const minHeight = settings.minHeight ? `${settings.minHeight}px` : "";
+    const maxWidth = settings.maxWidth ? `${settings.maxWidth}px` : "";
+    const maxHeight = settings.maxHeight ? `${settings.maxHeight}px` : "";
+    const top = settings.top ? `${settings.top}px` : `calc(50% - ${element.getBoundingClientRect().height / 2}px)`;
+    const left = settings.left ? `${settings.left}px` : `calc(50% - ${element.getBoundingClientRect().width / 2}px)`;
+    const position = "absolute";
+    Object.assign(element.style, { left, maxHeight, maxWidth, minHeight, minWidth, position, top });
+};
+
+/**
+ * Converts a number or a string into a CSS-compliant value.
+ * - If the input is a number (e.g., 100), it appends 'px'.
+ * - If the input is a numeric string (e.g., "100"), it appends 'px'.
+ * - If the input is a string with a unit (e.g., "100px", "10rem"), it returns it as is.
+ *
+ * @param value The number or string to convert.
+ * @returns A CSS-compliant string value.
+ */
+const toCssValue = (value) => {
+    if (value == null || value === "") {
+        return "";
+    }
+    if (typeof value === "number" || isFinite(Number(value))) {
+        return value === 0 ? "0" : `${value}px`;
+    }
+    return String(value);
+};
+
+var NavigationKeys;
+(function (NavigationKeys) {
+    NavigationKeys["ArrowUp"] = "ArrowUp";
+    NavigationKeys["ArrowDown"] = "ArrowDown";
+    NavigationKeys["ArrowLeft"] = "ArrowLeft";
+    NavigationKeys["ArrowRight"] = "ArrowRight";
+    NavigationKeys["Enter"] = "Enter";
+    NavigationKeys["Escape"] = "Escape";
+    NavigationKeys["Home"] = "Home";
+    NavigationKeys["End"] = "End";
+    NavigationKeys["PageDown"] = "PageDown";
+    NavigationKeys["PageUp"] = "PageUp";
+    NavigationKeys["Space"] = " ";
+})(NavigationKeys || (NavigationKeys = {}));
+const NavigationKeysList = Object.keys(NavigationKeys);
+const isNavigationKey = (key) => {
+    return NavigationKeysList.includes(key);
+};
+
+const isTypeaheadKey = (key) => {
+    return /^[a-zA-Z0-9\-_\s]$/.test(key);
+};
+const setupTypeahead = (typeaheadKey$) => {
+    const resetTrigger$ = typeaheadKey$.pipe(debounceTime(200), map(() => ({ type: "reset", value: "" })));
+    const keypress$ = typeaheadKey$.pipe(map(key => ({ type: "key", value: key })));
+    return merge(keypress$, resetTrigger$).pipe(scan((buffer, action) => (action.type === "reset" ? "" : buffer + action.value.toLowerCase()), ""), filter(buffer => buffer.length > 0));
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, createElementControlId, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, toCssValue };
+//# sourceMappingURL=nanahoshi-mona-ui-internal.mjs.map