@fluid-topics/ft-in-product-help 1.0.33

package/README.md

@@ -0,0 +1,19 @@
+Embeddable fluid-topics iframe
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-in-product-help
+yarn add @fluid-topics/ft-in-product-help
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-in-product-help"
+
+function render() {
+    return html` <ft-in-product-help portalUrl="http://www.google.fr/" opened></ft-in-product-help> `
+}
+```

package/build/ft-in-product-help.css.d.ts

@@ -0,0 +1,26 @@
+export declare const FtInProductHelpCssVariables: {
+    standardSizeWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    standardSizeHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    topPosition: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    rightPosition: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    bottomPosition: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    leftPosition: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    zIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    theaterSizeWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    theaterSizeHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fullscreenSizeWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    fullscreenSizeHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderStyle: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    shadow: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    topBarHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    iconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    iconGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    tabletBreakpoint: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    desktopBreakpoint: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-in-product-help.css.js

@@ -0,0 +1,83 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtInProductHelpCssVariables = {
+    standardSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-standard-width", "SIZE", "400px"),
+    standardSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-standard-height", "SIZE", "630px"),
+    topPosition: FtCssVariableFactory.create("--ft-in-product-help-top", "SIZE", "unset"),
+    rightPosition: FtCssVariableFactory.create("--ft-in-product-help-right", "SIZE", "1rem"),
+    bottomPosition: FtCssVariableFactory.create("--ft-in-product-help-bottom", "SIZE", "1rem"),
+    leftPosition: FtCssVariableFactory.create("--ft-in-product-help-left", "SIZE", "unset"),
+    zIndex: FtCssVariableFactory.create("--ft-in-product-help-zindex", "NUMBER", "10"),
+    theaterSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-theater-width", "SIZE", "90%"),
+    theaterSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-theater-height", "SIZE", "60%"),
+    fullscreenSizeWidth: FtCssVariableFactory.create("--ft-in-product-help-fullscreen-width", "SIZE", "100%"),
+    fullscreenSizeHeight: FtCssVariableFactory.create("--ft-in-product-help-fullscreen-height", "SIZE", "100%"),
+    borderStyle: FtCssVariableFactory.create("--ft-in-product-help-border-style", "UNKNOWN", "solid"),
+    borderWidth: FtCssVariableFactory.create("--ft-in-product-help-border-width", "SIZE", "0"),
+    borderColor: FtCssVariableFactory.extend("--ft-in-product-help-border-color", designSystemVariables.colorPrimary),
+    borderRadius: FtCssVariableFactory.extend("--ft-in-product-help-border-radius", designSystemVariables.borderRadiusM),
+    shadow: FtCssVariableFactory.extend("--ft-in-product-help-shadow", designSystemVariables.elevation02),
+    topBarHeight: FtCssVariableFactory.create("--ft-in-product-help-top-bar-height", "SIZE", "28px"),
+    iconColor: FtCssVariableFactory.extend("--ft-in-product-help-icon-color", designSystemVariables.colorOnSurface),
+    iconGap: FtCssVariableFactory.create("--ft-in-product-help-icon-gap", "SIZE", "8px"),
+    tabletBreakpoint: FtCssVariableFactory.create("--ft-in-product-help-tablet-breakpoint", "SIZE", "768px"),
+    desktopBreakpoint: FtCssVariableFactory.create("--ft-in-product-help-desktop-breakpoint", "SIZE", "1280px"),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+};
+// language=CSS
+export const styles = css `
+    .ft-in-product-help {
+        display: none;
+        position: fixed;
+        width: ${FtInProductHelpCssVariables.standardSizeWidth};
+        height: ${FtInProductHelpCssVariables.standardSizeHeight};
+        top: ${FtInProductHelpCssVariables.topPosition};
+        right: ${FtInProductHelpCssVariables.rightPosition};
+        bottom: ${FtInProductHelpCssVariables.bottomPosition};
+        left: ${FtInProductHelpCssVariables.leftPosition};
+        z-index: ${FtInProductHelpCssVariables.zIndex};
+
+        border-style: ${FtInProductHelpCssVariables.borderStyle};
+        border-width: ${FtInProductHelpCssVariables.borderWidth};
+        border-color: ${FtInProductHelpCssVariables.borderColor};
+        border-radius: ${FtInProductHelpCssVariables.borderRadius};
+        box-shadow: ${FtInProductHelpCssVariables.shadow};
+        overflow: hidden;
+    }
+
+    .ft-in-product-help.ft-in-product-help--theater {
+        width: ${FtInProductHelpCssVariables.theaterSizeWidth};
+        height: ${FtInProductHelpCssVariables.theaterSizeHeight};
+    }
+
+    .ft-in-product-help.ft-in-product-help--fullscreen {
+        width: 100%;
+        height: 100%;
+        inset: 0;
+        border: none;
+        border-radius: 0;
+    }
+
+    .ft-in-product-help.ft-in-product-help--opened {
+        display: block;
+    }
+
+    .ft-in-product-help--top-bar {
+        height: ${FtInProductHelpCssVariables.topBarHeight};
+        background-color: ${FtInProductHelpCssVariables.colorSurface};
+        display: flex;
+        justify-content: flex-end;
+        gap: ${FtInProductHelpCssVariables.iconGap};
+    }
+
+    .ft-in-product-help--top-bar ft-button:not(.ft-in-product-help--active-mode) {
+        --ft-button-color: ${FtInProductHelpCssVariables.iconColor};
+    }
+
+    iframe {
+        width: 100%;
+        height: calc(100% - ${FtInProductHelpCssVariables.topBarHeight});
+        border: none;
+    }
+`;

package/build/ft-in-product-help.d.ts

@@ -0,0 +1,32 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtInProductHelpMode, FtInProductHelpProperties } from "./ft-in-product-help.properties";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+export declare class FtInProductHelp extends FtLitElement implements FtInProductHelpProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    portalUrl: string;
+    opened: boolean;
+    displayMode: FtInProductHelpMode;
+    closeIcon: string;
+    standardModeIcon: string;
+    disableStandardMode: boolean;
+    theaterModeIcon: string;
+    disableTheaterMode: boolean;
+    fullscreenModeIcon: string;
+    disableFullscreenMode: boolean;
+    iconVariant?: FtIconVariants;
+    allowStandardMode: boolean;
+    allowTheaterMode: boolean;
+    allowFullscreenMode: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected updated(props: PropertyValues): void;
+    private updateModeOnOpen;
+    private computeAllowedModes;
+    private onViewportChange;
+    private setMode;
+    private close;
+    private dispatchVisibilityChange;
+    private isTablet;
+    private isDesktop;
+}

package/build/ft-in-product-help.js

@@ -0,0 +1,188 @@
+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 { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtInProductHelpMode, FtInProductHelpVisibilityChange } from "./ft-in-product-help.properties";
+import { FtInProductHelpCssVariables, styles } from "./ft-in-product-help.css";
+import { FtIcons } from "@fluid-topics/ft-icon";
+import { classMap } from "lit/directives/class-map.js";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtSizeWatcher } from "@fluid-topics/ft-size-watcher";
+class FtInProductHelp extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.portalUrl = "";
+        this.opened = false;
+        this.displayMode = FtInProductHelpMode.STANDARD;
+        this.closeIcon = FtIcons.X_MARK;
+        this.standardModeIcon = FtIcons.PIP;
+        this.disableStandardMode = false;
+        this.theaterModeIcon = FtIcons.PIP_WIDE;
+        this.disableTheaterMode = false;
+        this.fullscreenModeIcon = FtIcons.EXPAND_WIDE;
+        this.disableFullscreenMode = false;
+        this.allowStandardMode = true;
+        this.allowTheaterMode = true;
+        this.allowFullscreenMode = true;
+    }
+    render() {
+        const classes = {
+            "ft-in-product-help": true,
+            "ft-in-product-help--opened": this.opened,
+            "ft-in-product-help--standard": this.displayMode == FtInProductHelpMode.STANDARD,
+            "ft-in-product-help--theater": this.displayMode == FtInProductHelpMode.THEATER,
+            "ft-in-product-help--fullscreen": this.displayMode == FtInProductHelpMode.FULLSCREEN,
+        };
+        const showStandardIcon = this.allowStandardMode && (this.allowTheaterMode || this.allowFullscreenMode);
+        const showTheaterIcon = this.allowTheaterMode && (this.allowStandardMode || this.allowFullscreenMode);
+        const showFullscreenIcon = this.allowFullscreenMode && (this.allowStandardMode || this.allowTheaterMode);
+        return html `
+            <ft-size-watcher @change=${this.onViewportChange}></ft-size-watcher>
+            <div class="${classMap(classes)}" part="container">
+                <div class="ft-in-product-help--top-bar" part="top-bar">
+                    ${showFullscreenIcon ? html `
+                        <ft-button icon="${this.fullscreenModeIcon}"
+                                   class="${this.displayMode == FtInProductHelpMode.FULLSCREEN ? "ft-in-product-help--active-mode" : ""}"
+                                   dense
+                                   .iconVariant=${this.iconVariant}
+                                   part="button-fullscreen top-bar-button"
+                                   @click=${() => this.setMode(FtInProductHelpMode.FULLSCREEN)}
+                        ></ft-button>
+                    ` : nothing}
+                    ${showTheaterIcon ? html `
+                        <ft-button icon="${this.theaterModeIcon}"
+                                   class="${this.displayMode == FtInProductHelpMode.THEATER ? "ft-in-product-help--active-mode" : ""}"
+                                   dense
+                                   .iconVariant=${this.iconVariant}
+                                   part="button-theater top-bar-button"
+                                   @click=${() => this.setMode(FtInProductHelpMode.THEATER)}
+                        ></ft-button>
+                    ` : nothing}
+                    ${showStandardIcon ? html `
+                        <ft-button icon="${this.standardModeIcon}"
+                                   class="${this.displayMode == FtInProductHelpMode.STANDARD ? "ft-in-product-help--active-mode" : ""}"
+                                   dense
+                                   .iconVariant=${this.iconVariant}
+                                   part="button-standard top-bar-button"
+                                   @click=${() => this.setMode(FtInProductHelpMode.STANDARD)}
+                        ></ft-button>
+                    ` : nothing}
+                    <ft-button icon="${this.closeIcon}"
+                               dense
+                               .iconVariant=${this.iconVariant}
+                               part="button-close top-bar-button"
+                               @click=${this.close}
+                    ></ft-button>
+                </div>
+                <iframe src="${this.portalUrl}" part="iframe"/>
+            </div>
+        `;
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has("opened")) {
+            this.updateModeOnOpen();
+        }
+        if (props.has("disableStandardMode") || props.has("disableThreaterMode") || props.has("disableFullscreenMode")) {
+            this.computeAllowedModes();
+        }
+    }
+    updateModeOnOpen() {
+        if (this.allowStandardMode) {
+            this.displayMode = FtInProductHelpMode.STANDARD;
+        }
+        else if (this.allowTheaterMode) {
+            this.displayMode = FtInProductHelpMode.THEATER;
+        }
+        else {
+            this.displayMode = FtInProductHelpMode.FULLSCREEN;
+        }
+    }
+    computeAllowedModes() {
+        this.allowStandardMode = !this.disableStandardMode && (this.isTablet() || this.isDesktop());
+        this.allowTheaterMode = !this.disableTheaterMode && this.isDesktop();
+        this.allowFullscreenMode = !this.disableFullscreenMode;
+    }
+    onViewportChange() {
+        this.computeAllowedModes();
+        if (!this.allowStandardMode && this.displayMode == FtInProductHelpMode.STANDARD) {
+            this.displayMode = FtInProductHelpMode.THEATER;
+        }
+        if (!this.allowTheaterMode && this.displayMode == FtInProductHelpMode.THEATER) {
+            this.displayMode = FtInProductHelpMode.FULLSCREEN;
+        }
+    }
+    setMode(displayMode) {
+        this.displayMode = displayMode;
+        this.dispatchVisibilityChange();
+    }
+    close() {
+        this.opened = false;
+        this.displayMode = FtInProductHelpMode.STANDARD;
+        this.dispatchVisibilityChange();
+    }
+    dispatchVisibilityChange() {
+        this.dispatchEvent(new FtInProductHelpVisibilityChange(this.opened, this.displayMode));
+    }
+    isTablet() {
+        const tabletBreakpoint = getComputedStyle(this).getPropertyValue(FtInProductHelpCssVariables.tabletBreakpoint.name) || FtInProductHelpCssVariables.tabletBreakpoint.defaultValue;
+        return window.matchMedia(`(min-width: ${tabletBreakpoint})`).matches;
+    }
+    isDesktop() {
+        const desktopBreakpoint = getComputedStyle(this).getPropertyValue(FtInProductHelpCssVariables.desktopBreakpoint.name) || FtInProductHelpCssVariables.desktopBreakpoint.defaultValue;
+        return window.matchMedia(`(min-width: ${desktopBreakpoint})`).matches;
+    }
+}
+FtInProductHelp.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-size-watcher": FtSizeWatcher,
+};
+FtInProductHelp.styles = styles;
+__decorate([
+    property()
+], FtInProductHelp.prototype, "portalUrl", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], FtInProductHelp.prototype, "opened", void 0);
+__decorate([
+    property({ reflect: true })
+], FtInProductHelp.prototype, "displayMode", void 0);
+__decorate([
+    property()
+], FtInProductHelp.prototype, "closeIcon", void 0);
+__decorate([
+    property()
+], FtInProductHelp.prototype, "standardModeIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtInProductHelp.prototype, "disableStandardMode", void 0);
+__decorate([
+    property()
+], FtInProductHelp.prototype, "theaterModeIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtInProductHelp.prototype, "disableTheaterMode", void 0);
+__decorate([
+    property()
+], FtInProductHelp.prototype, "fullscreenModeIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtInProductHelp.prototype, "disableFullscreenMode", void 0);
+__decorate([
+    property()
+], FtInProductHelp.prototype, "iconVariant", void 0);
+__decorate([
+    state()
+], FtInProductHelp.prototype, "allowStandardMode", void 0);
+__decorate([
+    state()
+], FtInProductHelp.prototype, "allowTheaterMode", void 0);
+__decorate([
+    state()
+], FtInProductHelp.prototype, "allowFullscreenMode", void 0);
+export { FtInProductHelp };