@c8y/ngx-components/fesm2022/c8y-ngx-components-widgets-implementations-quick-links.mjs.map

Angular modules for Cumulocity IoT applications

{"version":3,"file":"c8y-ngx-components-widgets-implementations-quick-links.mjs","sources":["../../widgets/implementations/quick-links/quick-links.model.ts","../../widgets/implementations/quick-links/quick-links-widget-config/quick-links-widget-config-add-link.component.ts","../../widgets/implementations/quick-links/quick-links-widget-config/quick-links-widget-config-add-link.component.html","../../widgets/implementations/quick-links/quick-links.service.ts","../../widgets/implementations/quick-links/relative-url-parser.pipe.ts","../../widgets/implementations/quick-links/quick-links-widget-view/quick-links-widget-view.component.ts","../../widgets/implementations/quick-links/quick-links-widget-view/quick-links-widget-view.component.html","../../widgets/implementations/quick-links/quick-links-widget-config/quick-links-widget-config-list.component.ts","../../widgets/implementations/quick-links/quick-links-widget-config/quick-links-widget-config-list.component.html","../../widgets/implementations/quick-links/quick-links-widget-config/quick-links-widget-config.component.ts","../../widgets/implementations/quick-links/quick-links-widget-config/quick-links-widget-config.component.html","../../widgets/implementations/quick-links/c8y-ngx-components-widgets-implementations-quick-links.ts"],"sourcesContent":["import { IApplication } from '@c8y/client';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport { ValidationPattern } from '@c8y/ngx-components';\n\nexport interface IQuickLink {\n  icon: string;\n  label: string;\n  url: string;\n  newTab: boolean;\n  app?: IApplication;\n}\n\nexport type QuickLinksConfig = {\n  links: IQuickLink[];\n  displayOption: DisplayOptionType;\n  translateLinkLabels: boolean;\n};\n\nexport const QuickLinkDisplayOption = {\n  GRID: 'Grid',\n  LIST: 'List'\n} as const;\n\nexport type DisplayOptionType =\n  (typeof QuickLinkDisplayOption)[keyof typeof QuickLinkDisplayOption];\n\nexport const DEFAULT_DISPLAY_OPTION_VALUE = QuickLinkDisplayOption.GRID;\nexport const DEFAULT_QUICK_LINK_ICON = 'link';\n\nexport const HELP_AND_SERVICE_WIDGET_ID = defaultWidgetIds.HELP_AND_SERVICE;\nexport const APPLICATIONS_WIDGET_ID = defaultWidgetIds.APPLICATIONS;\nexport const QUICK_LINKS_DEVICE_MANAGEMENT_ID = defaultWidgetIds.DEVICE_MANAGEMENT_WELCOME;\n\nexport type ConvertibleWidgetID =\n  | typeof HELP_AND_SERVICE_WIDGET_ID\n  | typeof APPLICATIONS_WIDGET_ID\n  | typeof QUICK_LINKS_DEVICE_MANAGEMENT_ID;\n\nexport type DefaultDeviceManagementQuickLinkDefinition = {\n  navPath: string[];\n  overrides?: QuickLinkOverrides;\n};\ninterface QuickLinkOverrides {\n  label?: string;\n  icon?: string;\n  url?: string;\n}\n\nexport const URL_VALIDATOR_PATTERN = ValidationPattern.rules.quickLinkUrl.pattern;\n\nexport type WidgetConversionConfig = {\n  convertWidget: () => void;\n};\n","import { Component, inject, OnInit, output } from '@angular/core';\nimport { C8yTranslatePipe, ChangeIconComponent } from '@c8y/ngx-components';\nimport { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { IconSelectorService } from '@c8y/ngx-components/icon-selector';\nimport { DEFAULT_QUICK_LINK_ICON, IQuickLink, URL_VALIDATOR_PATTERN } from '../quick-links.model';\n\n@Component({\n  selector: 'c8y-quick-links-widget-config-add-link',\n  imports: [TooltipModule, C8yTranslatePipe, ReactiveFormsModule, ChangeIconComponent],\n  templateUrl: './quick-links-widget-config-add-link.component.html'\n})\nexport class QuickLinksWidgetConfigAddLinkComponent implements OnInit {\n  onQuickLinkCreated = output<IQuickLink>();\n  onCancel = output<void>();\n\n  addLinkFormGroup: ReturnType<QuickLinksWidgetConfigAddLinkComponent['initForm']>;\n\n  private readonly iconSelector = inject(IconSelectorService);\n  private readonly fb = inject(FormBuilder);\n\n  ngOnInit() {\n    this.addLinkFormGroup = this.initForm();\n  }\n\n  async changeLinkIcon(): Promise<void> {\n    try {\n      const newIcon = await this.iconSelector.selectIcon();\n      this.addLinkFormGroup.controls.icon.setValue(newIcon);\n    } catch {\n      // nothing to do\n    }\n  }\n\n  createQuickLink(): void {\n    this.onQuickLinkCreated.emit(this.addLinkFormGroup.value as IQuickLink);\n\n    this.addLinkFormGroup.reset();\n    this.addLinkFormGroup.controls.icon.setValue(DEFAULT_QUICK_LINK_ICON);\n  }\n\n  private initForm() {\n    const controls = {\n      icon: [DEFAULT_QUICK_LINK_ICON, [Validators.required]],\n      label: ['', [Validators.required, Validators.maxLength(50)]],\n      url: ['', [Validators.required, Validators.pattern(URL_VALIDATOR_PATTERN)]],\n      newTab: [false, [Validators.required]]\n    };\n\n    return this.fb.group(controls);\n  }\n}\n","<form\n  [formGroup]=\"addLinkFormGroup\"\n>\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group\">\n      <label>{{ 'Icon' | translate }}</label>\n      <c8y-change-icon\n        class=\"form-control\"\n        [currentIcon]=\"addLinkFormGroup.controls.icon.value\"\n        (onButtonClick)=\"changeLinkIcon()\"\n      ></c8y-change-icon>\n    </div>\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-label\">{{ 'Label' | translate }}</label>\n      <input\n        class=\"form-control\"\n        type=\"text\"\n        formControlName=\"label\"\n        maxlength=\"50\"\n        id=\"ql-label\"\n        [placeholder]=\"'e.g. my Quick Link' | translate\"\n      />\n    </div>\n  </div>\n  <div class=\"d-flex a-i-center gap-24\">\n    <div class=\"form-group flex-grow\">\n      <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n      <input\n        class=\"form-control\"\n        id=\"ql-url\"\n        type=\"text\"\n        formControlName=\"url\"\n        maxlength=\"150\"\n        [placeholder]=\"'e.g. http://www.example.com' | translate\"\n      />\n    </div>\n    <div class=\"form-group flex-noshrink\">\n      <label>&nbsp;</label>\n      <label class=\"c8y-checkbox\" title=\"{{ 'Open the link in a new browser tab' | translate }}\">\n        <input\n          type=\"checkbox\"\n          formControlName=\"newTab\"\n          checked=\"checked\"\n          [attr.aria-label]=\"'Open in new tab' | translate\"\n        />\n        <span></span>\n        <span>{{ 'New tab' | translate }}</span>\n      </label>\n    </div>\n  </div>\n</form>\n\n<button\n  class=\"btn btn-default\"\n  type=\"button\"\n  (click)=\"onCancel.emit();\"\n>\n  {{ 'Cancel' | translate }}\n</button>\n<button\n  class=\"btn btn-primary\"\n  title=\"{{ 'Create a quick link' | translate }}\"\n  type=\"button\"\n  (click)=\"createQuickLink()\"\n  [disabled]=\"addLinkFormGroup.invalid\"\n>\n  {{ 'Add quick link' | translate }}\n</button>\n","import { inject, Injectable } from '@angular/core';\nimport { combineLatest, Observable, of } from 'rxjs';\nimport {\n  DocLink,\n  DocLinkWithLabel,\n  DocsService,\n  gettext,\n  NavigatorNode,\n  NavigatorService,\n  sortByPriority\n} from '@c8y/ngx-components';\nimport { combineLatestWith, map, switchMap } from 'rxjs/operators';\nimport { DefaultDeviceManagementQuickLinkDefinition, IQuickLink } from './quick-links.model';\n\n/**\n * Service for managing quick links in Cockpit and Device Management applications.\n * It fetches, processes, and provides quick links to relevant documentation and navigation nodes.\n */\n@Injectable({ providedIn: 'root' })\nexport class QuickLinksService {\n  private navNodes: NavigatorNode[];\n\n  private readonly docsService = inject(DocsService);\n  private readonly navigatorService = inject(NavigatorService);\n\n  private readonly labelsToFilterOutInDeviceManagement = [\n    'Add user',\n    'Add device',\n    'Cockpit',\n    'Legal notices'\n  ];\n\n  /**\n   * Retrieves the default quick links for Cockpit Application.\n   *\n   * @returns An observable emitting an array of quick links.\n   */\n  getDefaultQuickLinks$(): Observable<IQuickLink[]> {\n    return this.getDocLinks$().pipe(\n      map(docLinks =>\n        docLinks.map(docLink => ({\n          icon: docLink.icon,\n          label: docLink.label,\n          url: docLink.url,\n          newTab: docLink.target === '_blank'\n        }))\n      )\n    );\n  }\n\n  /**\n   * Retrieves default quick links for Device Management Application\n   *\n   * @returns An observable emitting an array of quick links for device management.\n   */\n  getQuickLinksForDeviceManagement$(): Observable<IQuickLink[]> {\n    return this.getSortedDocLinksForDeviceManagement().pipe(\n      map(docLinks =>\n        docLinks.map(docLink => ({\n          icon: docLink.icon,\n          label: docLink.label,\n          url: docLink.url,\n          newTab: docLink.target === '_blank'\n        }))\n      )\n    );\n  }\n\n  /**\n   * Fetches documentation links for Cockpit Application and sorts them by priority.\n   *\n   * @returns An observable emitting an array of documentation links.\n   */\n  private getDocLinks$(): Observable<DocLink[]> {\n    return combineLatest([this.docsService.items$, this.navigatorService.items$]).pipe(\n      map(([links, navigatorNodes]) => this.handleDocLinks([...links], navigatorNodes)),\n      map(docLinks => sortByPriority(docLinks))\n    );\n  }\n\n  /**\n   * Processes and modifies documentation links.\n   *\n   * @param links - Array of documentation links.\n   * @param navigatorNodes - Array of navigation nodes.\n   *\n   * @returns An array of processed documentation links.\n   */\n  private handleDocLinks(links: DocLink[], navigatorNodes: NavigatorNode[]): DocLink[] {\n    const groupLink = this.createAddGroupDocLink(navigatorNodes);\n\n    if (groupLink) {\n      links.push(groupLink);\n    }\n    return this.replaceDocsLinksWithMainOne(links);\n  }\n\n  /**\n   * Creates a quick link for adding a group if the \"Groups\" node is present.\n   *\n   * @param navigatorNodes - Array of navigation nodes.\n   * @returns A `DocLink` for adding a group or `undefined`.\n   */\n  private createAddGroupDocLink(navigatorNodes: NavigatorNode[]): DocLink | undefined {\n    let docLink: DocLink;\n    const groupsNodeLabel = gettext('Groups');\n    const groupsNode = this.findNavigatorNode(groupsNodeLabel, navigatorNodes);\n\n    if (groupsNode) {\n      docLink = {\n        type: 'quicklink',\n        icon: 'c8y-icon c8y-icon-group-add',\n        label: gettext('Add group'),\n        target: null,\n        url: '/group?showAddGroup=true'\n      };\n    }\n    return docLink;\n  }\n\n  /**\n   * Retrieves additional documentation links related to device management.\n   *\n   * @returns An observable that emits a list of processed documentation links.\n   */\n  private getAdditionalDocLinksForDeviceManagement$(): Observable<DocLink[]> {\n    return this.docsService.items$.pipe(\n      map(docLinks => this.prepareDocLinksForDeviceManagement(docLinks))\n    );\n  }\n\n  /**\n   * Prepares documentation links by replacing some links with a main one and filtering out irrelevant links.\n   *\n   * @param links - The list of documentation links to process.\n   * @returns The processed list of documentation links.\n   */\n  private prepareDocLinksForDeviceManagement(links: DocLink[]): DocLink[] {\n    const _links = this.replaceDocsLinksWithMainOne(links);\n\n    return this.filterOutDocsLinksForDeviceManagement(_links);\n  }\n\n  /**\n   * Filters out documentation links that should not be included in device management.\n   *\n   * @param links - The list of documentation links to filter.\n   * @returns The filtered list of documentation links.\n   */\n  private filterOutDocsLinksForDeviceManagement(links: DocLink[]): DocLink[] {\n    const filteredLinks = links.filter(\n      link =>\n        !this.labelsToFilterOutInDeviceManagement.includes(link.label) &&\n        !link.url.includes('/apps/')\n    );\n\n    const additionalLinks = this.docsService\n      .getItemsFromHookDocs()\n      .filter(doc => this.labelsToFilterOutInDeviceManagement.includes(doc.label));\n\n    return sortByPriority([...filteredLinks, ...additionalLinks]);\n  }\n\n  /**\n   * Replaces the first occurrence of a documentation link with a main user guide link.\n   *\n   * @param links - The list of documentation links to process.\n   * @returns The modified list of documentation links.\n   */\n  private replaceDocsLinksWithMainOne(links: DocLink[]): DocLink[] {\n    const DOCS_PATH = '/docs/';\n    const docsLinkRegex = /\\/docs\\/(?!legal-notices)/;\n    let firstDocsLink = true;\n    return links.reduce((acc, link) => {\n      const isDocsLink = link.url && docsLinkRegex.test(link.url);\n      if (isDocsLink) {\n        if (firstDocsLink) {\n          firstDocsLink = false;\n          // Replace the first /docs/ link with the main one\n          acc.push({\n            icon: 'book-shelf',\n            label: gettext('User documentation'),\n            url: this.docsService.getUserGuideLink(DOCS_PATH),\n            type: 'doc',\n            target: '_blank'\n          } as DocLinkWithLabel);\n        }\n      } else {\n        acc.push({\n          ...link,\n          target: this.isLinkForCurrentApp(link) ? null : '_blank'\n        });\n      }\n      return acc;\n    }, []);\n  }\n\n  /**\n   * Checks if a URL is valid.\n   *\n   * @param url - The URL string to validate.\n   * @returns `true` if the URL is valid, otherwise `false`.\n   */\n  private isValidURL(url: string): boolean {\n    try {\n      new URL(url);\n      return true;\n    } catch {\n      return false;\n    }\n  }\n\n  /**\n   * Determines if a link belongs to the current application.\n   *\n   * @param link - The documentation link to check.\n   * @returns `true` if the link is for the current app, otherwise `false`.\n   */\n  private isLinkForCurrentApp(link: DocLink): boolean {\n    const { url } = link;\n    if (!url) return false;\n\n    if (!this.isValidURL(url)) {\n      return !url.startsWith('/apps/');\n    }\n    return false;\n  }\n\n  /**\n   * Finds a navigation node by its label.\n   *\n   * @param nodeName - Label of the node to find.\n   * @param navNodes - Array of navigation nodes.\n   *\n   * @returns The found navigation node.\n   */\n  private findNavigatorNode(nodeName: string, navNodes: NavigatorNode[] = []): NavigatorNode {\n    return navNodes.find((node: NavigatorNode) => node.label === nodeName);\n  }\n\n  /**\n   * Retrieves the default quick links for device management.\n   *\n   * This method returns an array of predefined quick link definitions\n   * used for navigation within the device management section of the application.\n   *\n   * Each quick link is defined by a navigation path (`navPath`), and optionally\n   * includes override properties such as a custom label, icon, or URL.\n   *\n   * @returns An array of quick link definitions.\n   */\n  private getDefaultQuickLinksForDeviceManagement(): DefaultDeviceManagementQuickLinkDefinition[] {\n    return [\n      { navPath: ['Devices', 'All devices'] },\n      { navPath: ['Devices', 'Registration'], overrides: { label: gettext('Register device') } },\n      {\n        navPath: ['Groups'],\n        overrides: {\n          label: gettext('Add group'),\n          icon: 'c8y-group-add',\n          url: '/group?showAddGroup=true'\n        }\n      },\n      {\n        navPath: ['Management', 'Device profiles'],\n        overrides: { label: gettext('Add device profile') }\n      },\n      {\n        navPath: ['Management', 'Software repository'],\n        overrides: { label: gettext('Add software') }\n      },\n      {\n        navPath: ['Management', 'Firmware repository'],\n        overrides: { label: gettext('Add firmware') }\n      }\n    ];\n  }\n\n  /**\n   * Fetches documentation links for Device Management Application and sorts them by priority.\n   *\n   * @returns An observable emitting an array of documentation links.\n   */\n  private getSortedDocLinksForDeviceManagement(): Observable<DocLink[]> {\n    return this.navigatorService.items$.pipe(\n      switchMap(navNodes => {\n        return of(\n          this.getDefaultQuickLinksForDeviceManagement()\n            .map(({ navPath, overrides }) =>\n              this.createDocLinkToNavNode(navPath, overrides, navNodes)\n            )\n            .filter(Boolean)\n        );\n      }),\n      combineLatestWith(this.getAdditionalDocLinksForDeviceManagement$()),\n      map(([links, additionalLinks]) => [...links, ...additionalLinks]),\n      map(docLinks => sortByPriority(docLinks))\n    );\n  }\n\n  /**\n   * Creates a document link based on the given navigation node path labels.\n   *\n   * @param navNodePathLabels - An array of strings representing the path labels used to find the navigation node.\n   * @param quickLinkOverrides - An optional partial object of `DocLink` properties that can override the defaults.\n   * @param navNodes - An array of `NavigatorNode` objects to search within for the navigation node.\n   *\n   * @returns A `DocLink` object with the details of the found navigation node, or `undefined` if no matching node is found.\n   */\n  private createDocLinkToNavNode(\n    navNodePathLabels: string[],\n    quickLinkOverrides: Partial<DocLink> = {},\n    navNodes: NavigatorNode[]\n  ): DocLink | undefined {\n    const navNode = this.findVisibleNavNode(navNodePathLabels, navNodes);\n\n    if (!navNode) {\n      return;\n    }\n\n    return {\n      icon: navNode.icon,\n      type: 'doc',\n      label: navNode.label,\n      priority: navNode.priority,\n      url: this.ensureLeadingSlash(navNode.path),\n      ...quickLinkOverrides\n    } as DocLink;\n  }\n\n  /**\n   * Ensures the given path starts with a leading slash.\n   *\n   * @param path - The path to check.\n   * @returns The path with a leading slash.\n   */\n  private ensureLeadingSlash(path: string): string {\n    return path.startsWith('/') ? path : `/${path}`;\n  }\n\n  /**\n   * Recursively searches for a visible navigation node that matches the given path labels.\n   *\n   * @param navNodePathLabels - An array of labels representing the navigation path.\n   *                            This array is mutated as elements are shifted during recursion.\n   * @param navNodes - An array of `NavigatorNode` objects to search within. Defaults to `this.navNodes`.\n   *\n   * @returns The found `NavigatorNode`.\n   */\n  private findVisibleNavNode(\n    navNodePathLabels: string[],\n    navNodes: NavigatorNode[] = this.navNodes\n  ): NavigatorNode {\n    const currentLabel = navNodePathLabels.shift();\n    const navNode = navNodes.find(navNode => !navNode.hidden && navNode.label === currentLabel);\n    if (navNode && navNodePathLabels.length > 0) {\n      return this.findVisibleNavNode(navNodePathLabels, navNode.children);\n    }\n    return navNode;\n  }\n}\n","import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'relativeUrlParser'\n})\nexport class RelativeUrlParserPipe implements PipeTransform {\n  transform(url: string): string {\n    if (!url) {\n      return '';\n    }\n\n    if (this.isAppUrl(url) || this.isFullUrl(url)) {\n      return url;\n    }\n\n    if (this.isQueryParameter(url)) {\n      return `${window.location.hash}${url}`;\n    }\n\n    if (this.isRelativeToBaseUrl(url)) {\n      return url;\n    }\n\n    if (this.isRelativeUrl(url)) {\n      return `#${url}`;\n    }\n\n    return url;\n  }\n\n  private isFullUrl(url: string): boolean {\n    return url.startsWith('http') || url.startsWith('https');\n  }\n\n  private isRelativeToBaseUrl(url: string): boolean {\n    return url.startsWith('#');\n  }\n\n  private isRelativeUrl(url: string): boolean {\n    return url.startsWith('/');\n  }\n\n  private isAppUrl(url: string): boolean {\n    return url.startsWith('/apps');\n  }\n\n  private isQueryParameter(url: string): boolean {\n    return url.startsWith('?');\n  }\n}\n","import { Component, inject, input, OnInit } from '@angular/core';\nimport {\n  AppHrefPipe,\n  AppIconComponent,\n  AppSwitcherService,\n  C8yTranslatePipe,\n  DashboardChildComponent,\n  EmptyStateComponent,\n  HumanizeAppNamePipe,\n  IconDirective\n} from '@c8y/ngx-components';\nimport { CommonModule as NgCommonModule } from '@angular/common';\n\nimport {\n  APPLICATIONS_WIDGET_ID,\n  ConvertibleWidgetID,\n  DEFAULT_DISPLAY_OPTION_VALUE,\n  DEFAULT_QUICK_LINK_ICON,\n  QuickLinkDisplayOption,\n  HELP_AND_SERVICE_WIDGET_ID,\n  QUICK_LINKS_DEVICE_MANAGEMENT_ID,\n  QuickLinksConfig,\n  WidgetConversionConfig\n} from '../quick-links.model';\nimport { isEmpty } from 'lodash';\nimport { QuickLinksService } from '../quick-links.service';\nimport { RelativeUrlParserPipe } from '../relative-url-parser.pipe';\nimport { firstValueFrom, take } from 'rxjs';\n\n@Component({\n  selector: 'c8y-quick-links-widget-view',\n  imports: [\n    NgCommonModule,\n    AppIconComponent,\n    RelativeUrlParserPipe,\n    EmptyStateComponent,\n    IconDirective,\n    C8yTranslatePipe\n  ],\n  templateUrl: './quick-links-widget-view.component.html',\n  providers: [AppHrefPipe, HumanizeAppNamePipe, RelativeUrlParserPipe]\n})\nexport class QuickLinksWidgetViewComponent implements OnInit {\n  config = input<QuickLinksConfig>();\n  isPreview = input<boolean>(false);\n\n  protected readonly DEFAULT_QUICK_LINK_ICON = DEFAULT_QUICK_LINK_ICON;\n  protected readonly DisplayOption = QuickLinkDisplayOption;\n\n  private readonly quickLinksService = inject(QuickLinksService);\n  private readonly dashboardChild = inject(DashboardChildComponent);\n  private readonly appSwitcherService = inject(AppSwitcherService);\n  private readonly appHrefPipe = inject(AppHrefPipe);\n  private readonly humanizeAppNamePipe = inject(HumanizeAppNamePipe);\n\n  ngOnInit(): void {\n    this.convertLegacyWidget();\n  }\n\n  /**\n   * The method is responsible for converting legacy widgets into their updated versions if a conversion is required.\n   *\n   * The widgets are being converted:\n   * - Help and Service Widget\n   * - Applications Widget\n   * - Quick Links - Device Management Widget\n   */\n  private convertLegacyWidget(): void {\n    if (!this.isConversionRequiredForWidget()) {\n      return;\n    }\n\n    const widgetId: ConvertibleWidgetID = this.getWidgetId();\n\n    const widgetConversionMap: Record<ConvertibleWidgetID, WidgetConversionConfig> = {\n      [HELP_AND_SERVICE_WIDGET_ID]: {\n        convertWidget: this.convertHelpAndServiceWidget.bind(this)\n      },\n      [APPLICATIONS_WIDGET_ID]: {\n        convertWidget: this.convertApplicationsWidget.bind(this)\n      },\n      [QUICK_LINKS_DEVICE_MANAGEMENT_ID]: {\n        convertWidget: this.convertDeviceManagementQuickLinksWidget.bind(this)\n      }\n    };\n\n    const widget: WidgetConversionConfig = widgetConversionMap[widgetId];\n\n    widget.convertWidget();\n  }\n\n  /**\n   * Converts the Device Management Quick Links widget by assigning default quick links for the device management app\n   * and updating the widget configuration with default options.\n   */\n  private convertDeviceManagementQuickLinksWidget(): void {\n    this.quickLinksService\n      .getQuickLinksForDeviceManagement$()\n      .pipe(take(1))\n      .subscribe(quickLinks => (this.config().links = quickLinks));\n\n    this.config().displayOption = DEFAULT_DISPLAY_OPTION_VALUE;\n  }\n\n  /**\n   * Converts the Applications widget by assigning default quick links\n   * and updating the widget configuration with default options.\n   */\n  private convertApplicationsWidget(): void {\n    this.appSwitcherService.apps$.pipe(take(1)).subscribe(\n      async oneCloudApps =>\n        (this.config().links = await Promise.all(\n          oneCloudApps.map(async app => ({\n            label: await firstValueFrom(this.humanizeAppNamePipe.transform(app)),\n            url: this.appHrefPipe.transform(app),\n            icon: null,\n            newTab: false,\n            app\n          }))\n        ))\n    );\n\n    this.config().displayOption = DEFAULT_DISPLAY_OPTION_VALUE;\n  }\n\n  /**\n   * Converts the Help and Service widget by assigning default quick links\n   * and updating the widget configuration with default options.\n   */\n  private convertHelpAndServiceWidget(): void {\n    this.quickLinksService\n      .getDefaultQuickLinks$()\n      .pipe(take(1))\n      .subscribe(quickLinks => (this.config().links = quickLinks));\n\n    this.config().displayOption = DEFAULT_DISPLAY_OPTION_VALUE;\n  }\n\n  /**\n   * Determines whether conversion is required for the widget.\n   * Conversion is needed if the widget configuration is empty and a valid widget ID exists.\n   *\n   * @returns `true` if conversion is required, otherwise `false`.\n   */\n  private isConversionRequiredForWidget(): boolean {\n    return isEmpty(this.config()) && !!this.getWidgetId();\n  }\n\n  /**\n   * Retrieves the widget ID from the dashboard child data.\n   * If `componentId` is available, it is returned; otherwise, the widget's `name` is used.\n   *\n   * @returns The widget ID as a `ConvertibleWidgetID`, based on `componentId` or `name`.\n   */\n  private getWidgetId(): ConvertibleWidgetID {\n    return this.dashboardChild['data']?.componentId\n      ? this.dashboardChild['data']?.componentId\n      : this.dashboardChild['data']?.name;\n  }\n}\n","@let links = config().links;\n@let pointerNoneStylesPreview = isPreview() ? { 'pointer-events': 'none' } : null;\n\n@if (config().displayOption === DisplayOption.GRID) {\n  @if (links?.length) {\n    <div class=\"card-group-block interact-grid border-top m-b-0\">\n      @for (link of links; track link) {\n        @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n        <a\n          class=\"card card--btn pointer\"\n          [ngStyle]=\"pointerNoneStylesPreview\"\n          [title]=\"linkLabel\"\n          [ngClass]=\"{\n            disabled: isPreview()\n          }\"\n          data-cy=\"c8y-quick-links-widget-view--quick-link-card\"\n          [attr.role]=\"isPreview() ? null : 'button'\"\n          [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n          [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n          [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n        >\n          @if (link.newTab && !isPreview()) {\n            <div\n              class=\"card-actions showOnHover\"\n              title=\"{{ 'Open in new tab' | translate }}\"\n            >\n              <span class=\"dropdown-toggle c8y-dropdown\">\n                <i c8yIcon=\"external-link\"></i>\n              </span>\n            </div>\n          }\n\n          <div class=\"card-block text-center\">\n            <div class=\"icon-32\">\n              @if (link.icon) {\n                <i\n                  class=\"c8y-icon-duocolor\"\n                  [c8yIcon]=\"link.icon\"\n                ></i>\n              } @else {\n                <c8y-app-icon\n                  [name]=\"link.app.name\"\n                  [app]=\"link.app\"\n                  [contextPath]=\"link.app.contextPath\"\n                ></c8y-app-icon>\n              }\n            </div>\n            <small class=\"text-muted\">\n              {{ linkLabel }}\n            </small>\n          </div>\n        </a>\n      }\n    </div>\n  } @else {\n    <c8y-ui-empty-state\n      [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n      [title]=\"'No quick links to display.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n} @else {\n  @if (links?.length) {\n    <div class=\"separator-top\">\n      @for (link of links; track link) {\n        @let linkLabel = config().translateLinkLabels ? (link.label | translate) : link.label;\n        <a\n          class=\"d-flex a-i-center btn-clean gap-8 p-16 text-truncate separator-bottom\"\n          [ngStyle]=\"pointerNoneStylesPreview\"\n          [title]=\"linkLabel\"\n          data-cy=\"c8y-quick-links-widget-view--quick-link-list-item\"\n          [attr.role]=\"isPreview() ? null : 'button'\"\n          [target]=\"!isPreview() && link.newTab ? '_blank' : '_self'\"\n          [attr.rel]=\"isPreview() ? null : 'noopener noreferrer'\"\n          [attr.href]=\"isPreview() ? null : (link.url | relativeUrlParser)\"\n        >\n          @if (link.icon) {\n            <i\n              class=\"c8y-icon-duocolor icon-24\"\n              [c8yIcon]=\"link.icon\"\n            ></i>\n          } @else {\n            <c8y-app-icon\n              [name]=\"link.app.name\"\n              [app]=\"link.app\"\n              [contextPath]=\"link.app.contextPath\"\n            ></c8y-app-icon>\n          }\n\n          <span\n            class=\"text-truncate\"\n            [title]=\"linkLabel\"\n          >\n            {{ linkLabel }}\n          </span>\n          @if (link.newTab) {\n            <i\n              class=\"text-muted m-l-auto showOnHover\"\n              [c8yIcon]=\"'external-link'\"\n              title=\"{{ 'Open in new tab' | translate }}\"\n            ></i>\n          }\n        </a>\n      }\n    </div>\n  } @else {\n    <c8y-ui-empty-state\n      [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n      [title]=\"'No quick links to display.' | translate\"\n      [horizontal]=\"true\"\n    ></c8y-ui-empty-state>\n  }\n}\n","import { Component, inject, input, WritableSignal } from '@angular/core';\nimport { AbstractControl, FormArray, FormGroup } from '@angular/forms';\nimport {\n  AppIconComponent,\n  C8yTranslateModule,\n  DynamicFormsModule,\n  FormsModule,\n  IconDirective,\n  ListGroupModule,\n  ChangeIconComponent\n} from '@c8y/ngx-components';\nimport { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { IQuickLink, QuickLinksConfig } from '../quick-links.model';\nimport { IconSelectorService } from '@c8y/ngx-components/icon-selector';\nimport { IApplication } from '@c8y/client';\nimport { NgClass } from '@angular/common';\n\n@Component({\n  selector: 'c8y-quick-links-widget-config-list',\n  host: {\n    class: 'd-contents'\n  },\n  imports: [\n    FormsModule,\n    DragDropModule,\n    TooltipModule,\n    PopoverModule,\n    ListGroupModule,\n    DynamicFormsModule,\n    AppIconComponent,\n    C8yTranslateModule,\n    IconDirective,\n    ChangeIconComponent,\n    NgClass\n  ],\n  templateUrl: './quick-links-widget-config-list.component.html'\n})\nexport class QuickLinksWidgetConfigListComponent {\n  quickLinksForm = input<FormGroup>();\n  config = input<QuickLinksConfig>();\n  quickLinksFormArray = input<FormArray>();\n  appsNameChanged = input<WritableSignal<IApplication[]>>();\n\n  private readonly iconSelector = inject(IconSelectorService);\n\n  drop(event: CdkDragDrop<IQuickLink[]>): void {\n    moveItemInArray(this.config().links, event.previousIndex, event.currentIndex);\n    moveItemInArray(this.quickLinksFormArray().controls, event.previousIndex, event.currentIndex);\n  }\n\n  async changeLinkIcon(linkForm: AbstractControl<any, any>): Promise<void> {\n    try {\n      const isIconPresent = !!linkForm.get('icon')?.value;\n      const newIcon = await this.iconSelector.selectIcon();\n\n      if (newIcon) {\n        linkForm.patchValue({ icon: newIcon });\n        this.config().links = this.getQuickLinks();\n      }\n\n      const isAppIconChange = !!linkForm.get('app')?.value;\n      if (isAppIconChange && !isIconPresent) {\n        this.appsNameChanged().update(apps => [...apps, linkForm.get('app')?.value]);\n      }\n    } catch {\n      // Nothing to do if the user cancels icon selection\n    }\n  }\n\n  removeLink(index: number): void {\n    const quickLinksFormArray = this.quickLinksForm().get('quickLinks') as FormArray;\n    quickLinksFormArray.removeAt(index);\n    this.config().links = this.getQuickLinks();\n  }\n\n  getQuickLinks(): IQuickLink[] {\n    return this.quickLinksForm().getRawValue().quickLinks as IQuickLink[];\n  }\n}\n","<c8y-list-group\n  class=\"cdk-droplist no-border-last\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n  [cdkDropListDisabled]=\"getQuickLinks().length < 2\"\n>\n  <form\n    class=\"d-contents\"\n    [formGroup]=\"quickLinksForm()\"\n  >\n    <div\n      class=\"d-contents\"\n      [formArrayName]=\"'quickLinks'\"\n    >\n      @for (link of quickLinksFormArray().controls; track link; let i = $index) {\n        @let linkValue = link.getRawValue();\n\n        <c8y-li\n          [dense]=\"true\"\n          [formGroupName]=\"i\"\n          cdkDrag\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            cdkDragHandle\n          >\n            <i c8yIcon=\"drag-reorder\"></i>\n          </c8y-li-drag-handle>\n          <c8y-li-icon\n            class=\"icon-24 p-relative changeIcon a-s-stretch\"\n            [ngClass]=\"{\n              'm-l-16': getQuickLinks().length < 2\n            }\"\n          >\n            @if (linkValue.icon) {\n              <c8y-change-icon\n                [currentIcon]=\"linkValue.icon\"\n                (onButtonClick)=\"changeLinkIcon(link)\"\n              ></c8y-change-icon>\n            } @else {\n              <c8y-change-icon (onButtonClick)=\"changeLinkIcon(link)\">\n                <c8y-app-icon\n                  [name]=\"linkValue.app.name\"\n                  [app]=\"linkValue.app\"\n                  [contextPath]=\"linkValue.app.contextPath\"\n                ></c8y-app-icon>\n              </c8y-change-icon>\n            }\n          </c8y-li-icon>\n\n          <div class=\"d-flex gap-8 a-i-center\">\n            <div class=\"input-group input-group-editable\">\n              <input\n                class=\"form-control\"\n                formControlName=\"label\"\n                [placeholder]=\"'e.g. my Quick Link' | translate\"\n              />\n              <span></span>\n            </div>\n\n            <button\n              class=\"showOnHover btn-dot btn-dot--danger m-l-auto\"\n              [attr.aria-label]=\"'Delete' | translate\"\n              tooltip=\"{{ 'Delete' | translate }}\"\n              placement=\"top\"\n              type=\"button\"\n              [delay]=\"500\"\n              (click)=\"removeLink(i)\"\n            >\n              <i c8yIcon=\"minus-circle\"></i>\n            </button>\n          </div>\n          <c8y-list-item-collapse>\n            <div class=\"d-flex a-i-center gap-24\">\n              <div class=\"form-group flex-grow\">\n                <label for=\"ql-url\">{{ 'URL' | translate }}</label>\n                <input\n                  class=\"form-control\"\n                  id=\"ql-url\"\n                  type=\"text\"\n                  formControlName=\"url\"\n                  maxlength=\"150\"\n                  [placeholder]=\"'e.g. https://www.example.com' | translate\"\n                />\n              </div>\n              <div class=\"form-group flex-noshrink\">\n                <label>&nbsp;</label>\n                <label\n                  class=\"c8y-checkbox\"\n                  title=\"{{ 'Open the link in a new browser tab' | translate }}\"\n                >\n                  <input\n                    [attr.aria-label]=\"'Open in new tab' | translate\"\n                    type=\"checkbox\"\n                    formControlName=\"newTab\"\n                    checked=\"checked\"\n                  />\n                  <span></span>\n                  <span>{{ 'New tab' | translate }}</span>\n                </label>\n              </div>\n            </div>\n          </c8y-list-item-collapse>\n        </c8y-li>\n      }\n    </div>\n  </form>\n</c8y-list-group>\n","import {\n  Component,\n  inject,\n  input,\n  OnDestroy,\n  OnInit,\n  signal,\n  TemplateRef,\n  ViewChild\n} from '@angular/core';\nimport {\n  C8yTranslateModule,\n  DashboardChildComponent,\n  DashboardComponent,\n  EmptyStateComponent,\n  gettext,\n  HumanizeAppNamePipe,\n  InterAppService,\n  ModalService,\n  OnBeforeSave,\n  Status,\n  SupportedApps,\n  IconDirective\n} from '@c8y/ngx-components';\nimport { CommonModule as NgCommonModule } from '@angular/common';\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\nimport { PopoverModule } from 'ngx-bootstrap/popover';\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\nimport {\n  DEFAULT_DISPLAY_OPTION_VALUE,\n  DEFAULT_QUICK_LINK_ICON,\n  QuickLinkDisplayOption,\n  DisplayOptionType,\n  IQuickLink,\n  QuickLinksConfig,\n  URL_VALIDATOR_PATTERN\n} from '../quick-links.model';\nimport { QuickLinksWidgetConfigAddLinkComponent } from './quick-links-widget-config-add-link.component';\nimport { forkJoin, lastValueFrom, of, Subject, switchMap, take } from 'rxjs';\nimport { QuickLinksWidgetViewComponent } from '../quick-links-widget-view/quick-links-widget-view.component';\nimport { QuickLinksService } from '../quick-links.service';\nimport { IApplication } from '@c8y/client';\nimport { FormArray, FormBuilder, FormsModule, Validators } from '@angular/forms';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\nimport {\n  ContextDashboardService,\n  WidgetConfigService\n} from '@c8y/ngx-components/context-dashboard';\nimport { QuickLinksWidgetConfigListComponent } from './quick-links-widget-config-list.component';\nimport { TranslateService } from '@ngx-translate/core';\n\n@Component({\n  selector: 'c8y-quick-links-widget-config',\n  imports: [\n    NgCommonModule,\n    TooltipModule,\n    PopoverModule,\n    QuickLinksWidgetConfigAddLinkComponent,\n    QuickLinksWidgetViewComponent,\n    QuickLinksWidgetConfigListComponent,\n    C8yTranslateModule,\n    EmptyStateComponent,\n    FormsModule,\n    IconDirective,\n    CollapseModule\n  ],\n  templateUrl: './quick-links-widget-config.component.html',\n  providers: [DashboardChildComponent, DashboardComponent]\n})\nexport class QuickLinksWidgetConfigComponent implements OnInit, OnBeforeSave, OnDestroy {\n  config = input<QuickLinksConfig>();\n\n  quickLinksForm: ReturnType<QuickLinksWidgetConfigComponent['initForm']>;\n  selectedDisplayOption: DisplayOptionType = DEFAULT_DISPLAY_OPTION_VALUE;\n  appsNameChanged = signal<IApplication[]>([]);\n  addLinkIsCollapsed = true;\n\n  @ViewChild('quickLinksPreview')\n  set previewSet(template: TemplateRef<any>) {\n    if (template) {\n      this.widgetConfigService.setPreview(template);\n      return;\n    }\n    this.widgetConfigService.setPreview(null);\n  }\n\n  private destroy$ = new Subject<void>();\n\n  readonly DEFAULT_QUICK_LINK_ICON = DEFAULT_QUICK_LINK_ICON;\n  readonly DisplayOption = QuickLinkDisplayOption;\n  private readonly CHANGE_DEFAULT_ICON_LABEL = gettext('You have changed the quick link icon for:');\n  private readonly SAVE_CHANGES_LABEL = gettext(\n    'Please note that this action is irreversible. Do you want to save your changes?'\n  );\n\n  get quickLinksFormArray(): FormArray {\n    return this.quickLinksForm.get('quickLinks') as FormArray;\n  }\n\n  private readonly quickLinksService = inject(QuickLinksService);\n  private readonly modalService = inject(ModalService);\n  private readonly humanizeAppNamePipe = inject(HumanizeAppNamePipe);\n  private readonly interAppService = inject(InterAppService);\n  private readonly formBuilder = inject(FormBuilder);\n  private readonly contextDashboardService = inject(ContextDashboardService);\n  private readonly translateService = inject(TranslateService);\n  private readonly widgetConfigService = inject(WidgetConfigService);\n\n  ngOnInit(): void {\n    this.onInitConfig();\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  getQuickLinks(): IQuickLink[] {\n    return this.quickLinksForm.getRawValue().quickLinks as IQuickLink[];\n  }\n\n  addQuickLink(link: IQuickLink): void {\n    const quickLinkForm = this.formBuilder.group({\n      icon: [link?.icon],\n      label: [link?.label || '', [Validators.required, Validators.maxLength(50)]],\n      url: [link?.url || '', [Validators.required, Validators.pattern(URL_VALIDATOR_PATTERN)]],\n      newTab: [link?.newTab || false],\n      app: [link?.app]\n    });\n\n    this.quickLinksFormArray.push(quickLinkForm);\n\n    this.config().links = this.getQuickLinks();\n  }\n\n  async onBeforeSave(config?: QuickLinksConfig): Promise<boolean> {\n    try {\n      await this.confirmAppIconChanges();\n\n      config.links = this.getQuickLinks();\n      config.displayOption = this.selectedDisplayOption;\n\n      return true;\n    } catch (e) {\n      return false;\n    }\n  }\n\n  assignLinksToConfig(): void {\n    this.interAppService\n      .isCurrentApp$(SupportedApps.devicemanagement)\n      .pipe(\n        take(1),\n        switchMap(isDeviceManagement =>\n          isDeviceManagement\n            ? this.quickLinksService.getQuickLinksForDeviceManagement$()\n            : this.quickLinksService.getDefaultQuickLinks$()\n        )\n      )\n      .subscribe(quickLinks => (this.config().links = quickLinks));\n  }\n\n  resetLinks(): void {\n    this.quickLinksForm = this.initForm();\n    this.assignLinksToConfig();\n    this.config().links.forEach(link => this.addQuickLink(link));\n  }\n\n  private onInitConfig(): void {\n    this.setupQuickLinksForm();\n\n    if (!this.config().links) {\n      this.assignLinksToConfig();\n    }\n\n    this.config().links.forEach(link => this.addQuickLink(link));\n\n    if (!this.config().displayOption) {\n      this.config().displayOption = this.selectedDisplayOption;\n      return;\n    }\n    this.selectedDisplayOption = this.config().displayOption;\n  }\n\n  private setupQuickLinksForm(): void {\n    this.quickLinksForm = this.initForm();\n\n    this.quickLinksForm.statusChanges\n      .pipe(debounceTime(30), takeUntil(this.destroy$))\n      .subscribe(status => (this.contextDashboardService.formDisabled$ = of(status === 'INVALID')));\n  }\n\n  private async confirmAppIconChanges(): Promise<void> {\n    if (this.appsNameChanged().length > 0) {\n      const appNameObservables = this.appsNameChanged().map(app =>\n        this.humanizeAppNamePipe.transform(app).pipe(take(1))\n      );\n\n      const appNames = await lastValueFrom(forkJoin(appNameObservables));\n\n      const CHANGE_DEFAULT_ICON_LABEL_TRANSLATED = this.translateService.instant(\n        this.CHANGE_DEFAULT_ICON_LABEL\n      );\n      const SAVE_CHANGES_LABEL_TRANSLATED = this.translateService.instant(this.SAVE_CHANGES_LABEL);\n\n      const modalMessage = `${CHANGE_DEFAULT_ICON_LABEL_TRANSLATED} ${appNames.join(', ')}. ${SAVE_CHANGES_LABEL_TRANSLATED}`;\n\n      await this.modalService.confirm(\n        gettext('Confirm Quick Link Icon Change'),\n        modalMessage,\n        Status.INFO,\n        {\n          ok: gettext('Save')\n        }\n      );\n    }\n  }\n\n  private initForm() {\n    return this.formBuilder.group({\n      quickLinks: this.formBuilder.array([])\n    });\n  }\n}\n","<div class=\"col-md-12 a-s-stretch inner-scroll p-0 bg-level-1\">\n  <div class=\"separator-bottom sticky-top bg-inherit\">\n    <div class=\"p-l-16 p-r-16 p-b-8 p-t-8 d-flex gap-16 a-i-center\">\n      <span class=\"text-medium\">\n        {{ 'Links' | translate }}\n      </span>\n      <div class=\"m-l-auto\">\n        <button\n          class=\"btn btn-clean btn-sm\"\n          title=\"{{ 'Add a quick link' | translate }}\"\n          type=\"button\"\n          (click)=\"addLinkIsCollapsed = !addLinkIsCollapsed\"\n        >\n          <i [c8yIcon]=\"'plus-circle'\"></i>\n          {{ 'Add a quick link' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-clean btn-sm\"\n          title=\"{{ 'Reset links' | translate }}\"\n          [popover]=\"confirmPopover\"\n          placement=\"bottom\"\n          container=\"body\"\n          type=\"button\"\n          [adaptivePosition]=\"false\"\n          [outsideClick]=\"true\"\n          #pop=\"bs-popover\"\n        >\n          <i [c8yIcon]=\"'reset'\"></i>\n          {{ 'Reset links' | translate }}\n        </button>\n        <ng-template #confirmPopover>\n          <p class=\"m-b-8\">\n            {{\n              'Resetting links removes all custom links and resets the widget to its default state.'\n                | translate\n            }}\n          </p>\n          <button\n            class=\"btn btn-default btn-sm\"\n            (click)=\"pop.hide()\"\n          >\n            {{ 'Cancel' | translate }}\n          </button>\n          <button\n            class=\"btn btn-primary btn-sm\"\n            (click)=\"resetLinks(); pop.hide()\"\n          >\n            {{ 'Reset links' | translate }}\n          </button>\n        </ng-template>\n      </div>\n    </div>\n    <div\n      class=\"collapse bg-level-1\"\n      #collapse=\"bs-collapse\"\n      [collapse]=\"addLinkIsCollapsed\"\n      [isAnimated]=\"true\"\n    >\n      <div class=\"p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom\">\n        <c8y-quick-links-widget-config-add-link\n          (onQuickLinkCreated)=\"addQuickLink($event); addLinkIsCollapsed = true\"\n          (onCancel)=\"addLinkIsCollapsed = true\"\n        ></c8y-quick-links-widget-config-add-link>\n      </div>\n    </div>\n  </div>\n\n  @if (config().links.length) {\n    <c8y-quick-links-widget-config-list\n      [quickLinksForm]=\"quickLinksForm\"\n      [config]=\"config()\"\n      [quickLinksFormArray]=\"quickLinksFormArray\"\n      [appsNameChanged]=\"appsNameChanged\"\n    ></c8y-quick-links-widget-config-list>\n  } @else {\n    <c8y-ui-empty-state\n      [icon]=\"DEFAULT_QUICK_LINK_ICON\"\n      [title]=\"'No quick links to display' | translate\"\n      [horizontal]=\"true\"\n    >\n      <div>\n        <button\n          class=\"btn btn-primary m-t-16\"\n          title=\"{{ 'Reset links' | translate }}\"\n          type=\"button\"\n          (click)=\"resetLinks()\"\n          translate\n        >\n          Reset links\n        </button>\n      </div>\n    </c8y-ui-empty-state>\n  }\n</div>\n\n<div class=\"col-md-12\">\n  <div class=\"p-l-24 p-r-24 p-b-8 p-t-16 d-flex gap-8 a-i-center separator-top\">\n    <label\n      class=\"c8y-checkbox m-l-auto\"\n      title=\"{{ 'Translate labels if possible' | translate }}\"\n    >\n      <input\n        type=\"checkbox\"\n        [(ngModel)]=\"config().translateLinkLabels\"\n      />\n      <span></span>\n      <span>{{ 'Translate labels if possible' | translate }}</span>\n    </label>\n\n    <label class=\"m-l-auto m-b-0 text-label-small\">{{ 'Display as' | translate }}</label>\n    <div class=\"c8y-select-wrapper form-group-sm\">\n      <select\n        class=\"form-control\"\n        title=\"{{ 'Refresh options`options for refreshing a view`' | translate }}\"\n        [(ngModel)]=\"selectedDisplayOption\"\n      >\n        <option [value]=\"DisplayOption.GRID\">\n          {{ DisplayOption.GRID | translate }}\n        </option>\n        <option [value]=\"DisplayOption.LIST\">\n          {{ DisplayOption.LIST | translate }}\n        </option>\n      </select>\n    </div>\n  </div>\n  <ng-template #quickLinksPreview>\n    <c8y-quick-links-widget-view\n      [config]=\"{\n        links: getQuickLinks(),\n        displayOption: selectedDisplayOption,\n        translateLinkLabels: config().translateLinkLabels\n      }\"\n      [isPreview]=\"true\"\n    ></c8y-quick-links-widget-view>\n  </ng-template>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["NgCommonModule","i1","switchMap","FormsModule","i3","i4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkBa,MAAA,sBAAsB,GAAG;AACpC,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE;;AAMK,MAAA,4BAA4B,GAAG,sBAAsB,CAAC;AAC5D,MAAM,uBAAuB,GAAG;AAE1B,MAAA,0BAA0B,GAAG,gBAAgB,CAAC;AAC9C,MAAA,sBAAsB,GAAG,gBAAgB,CAAC;AAC1C,MAAA,gCAAgC,GAAG,gBAAgB,CAAC;AAiBpD,MAAA,qBAAqB,GAAG,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC;;MCpC7D,sCAAsC,CAAA;AALnD,IAAA,WAAA,GAAA;QAME,IAAkB,CAAA,kBAAA,GAAG,MAAM,EAAc;QACzC,IAAQ,CAAA,QAAA,GAAG,MAAM,EAAQ;AAIR,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,mBAAmB,CAAC;AAC1C,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC;AAgC1C;IA9BC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,EAAE;;AAGzC,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI;YACF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE;YACpD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;;AACrD,QAAA,MAAM;;;;IAKV,eAAe,GAAA;QACb,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAmB,CAAC;AAEvE,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;QAC7B,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC;;IAG/D,QAAQ,GAAA;AACd,QAAA,MAAM,QAAQ,GAAG;YACf,IAAI,EAAE,CAAC,uBAAuB,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;AACtD,YAAA,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5D,YAAA,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC;YAC3E,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC;SACtC;QAED,OAAO,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC;;+GArCrB,sCAAsC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAtC,sCAAsC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wCAAA,EAAA,OAAA,EAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECZnD,47DAoEA,ED3DY,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,aAAa,0BAAE,gBAAgB,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,4BAAA,EAAA,QAAA,EAAA,uGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,0FAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,4EAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA