@openremote/or-mwc-components 1.8.0 → 1.9.0-snapshot.20250826113849

package/src/or-mwc-tabs.ts

@@ -1,175 +0,0 @@
-import { MDCTabBar } from "@material/tab-bar";
-import {css, CSSResult, html, LitElement, TemplateResult, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import {DefaultColor4, DefaultColor8} from "@openremote/core";
-import {unsafeHTML} from 'lit/directives/unsafe-html.js';
-
-// Material Styling import
-const tabStyle = require("@material/tab/dist/mdc.tab.css");
-const tabBarStyle = require("@material/tab-bar/dist/mdc.tab-bar.css");
-const tabIndicatorStyle = require("@material/tab-indicator/dist/mdc.tab-indicator.css");
-const tabScrollerStyle = require("@material/tab-scroller/dist/mdc.tab-scroller.css");
-
-export interface OrMwcTabItem {
-    name?: string,
-    icon?: string,
-    content?: TemplateResult | string
-}
-
-//language=css
-const tabStyling = css`
-    .mdc-tab {
-        background: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
-    }
-    .mdc-tab .mdc-tab__text-label {
-        color: var(--or-app-color8, ${unsafeCSS(DefaultColor8)});
-    }
-    .mdc-tab .mdc-tab__icon {
-        color: var(--or-app-color8, ${unsafeCSS(DefaultColor8)})
-    }
-    .mdc-tab-indicator .mdc-tab-indicator__content--underline {
-        border-color: var(--or-app-color8, ${unsafeCSS(DefaultColor8)})
-    }
-    .mdc-tab__ripple::before, .mdc-tab__ripple::after {
-        background-color: var(--ripplecolor, ${unsafeCSS(DefaultColor8)});
-    }
-    .mdc-tab-vertical {
-        height: 72px !important; /* 72px is original Material spec */
-    }
-    .mdc-tab-vertical__content {
-        flex-direction: column;
-        gap: 6px; /* 6px is original Material spec */
-    }
-    .mdc-tab-vertical__text-label {
-        padding-left: 0 !important;
-    }
-`
-
-/* ----------------- */
-
-@customElement("or-mwc-tabs")
-export class OrMwcTabs extends LitElement {
-
-    static get styles() {
-        return [unsafeCSS(tabStyle), unsafeCSS(tabBarStyle), unsafeCSS(tabIndicatorStyle), unsafeCSS(tabScrollerStyle), tabStyling];
-    }
-
-    @property({type: Number}) // Selected tab index from the items array
-    protected index?: number;
-
-    @property({type: Array})
-    protected items?: OrMwcTabItem[];
-
-    @property({type: String})
-    protected iconPosition?: "left" | "top";
-
-    @property({type: Boolean})
-    protected noScroll?: boolean;
-
-    @property({type: String})
-    protected bgColor?: string;
-
-    @property({type: String})
-    protected color?: string;
-
-    @property() // Custom styling that gets injected in render()
-    protected styles?: CSSResult | string;
-
-    @state()
-    private mdcTabBar: MDCTabBar | undefined;
-
-
-    constructor() {
-        super();
-
-        // default values
-        if (this.index == null) { this.index = 0; }
-        if (this.items == null) { this.items = []; }
-        if (this.iconPosition == null) { this.iconPosition = "left"; }
-        if (this.noScroll == null) { this.noScroll = false; }
-
-        this.updateComplete.then(() => {
-            const tabBarElement = this.shadowRoot?.querySelector('.mdc-tab-bar');
-            if(tabBarElement != null) {
-                this.mdcTabBar = new MDCTabBar(tabBarElement); // init of material component
-                this.mdcTabBar.listen("MDCTabBar:activated", (event: CustomEvent) => {
-                    this.index = event.detail.index;
-                });
-            }
-
-            if(tabBarElement != null) {
-
-                // Adding classes for Icon top position or not.
-                if(this.iconPosition === "top") {
-                    if(this.items?.find((item) => { return (item.name != null && item.icon != null); }) != undefined) {
-                        tabBarElement.querySelectorAll('.mdc-tab').forEach((value: Element) => { value.classList.add('mdc-tab-vertical'); });
-                        tabBarElement.querySelectorAll('.mdc-tab__content').forEach((value: Element) => { value.classList.add('mdc-tab-vertical__content')});
-                        tabBarElement.querySelectorAll('.mdc-tab__text-label').forEach((value: Element) => { value.classList.add('mdc-tab-vertical__text-label')});
-                    }
-                }
-
-                // Apply colors if set differently
-                if(this.bgColor != null) {
-                    tabBarElement.querySelectorAll('.mdc-tab').forEach((value: Element) => {
-                        (value as HTMLElement).style.background = this.bgColor as string;
-                    });
-                }
-                if(this.color != null) {
-                    tabBarElement.querySelectorAll('.mdc-tab__text-label').forEach((value: Element) => { (value as HTMLElement).style.color = this.color as string; });
-                    tabBarElement.querySelectorAll('.mdc-tab__icon').forEach((value: Element) => { (value as HTMLElement).style.color = this.color as string; })
-                    tabBarElement.querySelectorAll('.mdc-tab-indicator__content--underline').forEach((value: Element) => { (value as HTMLElement).style.borderColor = this.color as string; });
-                    tabBarElement.querySelectorAll('.mdc-tab__ripple').forEach((value: Element) => { (value as HTMLElement).style.setProperty('--ripplecolor', this.color as string); })
-                }
-            }
-        })
-    }
-
-    // If an update happens on either the Index or mdcTabBar object.
-    protected updated(changedProperties: Map<string, any>) {
-        if(changedProperties.has('index') || changedProperties.has('mdcTabBar')) {
-            if(this.mdcTabBar != null && this.index != null) {
-                this.mdcTabBar.activateTab(this.index);
-                this.dispatchEvent(new CustomEvent("activated", { detail: { index: this.index }}))
-            }
-        }
-    }
-
-
-    protected render() {
-        let selectedItem: OrMwcTabItem | undefined;
-        if(this.items != null && this.index != null) {
-            selectedItem = this.items[this.index];
-        }
-        return html`
-            ${typeof(this.styles) === "string" ? html`<style>${this.styles}</style>` : this.styles || ``}
-            <div>
-                <div class="mdc-tab-bar" role="tablist" id="tab-bar">
-                    <div class="mdc-tab-scroller">
-                        <div class="mdc-tab-scroller__scroll-area" style="overflow-x: ${this.noScroll ? 'hidden' : undefined}">
-                            <div class="mdc-tab-scroller__scroll-content">
-                                ${this.items?.map((menuItem => { return html`
-                                    <button class="mdc-tab" role="tab" aria-selected="false" tabindex="${this.items?.indexOf(menuItem)}">
-                                    <span class="mdc-tab__content">
-                                        ${menuItem.icon != null ? html`<or-icon icon="${menuItem.icon}" class="mdc-tab__icon"></or-icon>` : null}
-                                        ${menuItem.name != null ? html`<span class="mdc-tab__text-label">${menuItem.name}</span>` : null}
-                                    </span>
-                                        <span class="mdc-tab-indicator">
-                                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
-                                    </span>
-                                        <span class="mdc-tab__ripple"></span>
-                                    </button>
-                                `}))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div>
-                    <div>
-                        <!-- Content of menu Item. Using either unsafeHTML or HTML depending on input type -->
-                        ${(selectedItem != null && selectedItem.content != null) ? (typeof selectedItem.content == "string" ? unsafeHTML(selectedItem.content as string) : html`${selectedItem.content}`) : undefined}
-                    </div>
-                </div>
-            </div>
-        `
-    }
-}

package/src/style.ts

@@ -1,125 +0,0 @@
-import {css, unsafeCSS} from "lit";
-import {DefaultColor4} from "@openremote/core";
-
-// language=CSS
-export const progressCircular = css`
-           
-            /*  https://codepen.io/finnhvman/pen/bmNdNr  */
-            .pure-material-progress-circular {
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                appearance: none;
-                box-sizing: border-box;
-                border: none;
-                border-radius: 50%;
-                padding: 0.25em;
-                width: 3em;
-                height: 3em;
-                color: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
-                background-color: transparent;
-                font-size: 16px;
-                overflow: hidden;
-            }
-
-            .pure-material-progress-circular::-webkit-progress-bar {
-                background-color: transparent;
-            }
-
-            /* Indeterminate */
-            .pure-material-progress-circular:indeterminate {
-                -webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
-                mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
-                animation: pure-material-progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
-            }
-
-            :-ms-lang(x), .pure-material-progress-circular:indeterminate {
-                animation: none;
-            }
-
-            .pure-material-progress-circular:indeterminate::before,
-            .pure-material-progress-circular:indeterminate::-webkit-progress-value {
-                content: "";
-                display: block;
-                box-sizing: border-box;
-                margin-bottom: 0.25em;
-                border: solid 0.25em transparent;
-                border-top-color: currentColor;
-                border-radius: 50%;
-                width: 100% !important;
-                height: 100%;
-                background-color: transparent;
-                animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
-            }
-
-            .pure-material-progress-circular:indeterminate::-moz-progress-bar {
-                box-sizing: border-box;
-                border: solid 0.25em transparent;
-                border-top-color: currentColor;
-                border-radius: 50%;
-                width: 100%;
-                height: 100%;
-                background-color: transparent;
-                animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
-            }
-
-            .pure-material-progress-circular:indeterminate::-ms-fill {
-                animation-name: -ms-ring;
-            }
-
-            @keyframes pure-material-progress-circular {
-                0% {
-                    transform: rotate(0deg);
-                }
-                12.5% {
-                    transform: rotate(180deg);
-                    animation-timing-function: linear;
-                }
-                25% {
-                    transform: rotate(630deg);
-                }
-                37.5% {
-                    transform: rotate(810deg);
-                    animation-timing-function: linear;
-                }
-                50% {
-                    transform: rotate(1260deg);
-                }
-                62.5% {
-                    transform: rotate(1440deg);
-                    animation-timing-function: linear;
-                }
-                75% {
-                    transform: rotate(1890deg);
-                }
-                87.5% {
-                    transform: rotate(2070deg);
-                    animation-timing-function: linear;
-                }
-                100% {
-                    transform: rotate(2520deg);
-                }
-            }
-
-            @keyframes pure-material-progress-circular-pseudo {
-                0% {
-                    transform: rotate(-30deg);
-                }
-                29.4% {
-                    border-left-color: transparent;
-                }
-                29.41% {
-                    border-left-color: currentColor;
-                }
-                64.7% {
-                    border-bottom-color: transparent;
-                }
-                64.71% {
-                    border-bottom-color: currentColor;
-                }
-                100% {
-                    border-left-color: currentColor;
-                    border-bottom-color: currentColor;
-                    transform: rotate(225deg);
-                }
-            }
-`;

package/test/or-mwc-input.test.ts

@@ -1,46 +0,0 @@
-import { ct, expect } from "@openremote/test";
-
-import { OrMwcInput, InputType } from "@openremote/or-mwc-components/or-mwc-input";
-
-ct("Button should trigger or-mwc-input-changed event", async ({ mount }) => {
-  let clicked = false;
-  const component = await mount(OrMwcInput, {
-    props: {
-      type: InputType.BUTTON,
-      raised: true,
-      label: "button",
-    },
-    on: {
-      "or-mwc-input-changed": () => (clicked = true),
-    },
-  });
-  expect(clicked).toBeFalsy();
-  await component.click();
-  expect(clicked).toBeTruthy();
-});
-
-ct("Switch should switch", async ({ mount }) => {
-  const component = await mount(OrMwcInput, {
-    props: {
-      type: InputType.SWITCH,
-      label: "switch",
-    },
-  });
-  const locator = component.getByRole("switch", { name: "switch" });
-  await expect(locator).not.toBeChecked();
-  await component.click();
-  await expect(locator).toBeChecked();
-});
-
-ct("Input should have text value", async ({ mount }) => {
-  const component = await mount(OrMwcInput, {
-    props: {
-      type: InputType.TEXT,
-      label: "text",
-    },
-  });
-  const locator = component.getByRole("textbox", { name: "text" });
-  await expect(locator).toHaveValue("");
-  await locator.fill("input");
-  await expect(locator).toHaveValue("input");
-});

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "extends": "../../tsconfig",
-  "compilerOptions": {
-    "outDir": "./lib",
-    "rootDir": "src"
-  },
-  "include": [
-    "./src"
-  ],
-  "references": [
-    { "path": "../core" },
-    { "path": "../or-translate" },
-    { "path": "../or-icon" }
-  ]
-}