@fluid-topics/ft-wc-utils 1.1.1 → 1.1.3

package/build/conditional-visibility.d.ts

@@ -0,0 +1,10 @@
+import { Constructor } from "./generic-types";
+import { FtLitElement } from "./FtLitElement";
+export type FtLitElementWithConditionalVisibilityInterface = {
+    forceVisible: boolean;
+    isVisible: boolean;
+    isElementWithConditionalVisibility: boolean;
+};
+type FtLitElementWithConditionalVisibilityType<T extends Constructor<FtLitElement>> = T & Constructor<FtLitElementWithConditionalVisibilityInterface>;
+export declare function withConditionalVisibility<T extends Constructor<FtLitElement>>(Class: T): FtLitElementWithConditionalVisibilityType<T>;
+export {};

package/build/conditional-visibility.js

@@ -0,0 +1,48 @@
+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 { property, state } from "lit/decorators.js";
+export function withConditionalVisibility(Class) {
+    class FtLitElementWithConditionalVisibilityClass extends Class {
+        constructor() {
+            super(...arguments);
+            this.forceVisible = false;
+            this.isVisible = true;
+            this.isElementWithConditionalVisibility = true;
+        }
+        calculateStyles(condition, styleString) {
+            if (condition) {
+                const style = document.createElement("style");
+                style.classList.add("conditional-visibility-style");
+                style.innerHTML = styleString;
+                this.shadowRoot.append(style);
+            }
+        }
+        hideIfNecessary() {
+            const isHidden = !(this.forceVisible || this.isVisible);
+            this.calculateStyles(isHidden, ":host { display: none !important; }");
+        }
+        highlightIfForceVisible() {
+            this.calculateStyles(this.forceVisible, ":host { box-shadow: 0px 0px 0px 8px rgba(227,119,59,0.4) inset; }");
+        }
+        update(props) {
+            super.update(props);
+            this.updateComplete.then(() => {
+                this.shadowRoot.querySelectorAll(".conditional-visibility-style")
+                    .forEach((element) => element.remove());
+                this.hideIfNecessary();
+                this.highlightIfForceVisible();
+            });
+        }
+    }
+    __decorate([
+        property({ type: Boolean, attribute: false })
+    ], FtLitElementWithConditionalVisibilityClass.prototype, "forceVisible", void 0);
+    __decorate([
+        state()
+    ], FtLitElementWithConditionalVisibilityClass.prototype, "isVisible", void 0);
+    return FtLitElementWithConditionalVisibilityClass;
+}