@fluid-topics/ft-in-product-help 1.0.57 → 1.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/ft-in-product-help.css.js +4 -0
  2. package/build/ft-in-product-help.d.ts +5 -0
  3. package/build/ft-in-product-help.js +48 -0
  4. package/build/ft-in-product-help.light.js +102 -69
  5. package/build/ft-in-product-help.min.js +231 -198
  6. package/build/ft-in-product-help.properties.d.ts +4 -0
  7. package/package.json +3 -3
package/build/ft-in-product-help.css.js CHANGED
@@ -75,6 +75,10 @@ export const styles = css `
75
75
  --ft-button-color: ${FtInProductHelpCssVariables.iconColor};
76
76
  }
77
77
 
78
+ .ft-in-product-help--home-button {
79
+ margin-right: auto;
80
+ }
81
+
78
82
  iframe {
79
83
  width: 100%;
80
84
  height: calc(100% - ${FtInProductHelpCssVariables.topBarHeight});
package/build/ft-in-product-help.d.ts CHANGED
@@ -15,6 +15,10 @@ export declare class FtInProductHelp extends FtLitElement implements FtInProduct
15
15
  disableTheaterMode: boolean;
16
16
  fullscreenModeIcon: string;
17
17
  disableFullscreenMode: boolean;
18
+ enableHomeButton: boolean;
19
+ homeIcon: string;
20
+ enableOpenTabButton: boolean;
21
+ openTabIcon: string;
18
22
  iconVariant?: FtIconVariants;
19
23
  allowStandardMode: boolean;
20
24
  allowTheaterMode: boolean;
@@ -32,4 +36,5 @@ export declare class FtInProductHelp extends FtLitElement implements FtInProduct
32
36
  private isTablet;
33
37
  private isDesktop;
34
38
  navigateTo(path: string): void;
39
+ openTab(): void;
35
40
  }
package/build/ft-in-product-help.js CHANGED
@@ -26,6 +26,10 @@ class FtInProductHelp extends FtLitElement {
26
26
  this.disableTheaterMode = false;
27
27
  this.fullscreenModeIcon = FtIcons.EXPAND_WIDE;
28
28
  this.disableFullscreenMode = false;
29
+ this.enableHomeButton = false;
30
+ this.homeIcon = FtIcons.HOME;
31
+ this.enableOpenTabButton = false;
32
+ this.openTabIcon = FtIcons.EXTLINK_LIGHT;
29
33
  this.allowStandardMode = true;
30
34
  this.allowTheaterMode = true;
31
35
  this.allowFullscreenMode = true;
@@ -45,12 +49,35 @@ class FtInProductHelp extends FtLitElement {
45
49
  <ft-size-watcher @change=${this.onViewportChange}></ft-size-watcher>
46
50
  <div class="${classMap(classes)}" part="container">
47
51
  <div class="ft-in-product-help--top-bar" part="top-bar">
52
+ ${this.enableHomeButton ? html `
53
+ <ft-button icon="${this.homeIcon}"
54
+ class="ft-in-product-help--home-button"
55
+ dense
56
+ .iconVariant=${this.iconVariant}
57
+ part="button-home top-bar-button"
58
+ label="Back to homepage"
59
+ tooltipPosition="right"
60
+ @click=${() => this.navigateTo(this.portalUrl)}
61
+ ></ft-button>
62
+ ` : nothing}
63
+ ${this.enableOpenTabButton ? html `
64
+ <ft-button icon="${this.openTabIcon}"
65
+ dense
66
+ .iconVariant=${this.iconVariant}
67
+ part="button-new-tab top-bar-button"
68
+ label="Open in a new tab"
69
+ tooltipPosition="left"
70
+ @click=${this.openTab}
71
+ ></ft-button>
72
+ ` : nothing}
48
73
  ${showFullscreenIcon ? html `
49
74
  <ft-button icon="${this.fullscreenModeIcon}"
50
75
  class="${this.displayMode == FtInProductHelpMode.FULLSCREEN ? "ft-in-product-help--active-mode" : ""}"
51
76
  dense
52
77
  .iconVariant=${this.iconVariant}
53
78
  part="button-fullscreen top-bar-button"
79
+ label="Fullscreen mode"
80
+ tooltipPosition="left"
54
81
  @click=${() => this.setMode(FtInProductHelpMode.FULLSCREEN)}
55
82
  ></ft-button>
56
83
  ` : nothing}
@@ -60,6 +87,8 @@ class FtInProductHelp extends FtLitElement {
60
87
  dense
61
88
  .iconVariant=${this.iconVariant}
62
89
  part="button-theater top-bar-button"
90
+ label="Theater mode"
91
+ tooltipPosition="left"
63
92
  @click=${() => this.setMode(FtInProductHelpMode.THEATER)}
64
93
  ></ft-button>
65
94
  ` : nothing}
@@ -69,6 +98,8 @@ class FtInProductHelp extends FtLitElement {
69
98
  dense
70
99
  .iconVariant=${this.iconVariant}
71
100
  part="button-standard top-bar-button"
101
+ label="Standard mode"
102
+ tooltipPosition="left"
72
103
  @click=${() => this.setMode(FtInProductHelpMode.STANDARD)}
73
104
  ></ft-button>
74
105
  ` : nothing}
@@ -76,6 +107,8 @@ class FtInProductHelp extends FtLitElement {
76
107
  dense
77
108
  .iconVariant=${this.iconVariant}
78
109
  part="button-close top-bar-button"
110
+ label="Close"
111
+ tooltipPosition="left"
79
112
  @click=${this.close}
80
113
  ></ft-button>
81
114
  </div>
@@ -143,6 +176,9 @@ class FtInProductHelp extends FtLitElement {
143
176
  navigateTo(path) {
144
177
  this.iframe.contentWindow.postMessage({ navigateTo: path }, this.portalUrl);
145
178
  }
179
+ openTab() {
180
+ this.iframe.contentWindow.postMessage({ openTabToCurrentUrl: true }, this.portalUrl);
181
+ }
146
182
  }
147
183
  FtInProductHelp.elementDefinitions = {
148
184
  "ft-button": FtButton,
@@ -179,6 +215,18 @@ __decorate([
179
215
  __decorate([
180
216
  property({ type: Boolean })
181
217
  ], FtInProductHelp.prototype, "disableFullscreenMode", void 0);
218
+ __decorate([
219
+ property({ type: Boolean })
220
+ ], FtInProductHelp.prototype, "enableHomeButton", void 0);
221
+ __decorate([
222
+ property()
223
+ ], FtInProductHelp.prototype, "homeIcon", void 0);
224
+ __decorate([
225
+ property({ type: Boolean })
226
+ ], FtInProductHelp.prototype, "enableOpenTabButton", void 0);
227
+ __decorate([
228
+ property()
229
+ ], FtInProductHelp.prototype, "openTabIcon", void 0);
182
230
  __decorate([
183
231
  property()
184
232
  ], FtInProductHelp.prototype, "iconVariant", void 0);