@openremote/or-mwc-components 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120000

package/lib/or-mwc-drawer.js

@@ -1,10 +1,114 @@
-var __decorate=this&&this.__decorate||function(e,r,t,a){var d,o=arguments.length,s=o<3?r:null===a?a=Object.getOwnPropertyDescriptor(r,t):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,r,t,a);else for(var i=e.length-1;i>=0;i--)(d=e[i])&&(s=(o<3?d(s):o>3?d(r,t,s):d(r,t))||s);return o>3&&s&&Object.defineProperty(r,t,s),s};import{css as e,html as r,LitElement as t,unsafeCSS as a}from"lit";import{customElement as d,property as o,query as s}from"lit/decorators.js";import{MDCDrawer as i}from"@material/drawer";import{classMap as c}from"lit/directives/class-map.js";let drawerStyle=require("@material/drawer/dist/mdc.drawer.css");export class OrMwcDrawerChangedEvent extends CustomEvent{constructor(e){super(OrMwcDrawerChangedEvent.NAME,{detail:e,bubbles:!0,composed:!0})}}OrMwcDrawerChangedEvent.NAME="or-mwc-drawer-changed";let OrMwcDrawer=class extends t{constructor(){super(...arguments),this.dismissible=!1,this.rightSided=!1,this.transparent=!1,this.open=!1}static get styles(){return[e`${a(drawerStyle)}`,e`
-      .transparent{
-        background: none;
-      }`]}toggle(){this.open=!this.open}disconnectedCallback(){super.disconnectedCallback(),this.drawer&&(this.drawer.destroy(),this.drawer=void 0)}render(){let e=!this.dismissible,t={"mdc-drawer--dismissible":this.dismissible,"mdc-drawer--modal":e,transparent:this.transparent};return r`
-      <aside class="mdc-drawer ${c(t)}" dir="${this.rightSided?"rtl":"ltr"}">
-        ${this.header}
-        <div class="mdc-drawer__content" dir="ltr">
-          <slot></slot>
-        </div>
-      </aside>`}updated(){this.drawer.open!==this.open&&(this.drawer.open=this.open)}dispatchChangedEvent(e){this.dispatchEvent(new OrMwcDrawerChangedEvent(e))}firstUpdated(){this.drawer=i.attachTo(this.drawerElement),this.drawer.listen("MDCDrawer:opened",()=>{this.dispatchChangedEvent(!0)}),this.drawer.listen("MDCDrawer:closed",()=>{this.dispatchChangedEvent(!1)}),this.appContent&&this.appContent.classList.add("mdc-drawer-app-content"),this.topBar&&this.topBar.classList.add("mdc-top-app-bar")}};__decorate([o({attribute:!1})],OrMwcDrawer.prototype,"header",void 0),__decorate([o({type:Boolean})],OrMwcDrawer.prototype,"dismissible",void 0),__decorate([o({type:Boolean})],OrMwcDrawer.prototype,"rightSided",void 0),__decorate([o({type:Boolean})],OrMwcDrawer.prototype,"transparent",void 0),__decorate([o({type:Boolean})],OrMwcDrawer.prototype,"open",void 0),__decorate([o({attribute:!1})],OrMwcDrawer.prototype,"appContent",void 0),__decorate([o({attribute:!1})],OrMwcDrawer.prototype,"topBar",void 0),__decorate([s(".mdc-drawer")],OrMwcDrawer.prototype,"drawerElement",void 0),OrMwcDrawer=__decorate([d("or-mwc-drawer")],OrMwcDrawer);export{OrMwcDrawer};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, 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 {
+    constructor(value) {
+        super(OrMwcDrawerChangedEvent.NAME, {
+            detail: value,
+            bubbles: true,
+            composed: true
+        });
+    }
+}
+OrMwcDrawerChangedEvent.NAME = "or-mwc-drawer-changed";
+let OrMwcDrawer = class OrMwcDrawer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dismissible = false;
+        this.rightSided = false;
+        this.transparent = false;
+        this.open = false;
+    }
+    static get styles() {
+        return [
+            css `${unsafeCSS(drawerStyle)}`,
+            css `
+      .transparent{
+        background: none;
+      }`
+        ];
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.drawer) {
+            this.drawer.destroy();
+            this.drawer = undefined;
+        }
+    }
+    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>`;
+    }
+    updated() {
+        if (this.drawer.open !== this.open) {
+            this.drawer.open = this.open;
+        }
+    }
+    dispatchChangedEvent(value) {
+        this.dispatchEvent(new OrMwcDrawerChangedEvent(value));
+    }
+    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");
+        }
+    }
+};
+__decorate([
+    property({ attribute: false })
+], OrMwcDrawer.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMwcDrawer.prototype, "dismissible", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMwcDrawer.prototype, "rightSided", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMwcDrawer.prototype, "transparent", void 0);
+__decorate([
+    property({ type: Boolean })
+], OrMwcDrawer.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], OrMwcDrawer.prototype, "appContent", void 0);
+__decorate([
+    property({ attribute: false })
+], OrMwcDrawer.prototype, "topBar", void 0);
+__decorate([
+    query(".mdc-drawer")
+], OrMwcDrawer.prototype, "drawerElement", void 0);
+OrMwcDrawer = __decorate([
+    customElement("or-mwc-drawer")
+], OrMwcDrawer);
+export { OrMwcDrawer };
+//# sourceMappingURL=or-mwc-drawer.js.map