npm - @c8y/ngx-components - Versions diffs - 1024.15.16 → 1024.16.6 - Mend

@c8y/ngx-components 1024.15.16 → 1024.16.6

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 (78) hide show

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import * as i0 from '@angular/core';
 import { inject, Injector, Injectable } from '@angular/core';
 import { PreviewService } from '@c8y/ngx-components';
 import { gettext } from '@c8y/ngx-components/gettext';
-import { AIService } from '@c8y/ngx-components/ai';
+import { AIService, cumulocityApiRequestLabelProvider } from '@c8y/ngx-components/ai';
 import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
 import { map, combineLatest, from, first } from 'rxjs';
 import { HTML_AGENT } from '@c8y/ngx-components/ai/agents/html';
@@ -90,7 +90,8 @@ class AIHtmlWidgetConfigFactory {
                 toolCallConfig: {
                     [this.queryToolName]: {
                         executingLabel: gettext('Analyzing query…'),
-                        completedLabel: gettext('Query analyzed')
+                        completedLabel: gettext('Query analyzed'),
+                        labelProvider: cumulocityApiRequestLabelProvider
                     },
                     [this.codeToolName]: {
                         executingLabel: gettext('Creating widget…'),

package/fesm2022/c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs","sources":["../../widgets/definitions/html-widget-ai-config/html-widget-agent.definitions.ts","../../widgets/definitions/html-widget-ai-config/ai-html-widget-config.factory.ts","../../widgets/definitions/html-widget-ai-config/index.ts","../../widgets/definitions/html-widget-ai-config/c8y-ngx-components-widgets-definitions-html-widget-ai-config.ts"],"sourcesContent":["import type { ClientAgentDefinition } from '@c8y/ngx-components/ai';\nimport { HTML_AGENT } from '@c8y/ngx-components/ai/agents/html';\nimport { gettext } from '@c8y/ngx-components/gettext';\n\ndeclare const __MODE__: 'development' \| 'production' \| undefined;\n\n// Treat as \"production\" when run from Jest\nconst mode = (typeof __MODE__ !== 'undefined' ? __MODE__ : 'production') as\n \| 'development'\n \| 'production';\n\nexport const HTML_WIDGET_AGENT_DEFINITIONS: ClientAgentDefinition = {\n snapshot: mode === 'development',\n label: gettext('HTML Widget Code assistant'),\n definition: HTML_AGENT\n};\n","import { inject, Injectable, Injector } from '@angular/core';\nimport { ExtensionFactory, PreviewService } from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n AIService,\n AIStreamResponse,\n WidgetAiChatSectionComponentConfig,\n ToolCallPart,\n AIAssistantMessage\n} from '@c8y/ngx-components/ai';\nimport { WidgetAiChatSectionComponent } from '@c8y/ngx-components/ai/agent-chat';\nimport type { WidgetConfigSectionDefinition } from '@c8y/ngx-components/context-dashboard';\nimport { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport { combineLatest, first, from, map, Observable } from 'rxjs';\nimport { HTML_WIDGET_AGENT_DEFINITIONS } from './html-widget-agent.definitions';\nimport type {\n HtmlWidgetConfig,\n HtmlWidgetConfigService\n} from '@c8y/ngx-components/widgets/implementations/html-widget';\n\ntype CodeChangeToolCall = ToolCallPart<{ code: string }>;\n\n@Injectable({\n providedIn: 'root'\n})\nexport class AIHtmlWidgetConfigFactory implements ExtensionFactory<WidgetConfigSectionDefinition> {\n private readonly betaPreviewService = inject(PreviewService);\n private readonly aiService = inject(AIService);\n /** The root injector (nb: components cannot be injected from here). /\n private readonly injector = inject(Injector);\n\n private readonly codeTag = 'c8y-code-extract';\n private readonly codeToolName = 'c8y-html-widget-code';\n private readonly queryToolName = 'cumulocity-api-request';\n private readonly widgetConfigService = inject(WidgetConfigService);\n\n private readonly aiWidgetConfigDefinition: WidgetConfigSectionDefinition<WidgetAiChatSectionComponent> =\n {\n widgetId: defaultWidgetIds.HTML,\n label: gettext('AI Code Assistant'),\n loadComponent: () =>\n import('@c8y/ngx-components/ai/agent-chat').then(m => m.WidgetAiChatSectionComponent),\n initialState: {\n // configuration to pass to WidgetAiChatSectionComponent\n agent: HTML_WIDGET_AGENT_DEFINITIONS,\n chatConfig: {\n title: gettext(\n 'I’m your AI Code Assistant, here to help you build powerful widgets for your dashboard.'\n ),\n welcomeText: gettext(\n 'Describe the widget you want or select one of the options below to get started.'\n ),\n showCumulativeUsage: true,\n showUsagePerMessage: true,\n showDeleteAction: true\n },\n\n loadComponentConfig: this.loadWidgetAiChatComponentConfig.bind(this),\n\n variables: this.widgetConfigService.currentConfig$.pipe(\n map((htmlWidgetConfig: HtmlWidgetConfig) => ({\n currentHtmlWidgetCode: htmlWidgetConfig?.config?.code \|\| '',\n c8yContext: htmlWidgetConfig?.device \|\| {}\n }))\n ),\n\n suggestions: [\n {\n label: gettext('Measurement widget'),\n prompt: gettext('Create a widget that shows the current measurement of this device.')\n },\n {\n label: gettext('Device status widget'),\n prompt: gettext('Create a widget that shows the status of my devices.')\n },\n {\n label: gettext('Critical alarm widget'),\n prompt: gettext('Create a widget that shows all critical alarms.')\n }\n ]\n },\n priority: 100,\n injector: this.injector\n };\n\n get(): Observable<WidgetConfigSectionDefinition[]> {\n return combineLatest([\n from(this.aiService.getAgentHealth()),\n this.betaPreviewService.getState$('ui.html-widget.v2').pipe(first())\n ]).pipe(\n map(([aiHealthCheck, state]) => {\n if (state && aiHealthCheck.isProviderConfigured) {\n return [this.aiWidgetConfigDefinition];\n }\n return [];\n })\n );\n }\n\n private async loadWidgetAiChatComponentConfig(\n componentInjector: Injector\n ): Promise<WidgetAiChatSectionComponentConfig> {\n const { HtmlWidgetConfigService, HtmlAiChatToolDetailsComponent } = await import(\n '@c8y/ngx-components/widgets/implementations/html-widget'\n );\n const htmlWidgetConfigService = componentInjector.get(HtmlWidgetConfigService);\n\n return {\n preprocessAgentMessage: (message, changed) =>\n this.preprocessAgentMessage(message, changed, htmlWidgetConfigService),\n\n assistantMessageDisplayConfig: {\n toolDetailsComponent: toolCallPart => {\n if (toolCallPart.toolName === this.codeToolName) {\n return HtmlAiChatToolDetailsComponent;\n }\n return undefined;\n },\n\n toolCallConfig: {\n [this.queryToolName]: {\n executingLabel: gettext('Analyzing query…'),\n completedLabel: gettext('Query analyzed')\n },\n [this.codeToolName]: {\n executingLabel: gettext('Creating widget…'),\n completedLabel: gettext('Widget created')\n }\n },\n // To match current behaviour and to help with development, for now we show the JSON for all tool calls\n showDefaultToolDetails: 'all'\n }\n };\n }\n\n private applyCurrentCode(code: string, htmlWidgetConfigService: HtmlWidgetConfigService) {\n const newConfig = {\n code: code,\n css: '',\n devMode: true,\n legacy: false,\n options: { advancedSecurity: false, cssEncapsulation: false }\n };\n htmlWidgetConfigService.configChanged$.next(newConfig);\n htmlWidgetConfigService.widgetConfigService.updateConfig({ config: newConfig });\n }\n\n protected preprocessAgentMessage(\n message: AIAssistantMessage,\n changedPart: AIStreamResponse['changedPart'],\n htmlWidgetConfigService: HtmlWidgetConfigService\n ): AIAssistantMessage {\n // Only apply this pre-processing to text parts, since that's what the agent will use to send the code\n if (!changedPart \|\| changedPart.type !== 'text') {\n return message;\n }\n\n // Rewrite HTML content generated by the agent as text content as if it had come from a tool call\n\n // Find last tool named this.codeToolName in message.content, or undefined\n const codeTool = message.content.reduce<CodeChangeToolCall \| undefined>(\n (last, part) =>\n 'toolName' in part && part.toolName === this.codeToolName\n ? (part as CodeChangeToolCall)\n : last,\n undefined\n );\n\n if (codeTool && codeTool.type !== 'tool-result') {\n // A code update tool call is in progress - accumulate text into input\n const input = `${codeTool.input?.code \|\| ''}${changedPart.text}`;\n codeTool.input.code = input;\n changedPart.text = '';\n\n const closeIdx = input.indexOf(`</${this.codeTag}>`);\n if (closeIdx !== -1) {\n // Found closing tag - convert to result and start new step\n const beforeClose = input.substring(0, closeIdx);\n const afterClose = input.substring(closeIdx + `</${this.codeTag}>`.length);\n\n codeTool.input.code = beforeClose;\n codeTool.type = 'tool-result';\n\n // Always create a new (fake) step after this (just like a real AI), since final step can't contain tool calls\n message.content.push({ type: 'step-start' });\n if (afterClose.length > 0) {\n message.content.push({ type: 'text', text: afterClose });\n }\n\n // Since this is a fake tool call not a real one, the tool result callback won't trigger so do this manually\n this.applyCurrentCode(codeTool.input.code, htmlWidgetConfigService);\n } else {\n // Replace with a new instance so that change detection works\n message.content[message.content.findIndex(part => part === codeTool)] = { ...codeTool };\n }\n } else {\n // No in-progress code tag, so check for one\n const openIdx = changedPart.text.indexOf(`<${this.codeTag}>`);\n if (openIdx !== -1) {\n const afterOpen = changedPart.text.substring(openIdx + `<${this.codeTag}>`.length);\n changedPart.text = changedPart.text.substring(0, openIdx);\n\n // Start a new \"step\" to keep it separate and simple\n message.content.push({ type: 'step-start' });\n message.content.push({\n type: 'tool-input-streaming',\n toolName: this.codeToolName,\n toolCallId: this.codeToolName + message.content.length, // add part number just to ensure uniqueness\n input: { code: afterOpen }\n } satisfies CodeChangeToolCall);\n }\n }\n\n if (changedPart.text === '') {\n // Remove any empty changedPart from content\n message.content.splice(\n message.content.findIndex(part => part === changedPart),\n 1\n );\n }\n\n return message;\n }\n}\n","import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { AIHtmlWidgetConfigFactory } from './ai-html-widget-config.factory';\n\nexport const htmlWidgetAIChatProviders = [hookWidgetConfig(AIHtmlWidgetConfigFactory)];\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"c8y-ngx-components-widgets-definitions-html-widget-ai-config.mjs","sources":["../../widgets/definitions/html-widget-ai-config/html-widget-agent.definitions.ts","../../widgets/definitions/html-widget-ai-config/ai-html-widget-config.factory.ts","../../widgets/definitions/html-widget-ai-config/index.ts","../../widgets/definitions/html-widget-ai-config/c8y-ngx-components-widgets-definitions-html-widget-ai-config.ts"],"sourcesContent":["import type { ClientAgentDefinition } from '@c8y/ngx-components/ai';\nimport { HTML_AGENT } from '@c8y/ngx-components/ai/agents/html';\nimport { gettext } from '@c8y/ngx-components/gettext';\n\ndeclare const __MODE__: 'development' \| 'production' \| undefined;\n\n// Treat as \"production\" when run from Jest\nconst mode = (typeof __MODE__ !== 'undefined' ? __MODE__ : 'production') as\n \| 'development'\n \| 'production';\n\nexport const HTML_WIDGET_AGENT_DEFINITIONS: ClientAgentDefinition = {\n snapshot: mode === 'development',\n label: gettext('HTML Widget Code assistant'),\n definition: HTML_AGENT\n};\n","import { inject, Injectable, Injector } from '@angular/core';\nimport { ExtensionFactory, PreviewService } from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport {\n AIService,\n AIStreamResponse,\n WidgetAiChatSectionComponentConfig,\n ToolCallPart,\n AIAssistantMessage,\n cumulocityApiRequestLabelProvider\n} from '@c8y/ngx-components/ai';\nimport { WidgetAiChatSectionComponent } from '@c8y/ngx-components/ai/agent-chat';\nimport type { WidgetConfigSectionDefinition } from '@c8y/ngx-components/context-dashboard';\nimport { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';\nimport { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';\nimport { combineLatest, first, from, map, Observable } from 'rxjs';\nimport { HTML_WIDGET_AGENT_DEFINITIONS } from './html-widget-agent.definitions';\nimport type {\n HtmlWidgetConfig,\n HtmlWidgetConfigService\n} from '@c8y/ngx-components/widgets/implementations/html-widget';\n\ntype CodeChangeToolCall = ToolCallPart<{ code: string }>;\n\n@Injectable({\n providedIn: 'root'\n})\nexport class AIHtmlWidgetConfigFactory implements ExtensionFactory<WidgetConfigSectionDefinition> {\n private readonly betaPreviewService = inject(PreviewService);\n private readonly aiService = inject(AIService);\n /** The root injector (nb: components cannot be injected from here). /\n private readonly injector = inject(Injector);\n\n private readonly codeTag = 'c8y-code-extract';\n private readonly codeToolName = 'c8y-html-widget-code';\n private readonly queryToolName = 'cumulocity-api-request';\n private readonly widgetConfigService = inject(WidgetConfigService);\n\n private readonly aiWidgetConfigDefinition: WidgetConfigSectionDefinition<WidgetAiChatSectionComponent> =\n {\n widgetId: defaultWidgetIds.HTML,\n label: gettext('AI Code Assistant'),\n loadComponent: () =>\n import('@c8y/ngx-components/ai/agent-chat').then(m => m.WidgetAiChatSectionComponent),\n initialState: {\n // configuration to pass to WidgetAiChatSectionComponent\n agent: HTML_WIDGET_AGENT_DEFINITIONS,\n chatConfig: {\n title: gettext(\n 'I’m your AI Code Assistant, here to help you build powerful widgets for your dashboard.'\n ),\n welcomeText: gettext(\n 'Describe the widget you want or select one of the options below to get started.'\n ),\n showCumulativeUsage: true,\n showUsagePerMessage: true,\n showDeleteAction: true\n },\n\n loadComponentConfig: this.loadWidgetAiChatComponentConfig.bind(this),\n\n variables: this.widgetConfigService.currentConfig$.pipe(\n map((htmlWidgetConfig: HtmlWidgetConfig) => ({\n currentHtmlWidgetCode: htmlWidgetConfig?.config?.code \|\| '',\n c8yContext: htmlWidgetConfig?.device \|\| {}\n }))\n ),\n\n suggestions: [\n {\n label: gettext('Measurement widget'),\n prompt: gettext('Create a widget that shows the current measurement of this device.')\n },\n {\n label: gettext('Device status widget'),\n prompt: gettext('Create a widget that shows the status of my devices.')\n },\n {\n label: gettext('Critical alarm widget'),\n prompt: gettext('Create a widget that shows all critical alarms.')\n }\n ]\n },\n priority: 100,\n injector: this.injector\n };\n\n get(): Observable<WidgetConfigSectionDefinition[]> {\n return combineLatest([\n from(this.aiService.getAgentHealth()),\n this.betaPreviewService.getState$('ui.html-widget.v2').pipe(first())\n ]).pipe(\n map(([aiHealthCheck, state]) => {\n if (state && aiHealthCheck.isProviderConfigured) {\n return [this.aiWidgetConfigDefinition];\n }\n return [];\n })\n );\n }\n\n private async loadWidgetAiChatComponentConfig(\n componentInjector: Injector\n ): Promise<WidgetAiChatSectionComponentConfig> {\n const { HtmlWidgetConfigService, HtmlAiChatToolDetailsComponent } = await import(\n '@c8y/ngx-components/widgets/implementations/html-widget'\n );\n const htmlWidgetConfigService = componentInjector.get(HtmlWidgetConfigService);\n\n return {\n preprocessAgentMessage: (message, changed) =>\n this.preprocessAgentMessage(message, changed, htmlWidgetConfigService),\n\n assistantMessageDisplayConfig: {\n toolDetailsComponent: toolCallPart => {\n if (toolCallPart.toolName === this.codeToolName) {\n return HtmlAiChatToolDetailsComponent;\n }\n return undefined;\n },\n\n toolCallConfig: {\n [this.queryToolName]: {\n executingLabel: gettext('Analyzing query…'),\n completedLabel: gettext('Query analyzed'),\n labelProvider: cumulocityApiRequestLabelProvider\n },\n [this.codeToolName]: {\n executingLabel: gettext('Creating widget…'),\n completedLabel: gettext('Widget created')\n }\n },\n // To match current behaviour and to help with development, for now we show the JSON for all tool calls\n showDefaultToolDetails: 'all'\n }\n };\n }\n\n private applyCurrentCode(code: string, htmlWidgetConfigService: HtmlWidgetConfigService) {\n const newConfig = {\n code: code,\n css: '',\n devMode: true,\n legacy: false,\n options: { advancedSecurity: false, cssEncapsulation: false }\n };\n htmlWidgetConfigService.configChanged$.next(newConfig);\n htmlWidgetConfigService.widgetConfigService.updateConfig({ config: newConfig });\n }\n\n protected preprocessAgentMessage(\n message: AIAssistantMessage,\n changedPart: AIStreamResponse['changedPart'],\n htmlWidgetConfigService: HtmlWidgetConfigService\n ): AIAssistantMessage {\n // Only apply this pre-processing to text parts, since that's what the agent will use to send the code\n if (!changedPart \|\| changedPart.type !== 'text') {\n return message;\n }\n\n // Rewrite HTML content generated by the agent as text content as if it had come from a tool call\n\n // Find last tool named this.codeToolName in message.content, or undefined\n const codeTool = message.content.reduce<CodeChangeToolCall \| undefined>(\n (last, part) =>\n 'toolName' in part && part.toolName === this.codeToolName\n ? (part as CodeChangeToolCall)\n : last,\n undefined\n );\n\n if (codeTool && codeTool.type !== 'tool-result') {\n // A code update tool call is in progress - accumulate text into input\n const input = `${codeTool.input?.code \|\| ''}${changedPart.text}`;\n codeTool.input.code = input;\n changedPart.text = '';\n\n const closeIdx = input.indexOf(`</${this.codeTag}>`);\n if (closeIdx !== -1) {\n // Found closing tag - convert to result and start new step\n const beforeClose = input.substring(0, closeIdx);\n const afterClose = input.substring(closeIdx + `</${this.codeTag}>`.length);\n\n codeTool.input.code = beforeClose;\n codeTool.type = 'tool-result';\n\n // Always create a new (fake) step after this (just like a real AI), since final step can't contain tool calls\n message.content.push({ type: 'step-start' });\n if (afterClose.length > 0) {\n message.content.push({ type: 'text', text: afterClose });\n }\n\n // Since this is a fake tool call not a real one, the tool result callback won't trigger so do this manually\n this.applyCurrentCode(codeTool.input.code, htmlWidgetConfigService);\n } else {\n // Replace with a new instance so that change detection works\n message.content[message.content.findIndex(part => part === codeTool)] = { ...codeTool };\n }\n } else {\n // No in-progress code tag, so check for one\n const openIdx = changedPart.text.indexOf(`<${this.codeTag}>`);\n if (openIdx !== -1) {\n const afterOpen = changedPart.text.substring(openIdx + `<${this.codeTag}>`.length);\n changedPart.text = changedPart.text.substring(0, openIdx);\n\n // Start a new \"step\" to keep it separate and simple\n message.content.push({ type: 'step-start' });\n message.content.push({\n type: 'tool-input-streaming',\n toolName: this.codeToolName,\n toolCallId: this.codeToolName + message.content.length, // add part number just to ensure uniqueness\n input: { code: afterOpen }\n } satisfies CodeChangeToolCall);\n }\n }\n\n if (changedPart.text === '') {\n // Remove any empty changedPart from content\n message.content.splice(\n message.content.findIndex(part => part === changedPart),\n 1\n );\n }\n\n return message;\n }\n}\n","import { hookWidgetConfig } from '@c8y/ngx-components/context-dashboard';\nimport { AIHtmlWidgetConfigFactory } from './ai-html-widget-config.factory';\n\nexport const htmlWidgetAIChatProviders = [hookWidgetConfig(AIHtmlWidgetConfigFactory)];\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/c8y-ngx-components-widgets-implementations-asset-table.mjs CHANGED Viewed

@@ -14,11 +14,10 @@ import * as i2$1 from '@c8y/ngx-components/asset-properties';
 import { AssetPropertySelectorDrawerComponent } from '@c8y/ngx-components/asset-properties';
 import { transform, identity, get, assign } from 'lodash';
 import * as i2 from '@c8y/ngx-components/device-grid';
-import { AlarmsDeviceGridColumn } from '@c8y/ngx-components/device-grid';
+import { AlarmsDeviceGridColumn, StatusDeviceGridColumn } from '@c8y/ngx-components/device-grid';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
-import { AssetTypeGridColumn } from '@c8y/ngx-components/data-grid-columns';
 import * as i3 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { isEqual } from 'lodash-es';
@@ -651,11 +650,10 @@ class AssetTableService {
         const opColumns = this.buildOperationColumns(operationColumns);
         let allColumns = [...propertyColumns, ...opColumns];
         if (config?.showStatusIcon) {
-            const statusCol = new AssetTypeGridColumn();
+            const statusCol = new StatusDeviceGridColumn();
             statusCol.name = '__status';
             statusCol.__origin = 'status';
             statusCol.__id = 'status';
-            statusCol.header = gettext('Status');
             allColumns = [statusCol, ...allColumns];
         }
         return this.applySortingAndOrdering(allColumns, config);
@@ -2096,7 +2094,7 @@ class AssetTableGridSettingsComponent {
         return this.assetTableService.getColumns(this.selectedProperties, this.operationColumns, config);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AssetTableGridSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AssetTableGridSettingsComponent, isStandalone: true, selector: "c8y-asset-table-column-settings", host: { classAttribute: "bg-level-1" }, providers: [BsDropdownDirective], ngImport: i0, template: "<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-list-group\n    class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n    style=\"max-height: 300px\"\n    role=\"list\"\n    data-cy=\"selected-properties\"\n    cdkDropList\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\n  >\n    @for (column of columns; track trackByColumnName($index, column)) {\n      @if (!column.positionFixed) {\n        <c8y-li\n          role=\"listitem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          [ngClass]=\"{ 'empty-actions': !column.isOperation }\"\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            [attr.aria-label]=\"'Drag to reorder' | translate\"\n            cdkDragHandle\n          >\n            <i\n              c8yIcon=\"drag-reorder\"\n              style=\"font-size: 0.7em\"\n            ></i>\n          </c8y-li-drag-handle>\n          @if (column.__origin !== 'status') {\n            <c8y-li-checkbox\n              class=\"a-s-stretch\"\n              title=\"{{ (column.header | translate) || column.name }} {{\n                column.custom ? (customLabel | translate) : ''\n              }}\"\n              [attr.aria-label]=\"'Show/hide column' | translate\"\n              [(ngModel)]=\"column.visible\"\n              (ngModelChange)=\"toggleColumnVisibility(column)\"\n              c8yProductExperience\n              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n            ></c8y-li-checkbox>\n          } @else {\n            <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n          }\n          <div class=\"content-flex-32 p-t-4 p-b-4\">\n            <div class=\"col-6\">\n              @if (column.__origin !== 'status') {\n                <c8y-input-group-editable\n                  required\n                  size=\"sm\"\n                  formGroupClass=\"m-b-0\"\n                  [ariaLabel]=\"'Column header' | translate\"\n                  [placeholder]=\"'Column header' | translate\"\n                  [(ngModel)]=\"column.header\"\n                  (save)=\"updateColumnNames(column)\"\n                ></c8y-input-group-editable>\n              } @else {\n                <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n              }\n            </div>\n            <div class=\"col-6\">\n              <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n                <!-- Filters button -->\n                @if (column.filteringConfig) {\n                  <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      [insideClick]=\"true\"\n                      c8yDropdownFocusTrap\n                      #gridHeaderDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                        [attr.aria-label]=\"'Filter' | translate\"\n                        tooltip=\"{{ 'Filter' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                        dropdownToggle\n                      >\n                        <i c8yIcon=\"filter\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        (click)=\"$event.stopPropagation()\"\n                        *dropdownMenu\n                      >\n                        <formly-form\n                          class=\"p-16 d-block\"\n                          style=\"min-width: 250px\"\n                          [form]=\"column.filteringConfig.formGroup\"\n                          [fields]=\"column.filteringConfig.fields\"\n                          [model]=\"column.filteringConfig.model\"\n                        ></formly-form>\n                        <div class=\"p-16 fit-w d-flex separator-top\">\n                          <button\n                            class=\"btn btn-default btn-sm m-r-8 grow\"\n                            title=\"{{ 'Reset' | translate }}\"\n                            (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Reset\n                          </button>\n                          <button\n                            class=\"btn btn-primary btn-sm grow\"\n                            title=\"{{ 'Apply' | translate }}\"\n                            (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Apply\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Sort button -->\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <button\n                    class=\"btn btn-icon btn-default btn-xs\"\n                    [attr.aria-label]=\"'Sort order' | translate\"\n                    tooltip=\"{{ 'Sort order' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"changeSortOrder(column)\"\n                  >\n                    @if (column.sortOrder === 'asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    } @else if (column.sortOrder === 'desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    } @else {\n                      <i\n                        c8yIcon=\"exchange\"\n                        style=\"transform: rotate(90deg)\"\n                      ></i>\n                    }\n                  </button>\n                </div>\n                <!-- Column type dropdown -->\n                @if (!column.isOperation && column.__origin !== 'status') {\n                  <div\n                    class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                    [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                  >\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      c8yDropdownFocusTrap\n                      #columnTypeDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                        [attr.aria-label]=\"'Select render type' | translate\"\n                        tooltip=\"{{ 'Render type' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                        type=\"button\"\n                        [attr.data-cy]=\"'column-settings--render-type-dropdown--' + column.name\"\n                        [delay]=\"500\"\n                        dropdownToggle\n                      >\n                        {{ column.type | translate | humanize }}\n                        <i c8yIcon=\"caret-down\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        *dropdownMenu\n                      >\n                        <c8y-list-group role=\"list\">\n                          @if (column.type === 'computed' || column.computedConfig) {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (keydown.enter)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (click)=\"applyColumnType('computed', column)\"\n                              [active]=\"column.type === 'computed'\"\n                            >\n                              {{ 'Computed' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'icon'\"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          } @else {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('default', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'default'\"\n                            >\n                              {{ 'Default' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"date-render-type-option\"\n                              (click)=\"applyColumnType('date', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'date'\"\n                            >\n                              {{ 'Date' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              [active]=\"column.type === 'icon'\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          }\n                        </c8y-list-group>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (column.isOperation) {\n            <ng-container>\n              @if (true) {\n                <c8y-li-action\n                  icon=\"edit1\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  label=\"Edit\"\n                  (click)=\"editOperationColumn(column)\"\n                ></c8y-li-action>\n              }\n              @if (true) {\n                <c8y-li-action\n                  icon=\"delete\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  label=\"Delete\"\n                  (click)=\"deleteColumn(column)\"\n                ></c8y-li-action>\n              }\n            </ng-container>\n          }\n        </c8y-li>\n      }\n    }\n    @if (columns.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'list'\"\n        [title]=\"'No properties selected.' | translate\"\n        [subtitle]=\"'Select from the list which columns to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    }\n  </c8y-list-group>\n  <div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n    <button\n      class=\"btn btn-default btn-sm m-r-8\"\n      type=\"button\"\n      (click)=\"selectAssetAndProperty()\"\n    >\n      {{ 'Select properties' | translate }}\n    </button>\n    <div\n      class=\"dropdown\"\n      container=\"body\"\n      dropdown\n      c8yDropdownFocusTrap\n      #customActionsDropdown=\"bs-dropdown\"\n    >\n      <button\n        class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n        [title]=\"'Add action' | translate\"\n        [attr.aria-haspopup]=\"true\"\n        [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n        type=\"button\"\n        data-cy=\"asset-table-column-settings--add-action-btn\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"cog\"></i>\n        <span>{{ 'Add action' | translate }}</span>\n        <span class=\"caret\"></span>\n      </button>\n      <ul\n        class=\"dropdown-menu\"\n        *dropdownMenu\n      >\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--create-operation\"\n            (click)=\"onCreateOperation()\"\n          >\n            {{ 'Create operation' | translate }}\n          </button>\n        </li>\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--toggle-maintenance\"\n            (click)=\"onToggleMaintenanceMode()\"\n            [disabled]=\"hasMaintenanceColumn\"\n          >\n            {{ 'Toggle maintenance mode' | translate }}\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete"], outputs: ["save", "cancel"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i1.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i1.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AssetTableGridSettingsComponent, isStandalone: true, selector: "c8y-asset-table-column-settings", host: { classAttribute: "bg-level-1" }, providers: [BsDropdownDirective], ngImport: i0, template: "<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-list-group\n    class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n    style=\"max-height: 300px\"\n    role=\"list\"\n    data-cy=\"selected-properties\"\n    cdkDropList\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\n  >\n    @for (column of columns; track trackByColumnName($index, column)) {\n      @if (!column.positionFixed) {\n        <c8y-li\n          role=\"listitem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          [ngClass]=\"{ 'empty-actions': !column.isOperation }\"\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            [attr.aria-label]=\"'Drag to reorder' | translate\"\n            cdkDragHandle\n          >\n            <i\n              c8yIcon=\"drag-reorder\"\n              style=\"font-size: 0.7em\"\n            ></i>\n          </c8y-li-drag-handle>\n          @if (column.__origin !== 'status') {\n            <c8y-li-checkbox\n              class=\"a-s-stretch\"\n              title=\"{{ (column.header | translate) || column.name }} {{\n                column.custom ? (customLabel | translate) : ''\n              }}\"\n              [attr.aria-label]=\"'Show/hide column' | translate\"\n              [(ngModel)]=\"column.visible\"\n              (ngModelChange)=\"toggleColumnVisibility(column)\"\n              c8yProductExperience\n              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n            ></c8y-li-checkbox>\n          } @else {\n            <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n          }\n          <div class=\"content-flex-32 p-t-4 p-b-4\">\n            <div class=\"col-6\">\n              @if (column.__origin !== 'status') {\n                <c8y-input-group-editable\n                  required\n                  size=\"sm\"\n                  formGroupClass=\"m-b-0\"\n                  [ariaLabel]=\"'Column header' | translate\"\n                  [placeholder]=\"'Column header' | translate\"\n                  [(ngModel)]=\"column.header\"\n                  (save)=\"updateColumnNames(column)\"\n                ></c8y-input-group-editable>\n              } @else {\n                <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n              }\n            </div>\n            <div class=\"col-6\">\n              <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n                <!-- Filters button -->\n                @if (column.filteringConfig) {\n                  <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      [insideClick]=\"true\"\n                      c8yDropdownFocusTrap\n                      #gridHeaderDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                        [attr.aria-label]=\"'Filter' | translate\"\n                        tooltip=\"{{ 'Filter' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                        dropdownToggle\n                      >\n                        <i c8yIcon=\"filter\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        (click)=\"$event.stopPropagation()\"\n                        *dropdownMenu\n                      >\n                        <formly-form\n                          class=\"p-16 d-block\"\n                          style=\"min-width: 250px\"\n                          [form]=\"column.filteringConfig.formGroup\"\n                          [fields]=\"column.filteringConfig.fields\"\n                          [model]=\"column.filteringConfig.model\"\n                        ></formly-form>\n                        <div class=\"p-16 fit-w d-flex separator-top sticky-bottom\">\n                          <button\n                            class=\"btn btn-default btn-sm m-r-8 grow\"\n                            title=\"{{ 'Reset' | translate }}\"\n                            (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Reset\n                          </button>\n                          <button\n                            class=\"btn btn-primary btn-sm grow\"\n                            title=\"{{ 'Apply' | translate }}\"\n                            (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Apply\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Sort button -->\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <button\n                    class=\"btn btn-icon btn-default btn-xs\"\n                    [attr.aria-label]=\"'Sort order' | translate\"\n                    tooltip=\"{{ 'Sort order' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"changeSortOrder(column)\"\n                  >\n                    @if (column.sortOrder === 'asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    } @else if (column.sortOrder === 'desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    } @else {\n                      <i\n                        c8yIcon=\"exchange\"\n                        style=\"transform: rotate(90deg)\"\n                      ></i>\n                    }\n                  </button>\n                </div>\n                <!-- Column type dropdown -->\n                @if (!column.isOperation && column.__origin !== 'status') {\n                  <div\n                    class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                    [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                  >\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      c8yDropdownFocusTrap\n                      #columnTypeDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                        [attr.aria-label]=\"'Select render type' | translate\"\n                        tooltip=\"{{ 'Render type' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                        type=\"button\"\n                        [attr.data-cy]=\"'column-settings--render-type-dropdown--' + column.name\"\n                        [delay]=\"500\"\n                        dropdownToggle\n                      >\n                        {{ column.type | translate | humanize }}\n                        <i c8yIcon=\"caret-down\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        *dropdownMenu\n                      >\n                        <c8y-list-group role=\"list\">\n                          @if (column.type === 'computed' || column.computedConfig) {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (keydown.enter)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (click)=\"applyColumnType('computed', column)\"\n                              [active]=\"column.type === 'computed'\"\n                            >\n                              {{ 'Computed' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'icon'\"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          } @else {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('default', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'default'\"\n                            >\n                              {{ 'Default' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"date-render-type-option\"\n                              (click)=\"applyColumnType('date', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'date'\"\n                            >\n                              {{ 'Date' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              [active]=\"column.type === 'icon'\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          }\n                        </c8y-list-group>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (column.isOperation) {\n            <ng-container>\n              @if (true) {\n                <c8y-li-action\n                  icon=\"edit1\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  label=\"Edit\"\n                  (click)=\"editOperationColumn(column)\"\n                ></c8y-li-action>\n              }\n              @if (true) {\n                <c8y-li-action\n                  icon=\"delete\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  label=\"Delete\"\n                  (click)=\"deleteColumn(column)\"\n                ></c8y-li-action>\n              }\n            </ng-container>\n          }\n        </c8y-li>\n      }\n    }\n    @if (columns.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'list'\"\n        [title]=\"'No properties selected.' | translate\"\n        [subtitle]=\"'Select from the list which columns to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    }\n  </c8y-list-group>\n  <div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n    <button\n      class=\"btn btn-default btn-sm m-r-8\"\n      type=\"button\"\n      (click)=\"selectAssetAndProperty()\"\n    >\n      {{ 'Select properties' | translate }}\n    </button>\n    <div\n      class=\"dropdown\"\n      container=\"body\"\n      dropdown\n      c8yDropdownFocusTrap\n      #customActionsDropdown=\"bs-dropdown\"\n    >\n      <button\n        class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n        [title]=\"'Add action' | translate\"\n        [attr.aria-haspopup]=\"true\"\n        [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n        type=\"button\"\n        data-cy=\"asset-table-column-settings--add-action-btn\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"cog\"></i>\n        <span>{{ 'Add action' | translate }}</span>\n        <span class=\"caret\"></span>\n      </button>\n      <ul\n        class=\"dropdown-menu\"\n        *dropdownMenu\n      >\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--create-operation\"\n            (click)=\"onCreateOperation()\"\n          >\n            {{ 'Create operation' | translate }}\n          </button>\n        </li>\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--toggle-maintenance\"\n            (click)=\"onToggleMaintenanceMode()\"\n            [disabled]=\"hasMaintenanceColumn\"\n          >\n            {{ 'Toggle maintenance mode' | translate }}\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</fieldset>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.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: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "title", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete", "required"], outputs: ["save", "cancel"] }, { kind: "directive", type: DropdownFocusTrapDirective, selector: "[c8yDropdownFocusTrap]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "ngmodule", type: ListGroupModule }, { kind: "component", type: i1.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i1.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i1.ListItemActionComponent, selector: "c8y-list-item-action, c8y-li-action", inputs: ["label", "icon", "disabled"], outputs: ["click"] }, { kind: "component", type: i1.ListItemCheckboxComponent, selector: "c8y-list-item-checkbox, c8y-li-checkbox", inputs: ["selected", "indeterminate", "disabled", "displayAsSwitch"], outputs: ["onSelect"] }, { kind: "component", type: i1.ListItemDragHandleComponent, selector: "c8y-list-item-drag-handle, c8y-li-drag-handle" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizePipe, name: "humanize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AssetTableGridSettingsComponent, decorators: [{
             type: Component,
@@ -2117,7 +2115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         EmptyStateComponent,
                         ListGroupModule,
                         NgClass
-                    ], providers: [BsDropdownDirective], template: "<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-list-group\n    class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n    style=\"max-height: 300px\"\n    role=\"list\"\n    data-cy=\"selected-properties\"\n    cdkDropList\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\n  >\n    @for (column of columns; track trackByColumnName($index, column)) {\n      @if (!column.positionFixed) {\n        <c8y-li\n          role=\"listitem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          [ngClass]=\"{ 'empty-actions': !column.isOperation }\"\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            [attr.aria-label]=\"'Drag to reorder' | translate\"\n            cdkDragHandle\n          >\n            <i\n              c8yIcon=\"drag-reorder\"\n              style=\"font-size: 0.7em\"\n            ></i>\n          </c8y-li-drag-handle>\n          @if (column.__origin !== 'status') {\n            <c8y-li-checkbox\n              class=\"a-s-stretch\"\n              title=\"{{ (column.header | translate) || column.name }} {{\n                column.custom ? (customLabel | translate) : ''\n              }}\"\n              [attr.aria-label]=\"'Show/hide column' | translate\"\n              [(ngModel)]=\"column.visible\"\n              (ngModelChange)=\"toggleColumnVisibility(column)\"\n              c8yProductExperience\n              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n            ></c8y-li-checkbox>\n          } @else {\n            <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n          }\n          <div class=\"content-flex-32 p-t-4 p-b-4\">\n            <div class=\"col-6\">\n              @if (column.__origin !== 'status') {\n                <c8y-input-group-editable\n                  required\n                  size=\"sm\"\n                  formGroupClass=\"m-b-0\"\n                  [ariaLabel]=\"'Column header' | translate\"\n                  [placeholder]=\"'Column header' | translate\"\n                  [(ngModel)]=\"column.header\"\n                  (save)=\"updateColumnNames(column)\"\n                ></c8y-input-group-editable>\n              } @else {\n                <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n              }\n            </div>\n            <div class=\"col-6\">\n              <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n                <!-- Filters button -->\n                @if (column.filteringConfig) {\n                  <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      [insideClick]=\"true\"\n                      c8yDropdownFocusTrap\n                      #gridHeaderDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                        [attr.aria-label]=\"'Filter' | translate\"\n                        tooltip=\"{{ 'Filter' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                        dropdownToggle\n                      >\n                        <i c8yIcon=\"filter\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        (click)=\"$event.stopPropagation()\"\n                        *dropdownMenu\n                      >\n                        <formly-form\n                          class=\"p-16 d-block\"\n                          style=\"min-width: 250px\"\n                          [form]=\"column.filteringConfig.formGroup\"\n                          [fields]=\"column.filteringConfig.fields\"\n                          [model]=\"column.filteringConfig.model\"\n                        ></formly-form>\n                        <div class=\"p-16 fit-w d-flex separator-top\">\n                          <button\n                            class=\"btn btn-default btn-sm m-r-8 grow\"\n                            title=\"{{ 'Reset' | translate }}\"\n                            (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Reset\n                          </button>\n                          <button\n                            class=\"btn btn-primary btn-sm grow\"\n                            title=\"{{ 'Apply' | translate }}\"\n                            (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Apply\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Sort button -->\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <button\n                    class=\"btn btn-icon btn-default btn-xs\"\n                    [attr.aria-label]=\"'Sort order' | translate\"\n                    tooltip=\"{{ 'Sort order' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"changeSortOrder(column)\"\n                  >\n                    @if (column.sortOrder === 'asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    } @else if (column.sortOrder === 'desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    } @else {\n                      <i\n                        c8yIcon=\"exchange\"\n                        style=\"transform: rotate(90deg)\"\n                      ></i>\n                    }\n                  </button>\n                </div>\n                <!-- Column type dropdown -->\n                @if (!column.isOperation && column.__origin !== 'status') {\n                  <div\n                    class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                    [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                  >\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      c8yDropdownFocusTrap\n                      #columnTypeDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                        [attr.aria-label]=\"'Select render type' | translate\"\n                        tooltip=\"{{ 'Render type' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                        type=\"button\"\n                        [attr.data-cy]=\"'column-settings--render-type-dropdown--' + column.name\"\n                        [delay]=\"500\"\n                        dropdownToggle\n                      >\n                        {{ column.type | translate | humanize }}\n                        <i c8yIcon=\"caret-down\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        *dropdownMenu\n                      >\n                        <c8y-list-group role=\"list\">\n                          @if (column.type === 'computed' || column.computedConfig) {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (keydown.enter)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (click)=\"applyColumnType('computed', column)\"\n                              [active]=\"column.type === 'computed'\"\n                            >\n                              {{ 'Computed' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'icon'\"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          } @else {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('default', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'default'\"\n                            >\n                              {{ 'Default' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"date-render-type-option\"\n                              (click)=\"applyColumnType('date', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'date'\"\n                            >\n                              {{ 'Date' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              [active]=\"column.type === 'icon'\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          }\n                        </c8y-list-group>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (column.isOperation) {\n            <ng-container>\n              @if (true) {\n                <c8y-li-action\n                  icon=\"edit1\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  label=\"Edit\"\n                  (click)=\"editOperationColumn(column)\"\n                ></c8y-li-action>\n              }\n              @if (true) {\n                <c8y-li-action\n                  icon=\"delete\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  label=\"Delete\"\n                  (click)=\"deleteColumn(column)\"\n                ></c8y-li-action>\n              }\n            </ng-container>\n          }\n        </c8y-li>\n      }\n    }\n    @if (columns.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'list'\"\n        [title]=\"'No properties selected.' | translate\"\n        [subtitle]=\"'Select from the list which columns to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    }\n  </c8y-list-group>\n  <div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n    <button\n      class=\"btn btn-default btn-sm m-r-8\"\n      type=\"button\"\n      (click)=\"selectAssetAndProperty()\"\n    >\n      {{ 'Select properties' | translate }}\n    </button>\n    <div\n      class=\"dropdown\"\n      container=\"body\"\n      dropdown\n      c8yDropdownFocusTrap\n      #customActionsDropdown=\"bs-dropdown\"\n    >\n      <button\n        class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n        [title]=\"'Add action' | translate\"\n        [attr.aria-haspopup]=\"true\"\n        [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n        type=\"button\"\n        data-cy=\"asset-table-column-settings--add-action-btn\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"cog\"></i>\n        <span>{{ 'Add action' | translate }}</span>\n        <span class=\"caret\"></span>\n      </button>\n      <ul\n        class=\"dropdown-menu\"\n        *dropdownMenu\n      >\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--create-operation\"\n            (click)=\"onCreateOperation()\"\n          >\n            {{ 'Create operation' | translate }}\n          </button>\n        </li>\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--toggle-maintenance\"\n            (click)=\"onToggleMaintenanceMode()\"\n            [disabled]=\"hasMaintenanceColumn\"\n          >\n            {{ 'Toggle maintenance mode' | translate }}\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</fieldset>\n" }]
+                    ], providers: [BsDropdownDirective], template: "<fieldset class=\"c8y-fieldset bg-level-1 overflow-hidden p-0\">\n  <legend class=\"m-l-16\">{{ 'Properties column settings (drag to reorder)' | translate }}</legend>\n  <c8y-list-group\n    class=\"inner-scroll bg-inherit d-block no-border-last separator-top\"\n    style=\"max-height: 300px\"\n    role=\"list\"\n    data-cy=\"selected-properties\"\n    cdkDropList\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\n  >\n    @for (column of columns; track trackByColumnName($index, column)) {\n      @if (!column.positionFixed) {\n        <c8y-li\n          role=\"listitem\"\n          cdkDrag\n          cdkDragLockAxis=\"y\"\n          [ngClass]=\"{ 'empty-actions': !column.isOperation }\"\n        >\n          <c8y-li-drag-handle\n            title=\"{{ 'Drag to reorder' | translate }}\"\n            [attr.aria-label]=\"'Drag to reorder' | translate\"\n            cdkDragHandle\n          >\n            <i\n              c8yIcon=\"drag-reorder\"\n              style=\"font-size: 0.7em\"\n            ></i>\n          </c8y-li-drag-handle>\n          @if (column.__origin !== 'status') {\n            <c8y-li-checkbox\n              class=\"a-s-stretch\"\n              title=\"{{ (column.header | translate) || column.name }} {{\n                column.custom ? (customLabel | translate) : ''\n              }}\"\n              [attr.aria-label]=\"'Show/hide column' | translate\"\n              [(ngModel)]=\"column.visible\"\n              (ngModelChange)=\"toggleColumnVisibility(column)\"\n              c8yProductExperience\n              [attr.data-cy]=\"'data-grid--custom-column-header-' + column.header\"\n            ></c8y-li-checkbox>\n          } @else {\n            <c8y-li-checkbox class=\"a-s-stretch no-pointer invisible\"></c8y-li-checkbox>\n          }\n          <div class=\"content-flex-32 p-t-4 p-b-4\">\n            <div class=\"col-6\">\n              @if (column.__origin !== 'status') {\n                <c8y-input-group-editable\n                  required\n                  size=\"sm\"\n                  formGroupClass=\"m-b-0\"\n                  [ariaLabel]=\"'Column header' | translate\"\n                  [placeholder]=\"'Column header' | translate\"\n                  [(ngModel)]=\"column.header\"\n                  (save)=\"updateColumnNames(column)\"\n                ></c8y-input-group-editable>\n              } @else {\n                <p class=\"text-12 p-t-4 p-b-4\">{{ column.header | translate }}</p>\n              }\n            </div>\n            <div class=\"col-6\">\n              <div class=\"d-flex a-i-center gap-8 p-t-4 p-b-4\">\n                <!-- Filters button -->\n                @if (column.filteringConfig) {\n                  <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      [insideClick]=\"true\"\n                      c8yDropdownFocusTrap\n                      #gridHeaderDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"dropdown-toggle btn btn-icon btn-default btn-xs c8y-dropdown\"\n                        [attr.aria-label]=\"'Filter' | translate\"\n                        tooltip=\"{{ 'Filter' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"gridHeaderDropdown.isOpen\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        [ngClass]=\"{ active: isColumnFiltered(column) }\"\n                        dropdownToggle\n                      >\n                        <i c8yIcon=\"filter\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        (click)=\"$event.stopPropagation()\"\n                        *dropdownMenu\n                      >\n                        <formly-form\n                          class=\"p-16 d-block\"\n                          style=\"min-width: 250px\"\n                          [form]=\"column.filteringConfig.formGroup\"\n                          [fields]=\"column.filteringConfig.fields\"\n                          [model]=\"column.filteringConfig.model\"\n                        ></formly-form>\n                        <div class=\"p-16 fit-w d-flex separator-top sticky-bottom\">\n                          <button\n                            class=\"btn btn-default btn-sm m-r-8 grow\"\n                            title=\"{{ 'Reset' | translate }}\"\n                            (click)=\"resetFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Reset\n                          </button>\n                          <button\n                            class=\"btn btn-primary btn-sm grow\"\n                            title=\"{{ 'Apply' | translate }}\"\n                            (click)=\"applyFilter(column, gridHeaderDropdown)\"\n                            translate\n                          >\n                            Apply\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Sort button -->\n                <div class=\"d-flex a-i-center gap-4 flex-no-shrink\">\n                  <button\n                    class=\"btn btn-icon btn-default btn-xs\"\n                    [attr.aria-label]=\"'Sort order' | translate\"\n                    tooltip=\"{{ 'Sort order' | translate }}\"\n                    placement=\"top\"\n                    type=\"button\"\n                    [delay]=\"500\"\n                    (click)=\"changeSortOrder(column)\"\n                  >\n                    @if (column.sortOrder === 'asc') {\n                      <i c8yIcon=\"long-arrow-up\"></i>\n                    } @else if (column.sortOrder === 'desc') {\n                      <i c8yIcon=\"long-arrow-down\"></i>\n                    } @else {\n                      <i\n                        c8yIcon=\"exchange\"\n                        style=\"transform: rotate(90deg)\"\n                      ></i>\n                    }\n                  </button>\n                </div>\n                <!-- Column type dropdown -->\n                @if (!column.isOperation && column.__origin !== 'status') {\n                  <div\n                    class=\"d-flex a-i-center gap-4 flex-no-shrink\"\n                    [ngClass]=\"{ 'no-pointer invisible': column.__origin === 'status' }\"\n                  >\n                    <div\n                      class=\"dropdown d-flex\"\n                      container=\"body\"\n                      dropdown\n                      c8yDropdownFocusTrap\n                      #columnTypeDropdown=\"bs-dropdown\"\n                    >\n                      <button\n                        class=\"btn btn-default btn-xs dropdown-toggle c8y-dropdown\"\n                        [attr.aria-label]=\"'Select render type' | translate\"\n                        tooltip=\"{{ 'Render type' | translate }}\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"columnTypeDropdown.isOpen\"\n                        type=\"button\"\n                        [attr.data-cy]=\"'column-settings--render-type-dropdown--' + column.name\"\n                        [delay]=\"500\"\n                        dropdownToggle\n                      >\n                        {{ column.type | translate | humanize }}\n                        <i c8yIcon=\"caret-down\"></i>\n                      </button>\n                      <div\n                        class=\"dropdown-menu\"\n                        *dropdownMenu\n                      >\n                        <c8y-list-group role=\"list\">\n                          @if (column.type === 'computed' || column.computedConfig) {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (keydown.enter)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('computed', column); $event.preventDefault()\n                              \"\n                              (click)=\"applyColumnType('computed', column)\"\n                              [active]=\"column.type === 'computed'\"\n                            >\n                              {{ 'Computed' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'icon'\"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          } @else {\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              (click)=\"applyColumnType('default', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('default', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'default'\"\n                            >\n                              {{ 'Default' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"date-render-type-option\"\n                              (click)=\"applyColumnType('date', column)\"\n                              (keydown.enter)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('date', column); $event.preventDefault()\n                              \"\n                              [active]=\"column.type === 'date'\"\n                            >\n                              {{ 'Date' | translate }}\n                            </c8y-li>\n                            <c8y-li\n                              tabindex=\"0\"\n                              role=\"listitem\"\n                              data-cy=\"icon-render-type-option\"\n                              (click)=\"applyColumnType('icon', column)\"\n                              [active]=\"column.type === 'icon'\"\n                              (keydown.enter)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                              (keydown.space)=\"\n                                applyColumnType('icon', column); $event.preventDefault()\n                              \"\n                            >\n                              {{ 'Icon' | translate }}\n                            </c8y-li>\n                          }\n                        </c8y-list-group>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n          @if (column.isOperation) {\n            <ng-container>\n              @if (true) {\n                <c8y-li-action\n                  icon=\"edit1\"\n                  [attr.aria-label]=\"'Edit' | translate\"\n                  label=\"Edit\"\n                  (click)=\"editOperationColumn(column)\"\n                ></c8y-li-action>\n              }\n              @if (true) {\n                <c8y-li-action\n                  icon=\"delete\"\n                  [attr.aria-label]=\"'Delete' | translate\"\n                  label=\"Delete\"\n                  (click)=\"deleteColumn(column)\"\n                ></c8y-li-action>\n              }\n            </ng-container>\n          }\n        </c8y-li>\n      }\n    }\n    @if (columns.length === 0) {\n      <c8y-ui-empty-state\n        [icon]=\"'list'\"\n        [title]=\"'No properties selected.' | translate\"\n        [subtitle]=\"'Select from the list which columns to display.' | translate\"\n        [horizontal]=\"true\"\n      ></c8y-ui-empty-state>\n    }\n  </c8y-list-group>\n  <div class=\"m-b-16 p-t-16 p-l-24 p-r-16 fit-w separator-top\">\n    <button\n      class=\"btn btn-default btn-sm m-r-8\"\n      type=\"button\"\n      (click)=\"selectAssetAndProperty()\"\n    >\n      {{ 'Select properties' | translate }}\n    </button>\n    <div\n      class=\"dropdown\"\n      container=\"body\"\n      dropdown\n      c8yDropdownFocusTrap\n      #customActionsDropdown=\"bs-dropdown\"\n    >\n      <button\n        class=\"btn btn-default btn-sm dropdown-toggle c8y-dropdown\"\n        [title]=\"'Add action' | translate\"\n        [attr.aria-haspopup]=\"true\"\n        [attr.aria-expanded]=\"customActionsDropdown.isOpen\"\n        type=\"button\"\n        data-cy=\"asset-table-column-settings--add-action-btn\"\n        dropdownToggle\n      >\n        <i c8yIcon=\"cog\"></i>\n        <span>{{ 'Add action' | translate }}</span>\n        <span class=\"caret\"></span>\n      </button>\n      <ul\n        class=\"dropdown-menu\"\n        *dropdownMenu\n      >\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--create-operation\"\n            (click)=\"onCreateOperation()\"\n          >\n            {{ 'Create operation' | translate }}\n          </button>\n        </li>\n        <li>\n          <button\n            class=\"dropdown-item\"\n            type=\"button\"\n            data-cy=\"asset-table-column-settings--toggle-maintenance\"\n            (click)=\"onToggleMaintenanceMode()\"\n            [disabled]=\"hasMaintenanceColumn\"\n          >\n            {{ 'Toggle maintenance mode' | translate }}\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</fieldset>\n" }]
         }] });
 /**