@openremote/or-mwc-components 1.8.0-snapshot.20250820125434 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openremote/or-mwc-components",
-  "version": "1.8.0-snapshot.20250820125434",
+  "version": "1.8.1",
   "description": "Material Design Components packaged as web components (The official components are hardcoded to use Material Design font which has limited icons)",
   "customElements": "custom-elements.json",
   "main": "dist/umd/index.bundle.js",
@@ -44,14 +44,14 @@
     "@material/switch": "^9.0.0",
     "@material/tab-bar": "^9.0.0",
     "@material/textfield": "^9.0.0",
-    "@openremote/core": "1.8.0-snapshot.20250820125434",
-    "@openremote/or-icon": "1.8.0-snapshot.20250820125434",
-    "@openremote/or-translate": "1.8.0-snapshot.20250820125434",
-    "lit": "^2.0.2"
+    "@openremote/core": "1.8.1",
+    "@openremote/or-icon": "1.8.1",
+    "@openremote/or-translate": "1.8.1",
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@openremote/test": "1.8.0-snapshot.20250820125434",
-    "@openremote/util": "1.8.0-snapshot.20250820125434"
+    "@openremote/test": "1.8.1",
+    "@openremote/util": "1.8.1"
   },
   "publishConfig": {
     "access": "public"

package/build.gradle

@@ -1,36 +0,0 @@
-buildDir = "dist"
-
-tasks.register('clean') {
-    doLast {
-        delete "dist"
-        delete "lib"
-    }
-}
-
-tasks.register('installDist') {
-    dependsOn npmAnalyze
-}
-
-tasks.register('prepareUi') {
-    dependsOn clean, npmAnalyze, npmPrepare
-}
-
-tasks.register('publishUi') {
-    dependsOn clean, npmPublish
-}
-
-tasks.register('npmBuild', Exec) {
-    mustRunAfter npmClean
-    dependsOn getYarnInstallTask()
-    commandLine npmCommand("yarn"), "run", "build"
-}
-
-tasks.register('npmTest', Exec) {
-    dependsOn getYarnInstallTask()
-    commandLine npmCommand("yarn"), "run", "test"
-}
-
-tasks.register('npmTestUI', Exec) {
-    dependsOn getYarnInstallTask()
-    commandLine npmCommand("yarn"), "run", "test", "--ui"
-}

package/playwright.config.ts

@@ -1,3 +0,0 @@
-import { defineCtConfig } from "@openremote/test/component.config";
-
-export default defineCtConfig(__dirname);

package/rspack.config.js

@@ -1,7 +0,0 @@
-const util = require("@openremote/util");
-
-bundles = {
-    "index.bundle": undefined
-};
-
-module.exports = util.generateExports(__dirname);

package/src/or-mwc-dialog.ts

@@ -1,374 +0,0 @@
-import {css, html, LitElement, PropertyValues, TemplateResult, unsafeCSS} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import {MDCDialog} from "@material/dialog";
-import "@openremote/or-translate";
-import "./or-mwc-input";
-import {InputType, OrMwcInput} from "./or-mwc-input";
-import {i18next} from "@openremote/or-translate";
-import {Util} from "@openremote/core";
-
-const dialogStyle = require("@material/dialog/dist/mdc.dialog.css");
-const listStyle = require("@material/list/dist/mdc.list.css");
-
-export interface DialogActionBase {
-    actionName: string;
-    action?: (dialog: OrMwcDialog) => void;
-}
-
-export interface DialogAction extends DialogActionBase {
-    default?: boolean;
-    content: TemplateResult | string;
-    disabled?: boolean;
-}
-
-export class OrMwcDialogOpenedEvent extends CustomEvent<void> {
-
-    public static readonly NAME = "or-mwc-dialog-opened";
-
-    constructor() {
-        super(OrMwcDialogOpenedEvent.NAME, {
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-
-export class OrMwcDialogClosedEvent extends CustomEvent<string | undefined> {
-
-    public static readonly NAME = "or-mwc-dialog-closed";
-
-    constructor(action?: string) {
-        super(OrMwcDialogClosedEvent.NAME, {
-            detail: action,
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-
-declare global {
-    export interface HTMLElementEventMap {
-        [OrMwcDialogOpenedEvent.NAME]: OrMwcDialogOpenedEvent;
-        [OrMwcDialogClosedEvent.NAME]: OrMwcDialogClosedEvent;
-    }
-}
-
-export async function showErrorDialog(errorMessage: string, hostElement?: HTMLElement) {
-    const title = "error";
-    const content = html`
-                <div>
-                    <p><or-translate value="errorOccurred"></or-translate>
-                    ${errorMessage ? html`
-                        :</p>
-                        <p>
-                            <or-translate value="error"></or-translate>
-                            <span> = </span> 
-                            <or-translate .value="${errorMessage}"></or-translate>
-                    ` : ``}
-                    </p>
-                </div>`;
-
-    return showOkDialog(title, content, undefined, hostElement);
-}
-
-export async function showOkCancelDialog(title: string, content: string | TemplateResult, okText?: string, hostElement?: HTMLElement) {
-
-    const deferred = new Util.Deferred<boolean>();
-
-    showDialog(
-        new OrMwcDialog()
-            .setContent(typeof(content) === "string" ? html`<p>${content}</p>` : content)
-            .setActions(
-                [
-                    {
-                        actionName: "cancel",
-                        content: "cancel",
-                        default: true,
-                        action: () => deferred.resolve(false)
-                    },
-                    {
-                        actionName: "ok",
-                        content: okText ? okText : i18next.t("ok"),
-                        action: () => deferred.resolve(true)
-                    }
-                ]
-            )
-            .setHeading(title)
-            .setStyles(html`
-                    <style>
-                        .mdc-dialog__content {
-                            white-space: pre-wrap
-                        }
-                    </style>
-                `),
-        hostElement);
-
-    return await deferred.promise;
-}
-
-export async function showOkDialog(title: string, content: string | TemplateResult, okText?: string, hostElement?: HTMLElement) {
-
-    const deferred = new Util.Deferred<boolean>();
-
-    showDialog(
-        new OrMwcDialog()
-            .setContent(typeof(content) === "string" ? html`<p>${content}</p>` : content)
-            .setActions(
-                [
-                    {
-                        actionName: "ok",
-                        default: true,
-                        content: okText ? okText : i18next.t("ok"),
-                        action: () => deferred.resolve(true)
-                    }
-                ]
-            )
-            .setHeading(title),
-        hostElement);
-
-    return await deferred.promise;
-}
-
-export function showDialog<T extends OrMwcDialog>(dialog: T, hostElement?: HTMLElement): T {
-    if (!hostElement) {
-        hostElement = OrMwcDialog.DialogHostElement || document.body;
-    }
-
-    dialog.setOpen(true);
-    dialog.addEventListener(OrMwcDialogOpenedEvent.NAME, (ev) => {
-        ev.stopPropagation();
-    });
-    dialog.addEventListener(OrMwcDialogClosedEvent.NAME, (ev) => {
-        ev.stopPropagation();
-        window.setTimeout(() => {
-            if (dialog.parentElement) {
-                dialog.parentElement.removeChild(dialog);
-            }
-        }, 0);
-    });
-    hostElement.append(dialog);
-    return dialog;
-}
-
-// language=CSS
-const style = css`
-    :host {
-        position: relative;
-    }
-
-    .dialog-container {
-        display: flex;
-        flex-direction: row;
-    }
-
-    .dialog-container > * {
-        flex: 1 1 0;
-    }
-    
-    .mdc-list {
-        padding: 0 24px
-    }
-
-    .mdc-dialog .mdc-dialog__surface {
-        outline: none;
-    }
-    
-    @media (min-width: 1280px) {
-        .mdc-dialog .mdc-dialog__surface {
-            max-width: 1024px;
-        }
-    }
-`;
-
-@customElement("or-mwc-dialog")
-export class OrMwcDialog extends LitElement {
-
-    /**
-     * Can be set by apps to control where in the DOM dialogs are added
-     */
-    public static DialogHostElement: HTMLElement;
-
-    static get styles() {
-        return [
-            css`${unsafeCSS(dialogStyle)}`,
-            css`${unsafeCSS(listStyle)}`,
-            style
-        ];
-    }
-
-    @property({type: String})
-    public heading?: string | TemplateResult;
-
-    @property({type: Object, attribute: false})
-    public content?: TemplateResult | (() => TemplateResult);
-
-    @property({type: Array, attribute: false})
-    public actions?: DialogAction[];
-
-    @property({type: Object, attribute: false})
-    public dismissAction: DialogActionBase | null | undefined;
-
-    @property({type: Boolean})
-    public avatar?: boolean;
-
-    @property()
-    public styles?: TemplateResult | string;
-
-    @property({attribute: false})
-    protected _open: boolean = false;
-
-    @query("#dialog")
-    protected _mdcElem!: HTMLElement;
-
-    protected _mdcComponent?: MDCDialog;
-
-    // Bind for the 'popstate' event that tracks changes in the browser history.
-    protected _popstateEventBind = (ev: PopStateEvent) => this._onBrowserNavigate(ev);
-
-    public get isOpen() {
-        return this._mdcComponent ? this._mdcComponent.isOpen : false;
-    }
-
-    public setOpen(isOpen: boolean): OrMwcDialog  {
-        this._open = true;
-        return this;
-    }
-
-    public setHeading(heading: TemplateResult | string | undefined): OrMwcDialog {
-        this.heading = heading;
-        return this;
-    }
-
-    public setContent(content: TemplateResult | (() => TemplateResult) | undefined): OrMwcDialog {
-        this.content = content;
-        return this;
-    }
-
-    public setActions(actions: DialogAction[] | undefined): OrMwcDialog {
-        this.actions = actions;
-        return this;
-    }
-
-    public setDismissAction(action: DialogActionBase | null | undefined): OrMwcDialog {
-        this.dismissAction = action;
-        return this;
-    }
-
-    public setStyles(styles: string | TemplateResult | undefined): OrMwcDialog {
-        this.styles = styles;
-        return this;
-    }
-
-    public setAvatar(avatar: boolean | undefined): OrMwcDialog {
-        this.avatar = avatar;
-        return this;
-    }
-
-    public open() {
-        if (this._mdcElem && !this._mdcComponent) {
-            this._mdcComponent = new MDCDialog(this._mdcElem);
-            this._mdcComponent!.scrimClickAction = this.dismissAction || this.dismissAction === null ? "close" : "";
-        }
-        if (this._mdcComponent) {
-            this._mdcComponent.open();
-        }
-    }
-
-    public close(action?: string) {
-        if (this._mdcComponent) {
-            this._mdcComponent.close(action);
-        }
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener("popstate", this._popstateEventBind);
-    }
-
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        window.removeEventListener("popstate", this._popstateEventBind);
-        if (this._mdcComponent) {
-            this._mdcComponent.destroy();
-            this._mdcComponent = undefined;
-        }
-    }
-
-    protected render() {
-
-        return html`
-            ${typeof(this.styles) === "string" ?  html`<style>${this.styles}</style>` : this.styles || ``}
-            
-            <div id="dialog"
-                class="mdc-dialog"
-                role="alertdialog"
-                aria-modal="true"
-                aria-labelledby="dialog-title"
-                aria-describedby="dialog-content"
-                @MDCDialog:opened="${() => this._onDialogOpened()}"
-                @MDCDialog:closed="${(evt: any) => this._onDialogClosed(evt.detail.action)}">
-                <div class="mdc-dialog__container">
-                    <div class="mdc-dialog__surface" tabindex="0">
-						${typeof(this.heading) === "string" ? html`<h2 class="mdc-dialog__title" id="dialog-title"><or-translate value="${this.heading}"></or-translate></h2>`
-                            : this.heading ? html`<span class="mdc-dialog__title" id="dialog-title">${this.heading}</span>` : ``}
-                        ${this.content ? html` 
-                            <div class="dialog-container mdc-dialog__content" id="dialog-content">
-                                ${typeof this.content === "function" ? this.content() : this.content}
-                            </div>
-                            <footer class="mdc-dialog__actions">
-                                ${this.actions ? this.actions.map((action) => {
-                                    return html`
-                                    <div class="mdc-button mdc-dialog__button" ?data-mdc-dialog-button-default="${action.default}" data-mdc-dialog-action="${action.disabled ? undefined : action.actionName}">
-                                        ${typeof(action.content) === "string" ? html`<or-mwc-input .type="${InputType.BUTTON}" @or-mwc-input-changed="${(ev: Event) => {if ((ev.currentTarget as OrMwcInput).disabled) ev.stopPropagation()}}" .disabled="${action.disabled}" .label="${action.content}"></or-mwc-input>` : action.content}
-                                    </div>`;
-                                }) : ``}
-                            </footer>
-                        ` : html`
-                            <ul class="mdc-list ${this.avatar ? "mdc-list--avatar-list" : ""}">
-                                ${!this.actions ? `` : this.actions!.map((action, index) => {
-                                    return html`<li class="mdc-list-item" data-mdc-dialog-action="${action.actionName}"><span class="mdc-list-item__text">${action.content}</span></li>`;                    
-                                })}
-                            </ul>
-                        `}
-                    </div>
-                </div>
-                <div class="mdc-dialog__scrim"></div>
-            </div>
-        `;
-    }
-
-    protected updated(_changedProperties: PropertyValues) {
-        super.updated(_changedProperties);
-        if (_changedProperties.has("_open") && this._open) {
-            this.open();
-        }
-    }
-
-    protected _onDialogOpened() {
-        this.dispatchEvent(new OrMwcDialogOpenedEvent());
-    }
-
-    protected _onDialogClosed(action?: string) {
-        if (action === "close" && this.dismissAction && this.dismissAction.action) {
-            this.dismissAction.action(this);
-        } else if (action && this.actions) {
-            const matchedAction = this.actions.find((dialogAction) => dialogAction.actionName === action);
-            if (matchedAction && matchedAction.action) {
-                matchedAction.action(this);
-            }
-        }
-        if (this._mdcComponent) {
-            this._mdcComponent.destroy();
-            this._mdcComponent = undefined;
-        }
-        this.dispatchEvent(new OrMwcDialogClosedEvent(action));
-    }
-
-    /**
-     * Function callback for when the browser window navigates to another place.
-     * We attempt to close the dialog when this occurs.
-     */
-    protected _onBrowserNavigate(ev: PopStateEvent) {
-        this.close("close");
-    }
-}

package/src/or-mwc-drawer.ts

@@ -1,100 +0,0 @@
-import { css, html, LitElement, TemplateResult, unsafeCSS} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import { MDCDrawer } from "@material/drawer";
-import { classMap } from "lit/directives/class-map.js";
-
-const drawerStyle = require("@material/drawer/dist/mdc.drawer.css");
-
-export class OrMwcDrawerChangedEvent extends CustomEvent<boolean> {
-
-  public static readonly NAME = "or-mwc-drawer-changed";
-
-  constructor(value: boolean) {
-    super(OrMwcDrawerChangedEvent.NAME, {
-      detail: value,
-      bubbles: true,
-      composed: true
-    });
-  }
-}
-
-@customElement("or-mwc-drawer")
-export class OrMwcDrawer extends LitElement {
-
-  public static get styles() {
-    return [
-      css`${unsafeCSS(drawerStyle)}`,
-      css`
-      .transparent{
-        background: none;
-      }`
-    ];
-  }
-
-  @property({ attribute: false }) public header!: TemplateResult;
-
-  @property({ type: Boolean }) public dismissible: boolean = false;
-  @property({ type: Boolean }) public rightSided: boolean = false;
-  @property({ type: Boolean }) public transparent: boolean = false;
-  @property({ type: Boolean }) public open: boolean = false;
-
-  @property({ attribute: false }) public appContent!: HTMLElement;
-  @property({ attribute: false }) public topBar!: HTMLElement;
-
-  @query(".mdc-drawer")
-  protected drawerElement!: HTMLElement;
-  protected drawer?: MDCDrawer;
-
-  public toggle() {
-    this.open = !this.open;
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    if (this.drawer) {
-      this.drawer.destroy();
-      this.drawer = undefined;
-    }
-  }
-
-  protected render() {
-    const isModal = !this.dismissible;
-    const classes = {
-      "mdc-drawer--dismissible": this.dismissible,
-      "mdc-drawer--modal": isModal,
-      "transparent": this.transparent
-    };
-
-    return html`
-      <aside class="mdc-drawer ${classMap(classes)}" dir="${(this.rightSided ? "rtl" : "ltr")}">
-        ${this.header}
-        <div class="mdc-drawer__content" dir="ltr">
-          <slot></slot>
-        </div>
-      </aside>`;
-  }
-
-  protected updated() {
-    if (this.drawer!.open !== this.open) {
-      this.drawer!.open = this.open;
-    }
-  }
-
-  protected dispatchChangedEvent(value: boolean) {
-    this.dispatchEvent(new OrMwcDrawerChangedEvent(value));
-  }
-
-  protected firstUpdated() {
-    this.drawer = MDCDrawer.attachTo(this.drawerElement);
-    const openHandler = () => { this.dispatchChangedEvent(true); };
-    const closeHandler = () => { this.dispatchChangedEvent(false); };
-    this.drawer!.listen("MDCDrawer:opened", openHandler);
-    this.drawer!.listen("MDCDrawer:closed", closeHandler);
-    if (this.appContent) {
-      this.appContent.classList.add("mdc-drawer-app-content");
-    }
-    if (this.topBar) {
-      this.topBar.classList.add("mdc-top-app-bar");
-    }
-  }
-}