@openremote/or-mwc-components 1.8.0 → 1.8.1

package/src/or-mwc-list.ts

@@ -1,335 +0,0 @@
-import {
-    css,
-    html,
-    LitElement,
-    PropertyValues,
-    TemplateResult,
-    unsafeCSS
-} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import {styleMap} from "lit/directives/style-map.js";
-import {ifDefined} from "lit/directives/if-defined.js";
-import {MDCList, MDCListActionEvent} from "@material/list";
-import { DefaultColor8, DefaultColor4, Util } from "@openremote/core";
-import "@openremote/or-translate";
-import { i18next } from "@openremote/or-translate";
-const listStyle = require("@material/list/dist/mdc.list.css");
-const checkboxStyle = require("@material/checkbox/dist/mdc.checkbox.css");
-
-export {MDCListActionEvent};
-
-export interface ListItem {
-    icon?: string;
-    trailingIcon?: string;
-    text?: string;
-    translate?: boolean;
-    secondaryText?: string;
-    value: any;
-    data?: any;
-    styleMap?: {[style: string]: string};
-}
-
-export class OrMwcListChangedEvent extends CustomEvent<ListItem[]> {
-
-    public static readonly NAME = "or-mwc-list-changed";
-
-    constructor(items: ListItem[]) {
-        super(OrMwcListChangedEvent.NAME, {
-            detail: items,
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-declare global {
-    export interface HTMLElementEventMap {
-        [OrMwcListChangedEvent.NAME]: OrMwcListChangedEvent;
-    }
-}
-
-export enum ListType {
-    PLAIN = "PLAIN",
-    SELECT = "SELECT",
-    RADIO = "RADIO",
-    MULTI_CHECKBOX = "MULTI_CHECKBOX",
-    MULTI_TICK = "MULTI_TICK"
-}
-
-export type ListGroupItem = {
-    heading: string;
-    list: TemplateResult;
-};
-
-export function createListGroup(lists: ListGroupItem[]) {
-    return html`
-        <div class="mdc-list-group">
-            ${lists.map((list) => {
-                return html`
-                    <h3 class="mdc-list-group__subheader">${list.heading}</h3>
-                    ${list.list}
-                `                            
-            })}
-        </div>    
-    `;
-}
-
-export function getListTemplate(type: ListType, content: TemplateResult, isTwoLine?: boolean, role?: string, actionHandler?: (ev: MDCListActionEvent) => void): TemplateResult {
-
-    role = role || "listbox";
-
-    switch (type) {
-        case ListType.RADIO:
-            role = "radiogroup";
-            break;
-        case ListType.MULTI_CHECKBOX:
-            role = "group";
-            break;
-    }
-
-    return html`
-        <ul id="list" class="mdc-list${isTwoLine ? " mdc-list--two-line" : ""}" role="${ifDefined(role)}" @MDCList:action="${(ev: MDCListActionEvent) => actionHandler && actionHandler(ev)}" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
-            ${content}
-        </ul>
-    `;
-}
-
-export function getItemTemplate(item: ListItem | null, index: number, selectedValues: any[], type: ListType, translate?: boolean, itemClickCallback?: (e: MouseEvent, item: ListItem) => void): TemplateResult {
-
-    if (item === null) {
-        // Divider
-        return html`<li role="separator" class="mdc-list-divider"></li>`;
-    }
-
-    const listItem = item as ListItem;
-    const multiSelect = type === ListType.MULTI_CHECKBOX || type === ListType.MULTI_TICK;
-    const value = listItem.value;
-    const isSelected = type !== ListType.PLAIN && selectedValues.length > 0 && selectedValues.some((v) => v === value);
-    const text = listItem.text !== undefined ? listItem.text : listItem.value;
-    const secondaryText = listItem.secondaryText;
-    let role: string | undefined = "menuitem";
-    let ariaSelected: string | undefined;
-    let ariaChecked: string | undefined;
-    let tabIndex: string | undefined;
-    let textTemplate: TemplateResult | string = ``;
-    let leftTemplate: TemplateResult | string = ``;
-    let rightTemplate: TemplateResult | string = ``;
-    let icon = listItem.icon;
-    let selectedClassName = "mdc-list-item--selected";
-    translate = translate || item.translate;
-    
-    if (multiSelect && type === ListType.MULTI_TICK) {
-        icon = isSelected ? "checkbox-marked" : "checkbox-blank-outline";
-    }
-
-    if (type === ListType.MULTI_TICK || icon) {
-        leftTemplate = html`
-                <span class="mdc-list-item__graphic">
-                    <or-icon icon="${icon}"></or-icon>
-                </span>
-            `;
-    }
-
-    if (listItem.trailingIcon) {
-        rightTemplate = html`
-                <span class="mdc-list-item__meta" aria-hidden="true">
-                    <or-icon icon="${listItem.trailingIcon}"></or-icon>
-                </span>
-            `;
-    }
-
-    switch (type) {
-        case ListType.SELECT:
-            ariaSelected = isSelected ? "true" : "false";
-            tabIndex = isSelected || ((!selectedValues || selectedValues.length === 0) && index === 0) ? "0" : undefined;
-            role = "option";
-            break;
-        case ListType.RADIO:
-            ariaChecked = isSelected ? "true" : "false";
-            role = "radio";
-            leftTemplate = html`
-                    <span class="mdc-list-item__graphic">
-                        <div class="mdc-radio">
-                            <input class="mdc-radio__native-control" id="radio-item-${index+1}" type="radio" value="${value}" />
-                            <div class="mdc-radio__background">
-                                <div class="mdc-radio__outer-circle"></div>
-                                <div class="mdc-radio__inner-circle"></div>
-                            </div>
-                        </div>
-                    </span>
-                `;
-            break;
-        case ListType.MULTI_CHECKBOX:
-            ariaChecked = isSelected ? "true" : "false";
-            role = "checkbox";
-            leftTemplate = html`
-                    <div class="mdc-checkbox">
-                        <input type="checkbox" class="mdc-checkbox__native-control" />
-                        <div class="mdc-checkbox__background">
-                            <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
-                            </svg>
-                            <div class="mdc-checkbox__mixedmark"></div>
-                        </div>
-                    </div>
-                `;
-            break;
-        case ListType.MULTI_TICK:
-            ariaChecked = isSelected ? "true" : "false";
-            selectedClassName = "mdc-list-item--selected";
-            break;
-    }
-
-    if (text) {
-        if (secondaryText !== undefined) {
-            textTemplate = html`
-                    <span class="mdc-list-item__text">
-                        <span class="mdc-list-item__primary-text">${translate && !!text ? html`<or-translate value="${text}"></or-translate>` : text}</span>
-                        <span class="mdc-list-item__secondary-text">${translate && !!secondaryText ? html`<or-translate value="${secondaryText}"></or-translate>` : secondaryText}</span>
-                    </span>
-                `;
-        } else {
-            if (type === ListType.RADIO) {
-                textTemplate = html`<label class="mdc-list-item__text" for="radio-item-${index+1}">${translate && !!text ? html`<or-translate value="${text}"></or-translate>` : text}</label>`;
-            } else {
-                textTemplate = html`<span class="mdc-list-item__text" title="${translate && !!text ? i18next.t(text) : text}">${translate && !!text ? html`<or-translate value="${text}"></or-translate>` : text}</span>`;
-            }
-        }
-    }
-
-    return html`
-        <li @click="${(e: MouseEvent) => { itemClickCallback && itemClickCallback(e, item)}}" style="${listItem.styleMap ? styleMap(listItem.styleMap) : ""}" class="mdc-list-item ${isSelected ? selectedClassName : ""}" role="${ifDefined(role)}" tabindex="${ifDefined(tabIndex)}" aria-checked="${ifDefined(ariaChecked)}" aria-selected="${ifDefined(ariaSelected)}" data-value="${value}">
-            <span class="mdc-list-item__ripple"></span>
-            ${leftTemplate}
-            ${textTemplate}
-            ${rightTemplate}
-        </li>
-    `;
-}
-
-// language=CSS
-const style = css`
-    :host {
-        white-space: nowrap;
-        --internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));    
-        --internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${unsafeCSS(DefaultColor8)}));
-        
-        --mdc-theme-primary: var(--internal-or-mwc-input-color);
-        --mdc-theme-on-primary: var(--internal-or-mwc-input-text-color);
-        --mdc-theme-secondary: var(--internal-or-mwc-input-color);
-    }
-    
-    .mdc-list-item__graphic {
-        margin-right: 16px;
-    }
-
-    a {
-        text-decoration: none;
-        color: rgba(0, 0, 0, 0.87);
-    }     
-`;
-
-@customElement("or-mwc-list")
-export class OrMwcList extends LitElement {
-
-    static get styles() {
-        return [
-            css`${unsafeCSS(listStyle)}`,
-            css`${unsafeCSS(checkboxStyle)}`,
-            style
-        ];
-    }
-
-    @property({type: Array})
-    public listItems?: (ListItem | null)[];
-
-    @property({type: Array})
-    public values?: string[] | string;
-
-    @property({type: String, attribute: true})
-    public type: ListType = ListType.SELECT;
-
-    @query("#wrapper")
-    protected _wrapperElem!: HTMLElement;
-
-    @query("#list")
-    protected _mdcElem!: HTMLElement;
-
-    protected _mdcComponent?: MDCList;
-
-    constructor() {
-        super();
-    }
-
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        if (this._mdcComponent) {
-            this._mdcComponent.destroy();
-            this._mdcComponent = undefined;
-        }
-    }
-
-    protected shouldUpdate(_changedProperties: PropertyValues): boolean {
-        if (this._mdcComponent && _changedProperties.has("values")) {
-            if (!Util.objectsEqual(this.values, _changedProperties.get("values"))) {
-                const vals = this.values ? Array.isArray(this.values) ? this.values : [this.values] : [];
-                this.setSelectedItems(this.values && this.listItems ? this.listItems.filter((li) => li && vals?.includes(li.value)) as ListItem[] : undefined);
-            }
-        }
-
-        return true;
-    }
-
-    protected render() {
-        const content = !this.listItems ? html`` : html`${this.listItems.map((listItem, index) => getItemTemplate(listItem, index, (Array.isArray(this.values) ? this.values : this.values ? [this.values] : []), this.type))}`;
-        const isTwoLine = this.listItems && this.listItems.some((item) => item && !!item.secondaryText);
-        return getListTemplate(this.type, content, isTwoLine, undefined, (ev) => this._onSelected(ev));
-    }
-
-    protected firstUpdated(_changedProperties: PropertyValues): void {
-        super.firstUpdated(_changedProperties);
-        if (this._mdcElem) {
-            this._mdcComponent = new MDCList(this._mdcElem);
-            if (this.type === ListType.SELECT || this.type === ListType.RADIO) {
-                this._mdcComponent.singleSelection = true;
-            }
-        }
-    }
-
-    public get selectedItems(): ListItem[] {
-        if (!this._mdcComponent) {
-            return [];
-        }
-
-        const selectedIndexes = Array.isArray(this._mdcComponent.selectedIndex) ? this._mdcComponent.selectedIndex : [this._mdcComponent.selectedIndex];
-        const items = this.listItems ? this.listItems.filter((item) => item !== null) as ListItem[] : [];
-        return selectedIndexes.map((index) => items![index]);
-    }
-
-    public setSelectedItems(items: ListItem | ListItem[] | string | string[] | undefined) {
-        if (!this._mdcComponent || !this.listItems) {
-            return;
-        }
-        if (!items) {
-            this._mdcComponent.selectedIndex = -1;
-            return;
-        }
-
-        const itemArr = (!Array.isArray(items) ? [items] : items).map((item) => typeof(item) === "string" ? item : item.value);
-        const listItems = this.listItems.filter((item) => item !== null) as ListItem[];
-
-        const indexes = listItems.reduce((indexes, listItem, index) => {
-            if (listItem && itemArr.includes(listItem.value)) {
-                indexes.push(index);
-            }
-            return indexes;
-        }, [] as number[]);
-
-        this._mdcComponent.selectedIndex = this.type === ListType.MULTI_CHECKBOX ? indexes : indexes.length >= 1 ? indexes[0] : -1;
-    }
-
-    protected _onSelected(ev: MDCListActionEvent) {
-        this.values = this.selectedItems.map((item) => item.value!);
-        ev.stopPropagation();
-        this.dispatchEvent(new OrMwcListChangedEvent(this.selectedItems));
-    }
-}

package/src/or-mwc-menu.ts

@@ -1,279 +0,0 @@
-import {
-    css,
-    html,
-    LitElement,
-    PropertyValues,
-    TemplateResult,
-    unsafeCSS
-} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import {classMap} from 'lit/directives/class-map.js';
-import {MDCMenu} from "@material/menu";
-import {DefaultColor4, DefaultColor8} from "@openremote/core";
-
-// @ts-ignore
-import listStyle from "@material/list/dist/mdc.list.css";
-// @ts-ignore
-import menuSurfaceStyle from "@material/menu-surface/dist/mdc.menu-surface.css";
-import {getItemTemplate, getListTemplate, ListItem, ListType, MDCListActionEvent} from "./or-mwc-list";
-import { ref } from 'lit/directives/ref.js';
-// @ts-ignore
-const menuStyle = require("@material/menu/dist/mdc.menu.css");
-
-export class OrMwcMenuChangedEvent extends CustomEvent<any[] | any> {
-
-    public static readonly NAME = "or-mwc-menu-changed";
-
-    constructor(values: any[] | any) {
-        super(OrMwcMenuChangedEvent.NAME, {
-            detail: values,
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-
-export class OrMwcMenuClosedEvent extends CustomEvent<void> {
-
-    public static readonly NAME = "or-mwc-menu-closed";
-
-    constructor() {
-        super(OrMwcMenuClosedEvent.NAME, {
-            bubbles: true,
-            composed: true
-        });
-    }
-}
-
-declare global {
-    export interface HTMLElementEventMap {
-        [OrMwcMenuChangedEvent.NAME]: OrMwcMenuChangedEvent;
-        [OrMwcMenuClosedEvent.NAME]: OrMwcMenuClosedEvent;
-    }
-}
-
-export function positionMenuAtElement<T extends OrMwcMenu>(
-    menu: T,
-    hostElement?: HTMLElement
-): T {
-    if (!hostElement) {
-        hostElement = document.body;
-    }
-    const rect = hostElement.getBoundingClientRect();
-
-    // Applying a style that is calculated from the runtime coordinates of
-    // the host element.
-    Object.assign(menu.style, {
-        position: 'fixed',
-        top: `${rect.bottom}px`,
-        left: `${rect.left}px`,
-        zIndex: '1000',
-        display: 'block'
-    });
-
-    return menu;
-}
-
-export function getContentWithMenuTemplate(content: TemplateResult, menuItems: (ListItem | ListItem[] | null)[], selectedValues: string[] | string | undefined, valueChangedCallback: (values: string[] | string) => void, closedCallback?: () => void, multiSelect = false, translateValues = true, midHeight = false, fullWidth = false, menuId = "menu", fixedToHost = false): TemplateResult {
-    let menuRef: OrMwcMenu | null = null;   // Reference to the menu
-
-    const openMenu = (evt: Event) => {
-        if (!menuItems) {
-            return;
-        }
-
-        if (fixedToHost && menuRef) {
-            const hostElement = evt.currentTarget as HTMLElement;
-
-            // Using run time coordinates to assign a fixed position to the menu
-            positionMenuAtElement(
-                menuRef,
-                hostElement
-            );
-        }
-        ((evt.currentTarget as Element).parentElement!.lastElementChild as OrMwcMenu).open();
-    };
-
-    return html`
-        <span>
-            <span @click="${openMenu}">${content}</span>
-            ${menuItems ? html`<or-mwc-menu ?multiselect="${multiSelect}" @or-mwc-menu-closed="${() => {if (closedCallback) { closedCallback(); }} }" @or-mwc-menu-changed="${(evt: OrMwcMenuChangedEvent) => {if (valueChangedCallback) { valueChangedCallback(evt.detail); }} }" .translateValues="${translateValues}" .values="${selectedValues}" .menuItems="${menuItems}" .midHeight="${midHeight}" .fullWidth="${fullWidth}" id="${menuId}" ${ref(el => (menuRef = el as OrMwcMenu))}></or-mwc-menu>` : ``}
-        </span>
-    `;
-}
-
-// language=CSS
-const style = css`
-    :host {
-        white-space: nowrap;
-        --internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));    
-        --internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${unsafeCSS(DefaultColor8)}));
-        
-        --mdc-theme-primary: var(--internal-or-mwc-input-color);
-        --mdc-theme-on-primary: var(--internal-or-mwc-input-text-color);
-        --mdc-theme-secondary: var(--internal-or-mwc-input-color);
-    }
-    
-    .mdc-list-item__graphic {
-        margin-right: 16px;
-    }   
-
-    a {
-        text-decoration: none;
-        color: rgba(0, 0, 0, 0.87);
-    }
-     
-    .mdc-menu-surface-mid-height {
-        max-height: calc(45vh - 32px) !important;
-    }
-    .mdc-menu-surface-full-width {
-        width: 100%;
-    }
-`;
-
-@customElement("or-mwc-menu")
-export class OrMwcMenu extends LitElement {
-
-    static get styles() {
-        return [
-            css`${unsafeCSS(listStyle)}`,
-            css`${unsafeCSS(menuStyle)}`,
-            css`${unsafeCSS(menuSurfaceStyle)}`,
-            style
-        ];
-    }
-
-    @property({type: Array})
-    public menuItems?: (ListItem | ListItem[] | null)[];
-
-    @property({type: Array})
-    public values?: any[] | any;
-
-    @property({type: Boolean, attribute: true})
-    public multiSelect?: boolean;
-
-    @property({type: Boolean, attribute: true})
-    public visible?: boolean;
-
-    @property({type: Boolean, attribute: true})
-    public translateValues?: boolean;
-
-    @property({type: Boolean, attribute: false})
-    public midHeight?: boolean;
-
-    @property({type: Boolean, attribute: false})
-    public fullWidth?: boolean;
-
-    @query("#wrapper")
-    protected _wrapperElem!: HTMLElement;
-
-    @query("#menu")
-    protected _mdcElem!: HTMLElement;
-
-    protected _mdcComponent?: MDCMenu;
-
-    public open() {
-        this._mdcComponent!.open = true;
-    }
-
-    disconnectedCallback(): void {
-        super.disconnectedCallback();
-        if (this._mdcComponent) {
-            this._mdcComponent.destroy();
-            this._mdcComponent = undefined;
-        }
-    }
-
-    protected render() {
-
-        if (!this.menuItems || this.menuItems.length === 0) {
-            return html``;
-        }
-
-        const content = this.getItemsTemplate(this.menuItems, this.translateValues);
-        const isTwoLine = this.menuItems && this.menuItems.some((item) => item && !Array.isArray(item) && !!item.secondaryText);
-
-        const classes = {
-            'mdc-menu-surface-mid-height': (this.midHeight ? 1 : 0),
-            'mdc-menu-surface-full-width': (this.fullWidth ? 1 : 0)
-        }
-        return html`
-            <div id="wrapper" class="mdc-menu-surface--anchor">
-                <div class="mdc-menu mdc-menu-surface ${classMap(classes)}" id="menu" @MDCMenuSurface:closed="${this._onMenuClosed}">
-                    ${getListTemplate(ListType.MULTI_TICK, content, isTwoLine, "menu")}
-                </div>
-            </div>
-        `;
-    }
-
-    protected getItemsTemplate(items: (ListItem | ListItem[] | null)[], translate?: boolean): TemplateResult {
-
-        const type = this.multiSelect ? ListType.MULTI_TICK : ListType.PLAIN;
-
-        return html`
-            ${items.map((item, index) => {
-
-            if (Array.isArray(item)) {
-                return html`
-                    <li>
-                        <ul class="mdc-menu__selection-group">
-                            ${this.getItemsTemplate(item, translate)}
-                        </ul>
-                    </li>
-                `;
-            }
-
-            return getItemTemplate(item, index, (Array.isArray(this.values) ? this.values : this.values ? [this.values] : []), type, translate, (e, item) => this._itemClicked(e, item));
-        })}`;
-    }
-
-    protected firstUpdated(_changedProperties: PropertyValues): void {
-        super.firstUpdated(_changedProperties);
-        if (this._mdcElem) {
-            this._mdcComponent = new MDCMenu(this._mdcElem);
-
-            // This overrides the standard mdc menu body click capture handler as it doesn't work with webcomponents
-            (this._mdcComponent as any).menuSurface_.foundation.handleBodyClick = function (evt: MouseEvent) {
-                const el = evt.composedPath()[0]; // Use composed path not evt target to work with webcomponents
-                if (this.adapter.isElementInContainer(el)) {
-                    return;
-                }
-                this.close();
-            };
-
-            this._mdcComponent!.quickOpen = true;
-        }
-    }
-
-    protected updated(_changedProperties: PropertyValues): void {
-        if (_changedProperties.has("visible")) {
-            this._mdcComponent!.open = this.visible || false;
-        }
-    }
-
-    protected _onMenuClosed() {
-        this.dispatchEvent(new OrMwcMenuClosedEvent());
-    }
-
-    private _itemClicked(e: MouseEvent, item: ListItem) {
-        e.stopPropagation();
-        const value = item.value;
-
-        if (!this.multiSelect) {
-            this.values = value;
-            this._mdcComponent!.open = false;
-        } else {
-            if (!Array.isArray(this.values)) {
-                this.values = this.values ? [this.values] : [];
-            }
-            const index = this.values.findIndex((v: any) => v === value);
-            if (index >= 0) {
-                this.values.splice(index, 1);
-            } else {
-                this.values.push(value);
-            }
-            this.requestUpdate();
-        }
-        this.dispatchEvent(new OrMwcMenuChangedEvent(this.values!));
-    }
-}