jsl-ui 9.28.7 → 10.0.0

package/lib/components/overlay/OverlayComponent.js

@@ -4,131 +4,63 @@ export class OverlayComponent {
     static show(options) {
         const container = document.createElement("div");
         document.body.appendChild(container);
-        const oldRenderer = JSLRender.lastCreatedRenderer;
-        const oldLastDlg = OverlayComponent.lastRenderedDlg;
-        const renderer = new JSLRender(container, oldRenderer != null);
-        if (oldRenderer != null) {
-            JSLRender.lastCreatedRenderer = renderer;
-        }
-        const o = { ...options };
-        o.onClose = () => {
-            if (options.onClose) {
-                if (options.onClose() === false) {
-                    return;
-                }
-            }
-            document.body.removeChild(container);
-            JSLRender.lastCreatedRenderer = oldRenderer;
-            if (oldRenderer != null) {
-                oldRenderer.refresh();
-            }
-            OverlayComponent.lastRenderedDlg = oldLastDlg;
-        };
-        const dlg = new OverlayComponent(o);
-        OverlayComponent.lastRenderedDlg = dlg;
-        renderer.render(dlg);
-        return dlg;
-    }
-    close() {
-        if (this.options.onClose) {
-            if (this.options.onClose() === false) {
-                return;
-            }
-        }
-        // this.overlay.style.display = "none";
-        if (this.onKeydownEvent != null) {
-            document.removeEventListener("keydown", this.onKeydownEvent);
-        }
+        const renderer = new JSLRender(container, false), overlay = new OverlayComponent(options);
+        overlay.disposeHost = () => { renderer.render({ tag: "div" }); container.remove(); };
+        renderer.render(overlay);
+        return overlay;
     }
     constructor(options) {
-        this.closeIcon = {
-            tag: "div", content: "✖" /*"🗙"*/, attr: {
-                class: "overl-close-btn", click: () => {
-                    this.close();
-                }
-            }
-        };
+        this.State = { closed: false };
         this.options = { closeOnEscape: true, closeOnOverlayClick: true, showCloseButton: true, direction: "left", animate: true, ...options };
-        if (this.options.closeOnEscape) {
-            this.onKeydownEvent = document.addEventListener("keydown", (args) => {
-                if (args.keyCode === 27) { // escape
-                    this.close();
-                }
-            });
-        }
     }
+    onInit(renderer) { this.renderer = renderer; }
     onCreate(node) {
-        const bodyDom = node.dom.querySelector(".overl-body");
-        if (bodyDom != null) {
-            if (this.options.direction === "left") {
-                node.dom.style.width = this.options.size;
-                if (this.options.animate) {
-                    const realWidth = bodyDom.getBoundingClientRect().width;
-                    node.dom.style.left = -realWidth + "px";
-                    JSLRender.animate(node, { attr: "left", from: -realWidth + "px", to: "0px", duration: 500, easing: "easeOutSine" });
-                }
-            }
-            else {
-                node.dom.style.height = this.options.size;
-                if (this.options.animate) {
-                    const realHeight = bodyDom.getBoundingClientRect().height;
-                    node.dom.style.top = -realHeight + "px";
-                    JSLRender.animate(node, { attr: "top", from: -realHeight + "px", to: "0px", duration: 500, easing: "easeOutSine" });
-                }
-            }
+        var _a, _b;
+        this.dom = node.dom;
+        if (!this.State.closed) {
+            this.dom.showModal();
+            (_b = (_a = this.options).onOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    }
+    onRemove() { var _a; (_a = this.dom) === null || _a === void 0 ? void 0 : _a.close(); this.dom = undefined; }
+    close() {
+        var _a, _b, _c, _d;
+        if (this.State.closed || ((_b = (_a = this.options).onClose) === null || _b === void 0 ? void 0 : _b.call(_a)) === false) {
+            return;
+        }
+        this.State.closed = true;
+        (_c = this.dom) === null || _c === void 0 ? void 0 : _c.close();
+        if (this.disposeHost) {
+            this.disposeHost();
         }
         else {
-            console.error("overl-body class not found");
+            (_d = this.renderer) === null || _d === void 0 ? void 0 : _d.refresh();
         }
     }
     render() {
-        const body = this.toNode(this.options.content);
-        // let styleW = "";
-        // let styleH = "";
-        // if (this.options.width != null) {
-        //     styleW += "width:" + this.options.width + ";";
-        // }
-        // if (this.options.minWidth != null) {
-        //     styleW += "min-width:" + this.options.minWidth + ";";
-        // }
-        // if (this.options.maxWidth != null) {
-        //     styleW += "max-width:" + this.options.maxWidth + ";";
-        // }
-        // if (this.options.height != null) {
-        //     styleH += "height:" + this.options.height + ";";
-        // }
-        // if (this.options.minHeight != null) {
-        //     styleH += "min-height:" + this.options.minHeight + ";";
-        // }
-        // if (this.options.maxHeight != null) {
-        //     styleH += "max-height:" + this.options.maxHeight + ";";
-        // }
-        // const headerStyle = this.options.allowMove ? "cursor:move" : undefined;
-        return {
-            tag: "div", attr: {
-                class: "jsl-overlay-overlay", click: (e) => {
-                    if (this.options.closeOnOverlayClick && e.target.classList.contains("jsl-overlay-overlay")) {
+        var _a, _b, _c, _d, _e;
+        return { tag: "dialog", attr: { class: "jsl-overlay-overlay", hidden: this.State.closed ? "hidden" : undefined,
+                "aria-label": (_a = this.options.ariaLabel) !== null && _a !== void 0 ? _a : "Panel",
+                keydown: (e) => { if (e.key === "Escape") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (this.options.closeOnEscape) {
                         this.close();
                     }
-                }, wheel: (e) => {
-                    e.stopImmediatePropagation();
-                    e.stopPropagation();
-                }
-            }, children: [
-                {
-                    tag: "div", attr: { class: ("overl-body-" + this.options.direction) + " overl-body " + (this.options.class || ""), style: this.options.style }, children: [{
-                            tag: "div", attr: { class: "overl-header" },
-                            children: this.options.showCloseButton ? [this.closeIcon] : []
-                        }, body]
-                }
-            ]
-            // }]
-        };
-    }
-    toNode(content) {
-        if (typeof content === "string") {
-            return { tag: "div", content };
-        }
-        return content;
+                } return false; },
+                cancel: (e) => { e.preventDefault(); if (this.options.closeOnEscape) {
+                    this.close();
+                } return false; },
+                click: (e) => { if (e.target === e.currentTarget && this.options.closeOnOverlayClick) {
+                    const r = this.dom.getBoundingClientRect();
+                    if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) {
+                        this.close();
+                    }
+                } return false; }
+            }, children: [{ tag: "div", attr: { class: "overl-body overl-body-" + this.options.direction + (this.options.animate ? " overl-animate" : "") + " " + ((_b = this.options.class) !== null && _b !== void 0 ? _b : ""),
+                        style: "--jsl-overlay-size:" + ((_c = this.options.size) !== null && _c !== void 0 ? _c : "28rem") + ";" + ((_d = this.options.style) !== null && _d !== void 0 ? _d : "") }, children: [
+                        { tag: "div", attr: { class: "overl-header" }, children: this.options.showCloseButton ? [{ tag: "button", content: "×", attr: { type: "button", class: "overl-close-btn", "aria-label": (_e = this.options.closeButtonLabel) !== null && _e !== void 0 ? _e : "Close panel", click: () => { this.close(); return false; } } }] : [] },
+                        { tag: "div", attr: { class: "overl-content" }, children: [typeof this.options.content === "string" ? { tag: "div", content: this.options.content } : this.options.content] }
+                    ] }] };
     }
 }

package/lib/components/overlay/overlay.css

@@ -1,57 +1,18 @@
-.jsl-overlay-overlay {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 2001;
-    background: rgba(255, 255, 255, 0.6);
-    height: 100vh;
-}
-
-.overl-header {
-    position:absolute;
-    right: 0;
-    top: 0;
-}
-
-.overl-body {
-    position: absolute;
-    overflow: auto;
-    background: rgb(255, 255, 255);
-}
-
-.overl-body-left {
-    left:0;
-    top:0;
-    bottom:0;
-    min-width: 50%;
-    box-shadow: 5px 0px 6px 0px rgba(34, 34, 34, 0.2);
-}
-
-.overl-body-top {
-    left:0;
-    top:0;
-    right:0;
-    min-height: 50%;
-    box-shadow: 0px 5px 4px 0px rgba(34,34,34,0.2);
-}
-
-
-.overl-close-btn {
-    color: #555555;
-    font-size: 2rem;
-    line-height: 2.2rem;
-    font-weight: bold;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 2.2rem;
-    box-sizing: border-box;
-    border-top-right-radius: 0.8rem;
-    cursor: pointer;
-}
-
-.overl-close-btn:hover {
-    color: #B22121;
-}
+@import "../../ui/theme.css";
+.jsl-overlay-overlay { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--jsl-color-text); max-width: 100vw; max-height: 100dvh; overflow: visible; width: fit-content; height: fit-content; font: inherit; }
+.jsl-overlay-overlay:has(.overl-body-top) { width: 100%; }
+.jsl-overlay-overlay::backdrop { background: var(--jsl-color-overlay); }
+.jsl-overlay-overlay[hidden] { display: none; }
+.overl-body { box-sizing: border-box; display: flex; flex-direction: column; overflow: auto; background: var(--jsl-color-surface); box-shadow: var(--jsl-shadow-dialog); }
+.overl-body-left { width: var(--jsl-overlay-size); max-width: 100vw; height: 100dvh; border-radius: 0 .75rem .75rem 0; }
+.overl-body-top { height: var(--jsl-overlay-size); max-height: 100dvh; width: 100vw; border-radius: 0 0 .75rem .75rem; }
+.overl-header { display: flex; justify-content: flex-end; padding: .75rem .75rem 0; }
+.overl-content { padding: 1.25rem; overflow: auto; }
+.overl-close-btn { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--jsl-color-text-muted); font: inherit; font-size: 1.5rem; cursor: pointer; }
+.overl-close-btn:hover { background: var(--jsl-color-surface-hover); color: var(--jsl-color-text); }
+.overl-close-btn:focus-visible { outline: 2px solid var(--jsl-color-focus); outline-offset: 2px; }
+.overl-body-left.overl-animate { animation: jsl-panel-left .18s ease-out; }
+.overl-body-top.overl-animate { animation: jsl-panel-top .18s ease-out; }
+@keyframes jsl-panel-left { from { transform: translateX(-100%); } }
+@keyframes jsl-panel-top { from { transform: translateY(-100%); } }
+@media (prefers-reduced-motion: reduce) { .overl-animate { animation: none !important; } }

package/lib/components/progress/ProgressComponent.d.ts

@@ -6,6 +6,7 @@ export interface IProgressComponentOptions {
     percentFormat?: string;
     class?: string;
     style?: string;
+    ariaLabel?: string;
 }
 export declare class ProgressComponent implements IJSLComponent {
     private progress;

package/lib/components/progress/ProgressComponent.js

@@ -9,8 +9,9 @@ export class ProgressComponent {
         return this.__proto__ === node.__proto__;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        let style = "width: " + this.progress + "%";
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        const value = Number.isFinite(this.progress) ? Math.max(0, Math.min(100, this.progress)) : 0;
+        let style = "width: " + value + "%";
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.color) {
             style += ";background:" + this.options.color;
         }
@@ -19,16 +20,15 @@ export class ProgressComponent {
         }
         let content = "";
         if ((_c = this.options) === null || _c === void 0 ? void 0 : _c.showPercent) {
-            content = numeric.format(this.progress, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat) !== null && _e !== void 0 ? _e : "0. %");
+            content = numeric.format(value, (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.percentFormat) !== null && _e !== void 0 ? _e : "0. %");
         }
         return {
             tag: "div",
-            attr: { class: "progress-comp " + ((_g = (_f = this.options) === null || _f === void 0 ? void 0 : _f.class) !== null && _g !== void 0 ? _g : "") },
+            attr: { class: "progress-comp " + (((_f = this.options) === null || _f === void 0 ? void 0 : _f.showPercent) ? "has-label " : "") + ((_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.class) !== null && _h !== void 0 ? _h : ""), role: "progressbar", "aria-label": (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.ariaLabel) !== null && _k !== void 0 ? _k : "Progress", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(value) },
             children: [{
                     tag: "div",
                     attr: { class: "bar", style },
-                    content
-                }]
+                }, ...(((_l = this.options) === null || _l === void 0 ? void 0 : _l.showPercent) ? [{ tag: "span", attr: { class: "progress-label", "aria-hidden": "true" }, content }] : [])]
         };
     }
     setProgress(progress) {

package/lib/components/progress/ProgressStyle.scss

@@ -1,15 +1,5 @@
-.progress-comp {
-
-    background: #bbbbbb;
-    height: 1rem;
-    position: relative;
-    border-radius: 2px;
-
-    .bar {
-        background: #3B99FF;
-        height: 100%;
-        text-align: center;
-        border-radius: 2px;
-    }
-
-}
+@import "../../ui/theme.css";
+.progress-comp { position: relative; background: var(--jsl-color-border-subtle); height: .5rem; border-radius: 999px; overflow: hidden; }
+.progress-comp.has-label { height: 1.25rem; }
+.progress-comp .bar { background: var(--jsl-color-accent); height: 100%; border-radius: inherit; }
+.progress-comp .progress-label { position: absolute; inset: 0; display: grid; place-items: center; color: var(--jsl-color-text); font: 600 .75rem/1.25rem sans-serif; text-shadow: 0 0 3px var(--jsl-color-surface); }

package/lib/components/ribbon-menu/RibbonMenuComponent.js

@@ -14,8 +14,8 @@ export class RibbonMenuComponent {
             children: this.groups.map((g) => {
                 var _a;
                 return {
-                    tag: "div", attr: { class: "ribbon-group" },
-                    children: [{ tag: "div", attr: { class: "ribbon-legend" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }, ...g.children]
+                    tag: "div", attr: { class: "ribbon-group", role: "group", "aria-label": g.title },
+                    children: [{ tag: "div", attr: { class: "ribbon-actions" }, children: g.children }, { tag: "div", attr: { class: "ribbon-legend", hidden: g.title ? undefined : "hidden" }, content: (_a = g.title) !== null && _a !== void 0 ? _a : "" }]
                 };
             })
         };

package/lib/components/ribbon-menu/RibbonMenuStyle.scss

@@ -1,76 +1,6 @@
-
-.ribbon-menu-comp {
-    box-sizing: border-box;
-    height: 3.9rem;
-    position: relative;
-    background: white;
-    padding: 0.3rem;
-    border-bottom: 1px solid #c9c9c9;
-    border-top: 1px solid #c9c9c9;
-    flex-shrink: 0;
-    background: linear-gradient(90deg,
-        rgb(255,255,255) 0%,
-        rgb(246,246,246) 20%,
-        rgb(246,246,246) 80%,
-        rgb(255,255,255) 100%);
-    
-    .ribbon-group {
-        position: relative;
-        box-sizing: border-box;
-        border-right: 1px solid #c9c9c9;
-        display: inline-block;
-        height: 100%;
-        padding: 0 0.6rem 0 0.6rem;
-        vertical-align: middle;
-    }
-    
-    .jsl-button {
-        margin: 0.1rem;
-        // box-sizing: border-box;
-        // padding: 0.25rem;
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
-        // background: #ebebf0;
-        // border: 1px solid #ebebf0;
-        // border-radius: 2px;
-        display: inline-block;
-        // cursor: pointer;
-        // color:black;
-    }
-    
-    // .jsl-button:hover {
-    //     border-color: #aaaaaa;
-    //     background: #aaaaaa;
-    // }
-    
-    // .jsl-button-disabled {
-    //     background: #ebebf0!important;
-    //     border-color: #ebebf0!important;
-    //     color:#aaaaaa;
-    //     cursor: default;
-    // }
-    
-    // .jsl-button.ui-state-active {
-    //     background: #017DBE;
-    //     border-color: #017DBE;
-    //     color: white;
-    // }
-    
-    // .jsl-button:focus {
-    //     border-color: #999999;
-    // }
-    
-    .ribbon-group > .jsl-button > img {
-        height: 1rem;
-    }
-    
-    .ribbon-legend {
-        position: absolute;
-        bottom: 0;
-        left: 1px;
-        right: 1px;
-        text-align: center;
-        font-size: 0.8em;
-        color: #444444;
-    }
-}
+@import "../../ui/theme.css";
+.ribbon-menu-comp { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; margin: 0; padding: .75rem; background: var(--jsl-color-surface-subtle); color: var(--jsl-color-text); border: 1px solid var(--jsl-color-border-subtle); border-radius: 0; box-sizing: border-box; }
+.ribbon-menu-comp .ribbon-group { display: flex; flex-direction: column; gap: .5rem; padding-inline-end: .75rem; border-inline-end: 1px solid var(--jsl-color-border-subtle); min-width: 0; }
+.ribbon-menu-comp .ribbon-group:last-child { border-inline-end: 0; padding-inline-end: 0; }
+.ribbon-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; flex: 1; }
+.ribbon-menu-comp .ribbon-legend { font-size: .6875rem; color: var(--jsl-color-text-muted); text-align: center; }

package/lib/components/select/SelectComponent.d.ts

@@ -15,9 +15,17 @@ export interface ISelectRenderGroupArg {
 }
 export interface ISelectComponentOptions<T = any, TValue = any, TBinding = any> {
     data: T[];
+    id?: string;
     style?: string;
     class?: string;
+    /** Kept for compatibility. Prefer placeholder in new code. */
     placehoder?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    clearButtonLabel?: string;
     rowHeight?: number;
     textColumn?: string;
     keyColumn?: string;
@@ -48,32 +56,54 @@ export interface ISelectComponentOptions<T = any, TValue = any, TBinding = any>
     autoShrink?: boolean;
 }
 export declare class SelectComponent<T = any, TValue = any, TBinding = any> implements IJSLComponent {
-    private static ENTER_KEY;
     private expanded;
-    private doNotFocus;
+    private suppressOpenOnFocus;
     private options;
     private dropdownArea;
     private dom;
     private renderer;
+    private dropdownRenderer;
+    private dropdownComponent;
     private focused;
     private selected;
+    private listId;
+    private focusFrame;
+    private dropdownLimit;
+    private disposed;
+    private expandedBeforePress;
     constructor(o: ISelectComponentOptions<T, TValue, TBinding>);
     render(): IJSLVNode;
     onCreate(node: IJSLVNode): void;
     onUpdate(node: IJSLVNode): void;
     onInit(renderer: JSLRender): void;
+    onRemove(): void;
     toggle(): void;
     isExpanded(): boolean;
+    getListId(): string;
     show(searchTxt?: string): void;
+    /** Removes only this select's popup and listeners. The select remains reusable. */
     destroy(): void;
-    close(): void;
+    close(restoreFocus?: boolean): void;
     setFocus(item: T): void;
     getFocus(): T;
     getValue(): any;
+    /** Changes selection and the bound model without raising onChange. */
     setValue(value: any): void;
     getSelected(): T | T[];
     setSelected(item: T | T[]): void;
     focus(): void;
     hasSelection(): boolean;
     protected renderSelection(): IJSLVNode;
+    private hasBinding;
+    private readModel;
+    private writeModel;
+    private selectValue;
+    private refresh;
+    private focusWithoutOpening;
+    private onTriggerKeydown;
+    private updateTriggerAria;
+    private onOutsidePress;
+    private onDocumentFocus;
+    private onWindowScroll;
+    private positionDropdown;
 }