@c8y/ngx-components 1017.0.75 → 1017.0.76

package/fesm2020/c8y-ngx-components.mjs

@@ -9058,12 +9058,28 @@ class DocsService {
         /**
          * Default documentation URL.
          */
-        this.DEFAULT_DOCS_BASE_URL = 'https://www.cumulocity.com/guides';
+        this.DEFAULT_DOCS_BASE_URL = 'https://www.cumulocity.com/guides/{{ version }}';
         const supportUrlRefreshTrigger = this.app.map(({ supportUrl }) => supportUrl);
         this.items$ = fromTriggerOnce(router, [supportUrlRefreshTrigger, this.refreshTrigger], [getInjectedHooks(HOOK_DOCS, this.injectors), () => this.factories, this]).pipe(shareReplay(1), distinctUntilChanged());
     }
-    getBaseUrl() {
-        return this.options.get('docsBaseUrl', this.DEFAULT_DOCS_BASE_URL);
+    getBaseUrl(uiVersion) {
+        const docsBaseUrl = this.options.get('docsBaseUrl', this.DEFAULT_DOCS_BASE_URL);
+        return this.getUrlWithDocsVersion(docsBaseUrl, uiVersion);
+    }
+    /**
+     * Takes a URL and replaces all `{{ version }}` placeholders with the relevant docs version
+     * (the version is derived from the app state or from the provided parameter).
+     * @param url Any URL that contains `{{ version }}` placeholders.
+     * @param uiVersion A version string or object, defaults to the app state version.
+     * @returns The URL with replaced `{{ version }}` placeholders.
+     */
+    getUrlWithDocsVersion(url, uiVersion = this.app.uiVersion) {
+        const version = typeof uiVersion === 'string' ? uiVersion : get(uiVersion, 'ngx');
+        let docsVersion = '';
+        if (!(isUndefined(version) || version === '')) {
+            docsVersion = this.getDocsVersionForUiVersion(version);
+        }
+        return url.replace(/{{\s*version\s*}}/g, docsVersion).replace(/\/+$/g, '');
     }
     get templateStr() {
         return this.options.get('guideHrefTemplate', '${docsBaseUrl}${partialUrl}');
@@ -9127,6 +9143,22 @@ class DocsService {
         const prefix = shouldPrefix ? '/' : '';
         return `${prefix}${partialLink}`;
     }
+    /**
+     * Returns the most relevant version of documentation for the given version of UI.
+     * For maintenance versions, it's the first version in the line, e.g. 1017.0.123 -> 10.17.0.
+     * For develop versions, it's the next minor one, e.g. 1017.123.0-SNAPSHOT -> 10.18.0.
+     *
+     * @param uiVersion The version of UI.
+     * @private
+     */
+    getDocsVersionForUiVersion(uiVersion) {
+        const [majorMinorStr, patchStr] = uiVersion.split('.');
+        const patchNumber = parseInt(patchStr, 10);
+        const takeNextMinor = patchNumber > 0;
+        const majorNumber = Math.floor(parseInt(majorMinorStr, 10) / 100);
+        const minorNumber = parseInt(majorMinorStr, 10) - majorNumber * 100 + (takeNextMinor ? 1 : 0);
+        return `${majorNumber}.${minorNumber}.0`;
+    }
 }
 DocsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DocsService, deps: [{ token: OptionsService }, { token: AppStateService }, { token: i0.Injector }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
 DocsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DocsService, providedIn: 'root' });
@@ -25173,9 +25205,8 @@ class HelpComponent {
     /**
      * @ignore Only private DI
      */
-    constructor(docsService, appState, helpService) {
+    constructor(docsService, helpService) {
         this.docsService = docsService;
-        this.appState = appState;
         this.helpService = helpService;
         /**
          * The source of the documentation. Used to link to the documentation as well as
@@ -25191,13 +25222,7 @@ class HelpComponent {
          */
         this.priority = Infinity;
         /**
-         * Currrent version of the UI which will be used to get the correct data from
-         * the docs. If the UI version is equal to the latest doc version, the value
-         * must be ''.
-         */
-        this.version = this.parseVersion(this.appState.uiVersion);
-        /**
-         * An title. Set in open by passing the source.
+         * A title. Set in open by passing the source.
          */
         this.title = '';
         /**
@@ -25243,23 +25268,19 @@ class HelpComponent {
         try {
             docsUrl =
                 typeof this.helpService.contextHelp.value === 'string'
-                    ? new URL(this.helpService.contextHelp.value)
+                    ? new URL(this.docsService.getUrlWithDocsVersion(this.helpService.contextHelp.value))
                     : new URL(this.docsService.getBaseUrl());
         }
         catch (error) {
-            docsUrl = new URL(this.docsService.DEFAULT_DOCS_BASE_URL);
+            docsUrl = new URL(this.docsService.getBaseUrl());
             console.warn(error);
         }
-        const srcUrl = new URL(`${docsUrl}${src}`);
         const [url, hashFragment] = src.split('#');
         this.sectionHeading = hashFragment;
         if (index) {
             src = `${url}index.json`;
         }
-        if (this.version === '') {
-            return index ? `${docsUrl.href + src}` : srcUrl.href;
-        }
-        return `${docsUrl.href}/${this.version}${src}`;
+        return `${docsUrl.href}${src}`;
     }
     /**
      * Toggles the visibility of the help dialog.
@@ -25303,19 +25324,6 @@ class HelpComponent {
         this.hasError = false;
         this.sectionContent = '';
     }
-    parseVersion(uiVersion) {
-        const version = typeof uiVersion === 'string' ? uiVersion : get(uiVersion, 'ngx');
-        if (isUndefined(version)) {
-            return undefined;
-        }
-        if (version === '') {
-            return '';
-        }
-        const versionToParse = version.split('.').shift();
-        const majorNumber = Math.floor(parseInt(versionToParse, 10) / 100);
-        const minorNumber = parseInt(versionToParse, 10) - majorNumber * 100;
-        return `${majorNumber}.${minorNumber}.0`;
-    }
     resolveIcon() {
         try {
             const icon = Array.from(document.querySelector('nav .active i').classList).find(classes => classes.startsWith('c8y-icon-') || classes.startsWith('dlt-c8y-icon-'));
@@ -25328,10 +25336,6 @@ class HelpComponent {
     render(req) {
         if (req.readyState === 4) {
             this.isLoading = false;
-            if (req.status === 404 && this.version !== '') {
-                this.version = '';
-                this.open();
-            }
             if (req.status === 200) {
                 this.hasError = false;
                 const sectionData = req.response[this.sectionHeading];
@@ -25346,12 +25350,12 @@ class HelpComponent {
         }
     }
 }
-HelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HelpComponent, deps: [{ token: DocsService }, { token: AppStateService }, { token: HelpService }], target: i0.ɵɵFactoryTarget.Component });
+HelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HelpComponent, deps: [{ token: DocsService }, { token: HelpService }], target: i0.ɵɵFactoryTarget.Component });
 HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: HelpComponent, selector: "c8y-help", inputs: { src: "src", isCollapsed: "isCollapsed", priority: "priority", icon: "icon" }, ngImport: i0, template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help\"\n    type=\"button\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    aria-controls=\"collapseHelp\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    [delay]=\"750\"\n    placement=\"left\"\n    container=\"body\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  >\n  </button>\n</c8y-action-bar-item>\n\n<div\n  id=\"collapseHelp\"\n  class=\"c8y-help-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n          class=\"c8y-icon-duocolor icon-48\"\n        ></i>\n        <div\n          class=\"p-l-16 flex-grow\"\n          *ngIf=\"!hasError\"\n        >\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n              [attr.aria-label]=\"'Close' | translate\"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div\n            id=\"helpContent\"\n            class=\"help-content\"\n            [innerHTML]=\"sectionContent\"\n          ></div>\n        </div>\n\n        <div\n          class=\"p-l-16 p-t-16 flex-grow\"\n          *ngIf=\"hasError\"\n        >\n          <h4\n            class=\"text-bold m-b-16\"\n            translate\n          >Sorry, that didn't work</h4>\n          <div class=\"help-content\">\n            <p translate>The content couldn't be loaded.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n  >\n    <button\n      class=\"btn btn-default\"\n      (click)=\"toggle()\"\n      [title]=\"'Close help' | translate\"\n      type=\"button\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      aria-controls=\"collapseHelp\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      class=\"btn btn-primary\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span\n        translate\n        *ngIf=\"!hasError\"\n      >\n        Open the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n      <span\n        translate\n        *ngIf=\"hasError\"\n      >\n        Check the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n    </a>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading" }, { kind: "directive", type: i1$a.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: i1$8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i1$5.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: HelpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-help', template: "<c8y-action-bar-item\n  [placement]=\"'right'\"\n  itemClass=\"pull-right m-l-8\"\n  [priority]=\"priority\"\n  *ngIf=\"!!(helpService.contextHelp | async)\"\n>\n  <button\n    class=\"btn-help\"\n    type=\"button\"\n    [attr.aria-label]=\"'About this page' | translate\"\n    [attr.aria-expanded]=\"!isCollapsed\"\n    aria-controls=\"collapseHelp\"\n    tooltip=\"{{ 'About this page' | translate }}\"\n    [delay]=\"750\"\n    placement=\"left\"\n    container=\"body\"\n    (click)=\"toggle()\"\n    c8yProductExperience\n    [actionName]=\"isCollapsed ? 'helpOpened' : 'helpClosed'\"\n    [actionData]=\"{ src: src }\"\n  >\n  </button>\n</c8y-action-bar-item>\n\n<div\n  id=\"collapseHelp\"\n  class=\"c8y-help-drawer\"\n  [collapse]=\"isCollapsed\"\n  [isAnimated]=\"true\"\n  (collapsed)=\"onCollapsed()\"\n>\n  <div\n    [ngClass]=\"{ 'c8y-help-drawer-block': isInit }\"\n    #docOutlet\n  >\n    <div *ngIf=\"isLoading\">\n      <c8y-loading></c8y-loading>\n    </div>\n\n    <div *ngIf=\"!isLoading\">\n      <div class=\"d-flex\">\n        <i\n          [c8yIcon]=\"!hasError ? icon : 'unlink'\"\n          [ngClass]=\"{ 'text-warning': hasError, 'text-muted': !hasError }\"\n          class=\"c8y-icon-duocolor icon-48\"\n        ></i>\n        <div\n          class=\"p-l-16 flex-grow\"\n          *ngIf=\"!hasError\"\n        >\n          <div\n            class=\"alert alert-info m-b-16\"\n            *ngIf=\"\n              !helpService.isSupportedLanguage() &&\n              !showLangWarning &&\n              !helpService.isWarningAlertViewed\n            \"\n          >\n            <button\n              class=\"close\"\n              type=\"button\"\n              (click)=\"\n                showLangWarning = !showLangWarning;\n                helpService.isWarningAlertViewed = !helpService.isWarningAlertViewed\n              \"\n              [attr.aria-label]=\"'Close' | translate\"\n            >\n              <span aria-hidden=\"true\">\u00D7</span>\n              <span class=\"sr-only\">Close</span>\n            </button>\n            <p>\n              {{ 'Help content is only available in English.' | translate }}\n            </p>\n          </div>\n          <h4 class=\"text-bold text-primary p-t-16 m-b-16\">\n            {{ title }}\n          </h4>\n          <div\n            id=\"helpContent\"\n            class=\"help-content\"\n            [innerHTML]=\"sectionContent\"\n          ></div>\n        </div>\n\n        <div\n          class=\"p-l-16 p-t-16 flex-grow\"\n          *ngIf=\"hasError\"\n        >\n          <h4\n            class=\"text-bold m-b-16\"\n            translate\n          >Sorry, that didn't work</h4>\n          <div class=\"help-content\">\n            <p translate>The content couldn't be loaded.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"c8y-help-drawer-footer animated fadeIn\"\n    style=\"animation-delay: 0.35s\"\n    *ngIf=\"!isLoading && !hasError\"\n  >\n    <button\n      class=\"btn btn-default\"\n      (click)=\"toggle()\"\n      [title]=\"'Close help' | translate\"\n      type=\"button\"\n      [attr.aria-expanded]=\"!isCollapsed\"\n      aria-controls=\"collapseHelp\"\n      translate\n    >\n      Close\n    </button>\n    <a\n      href=\"{{ hasError ? getUrl() : getUrl(src) }}\"\n      class=\"btn btn-primary\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n      <span\n        translate\n        *ngIf=\"!hasError\"\n      >\n        Open the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n      <span\n        translate\n        *ngIf=\"hasError\"\n      >\n        Check the\n        <span>User guide`KEEP_ORIGINAL`</span>\n      </span>\n    </a>\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: DocsService }, { type: AppStateService }, { type: HelpService }]; }, propDecorators: { src: [{
+        }], ctorParameters: function () { return [{ type: DocsService }, { type: HelpService }]; }, propDecorators: { src: [{
                 type: Input
             }], isCollapsed: [{
                 type: Input