@acorex-platform/module-integration-management-client 0.0.28 → 0.0.32

package/fesm2022/acorex-platform-module-integration-management-client-integration-ref-page.component-D9hdpnQq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-module-integration-management-client-integration-ref-page.component-D9hdpnQq.mjs","sources":["../../../../libs/modules/integration-management/client/src/lib/features/widgets/integration-ref/integration-ref-page.component.ts","../../../../libs/modules/integration-management/client/src/lib/features/widgets/integration-ref/integration-ref-page.component.html"],"sourcesContent":["//#region ----- Imports -----\n\nimport { AXBadgeModule } from '@acorex/components/badge';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXPLogoComponent } from '@acorex-platform/framework-client/core';\nimport {\n  AXPPageLayoutBase,\n  AXPPageLayoutBaseComponent,\n} from '@acorex-platform/framework-client/layout/views';\nimport { AXPRegionalSetting, type AXPIntegrationReference } from '@acorex-platform/framework-shared/core';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { isPlainObject, isString, trim } from 'lodash';\n\nimport {\n  AXMIntegrationRefDisplay,\n  AXMIntegrationRefDisplayService,\n} from './integration-ref-display.service';\n\n//#endregion\n\n//#region ----- Types -----\n\ninterface IntegrationRefPageView {\n  provider: AXMIntegrationRefDisplay | null;\n  connectionDisplayName: string;\n  linkedAtLabel: string;\n  resourceType: string;\n  remoteId: string;\n}\n\n//#endregion\n\n//#region ----- Constants -----\n\nconst I18N = '@integration-management:widgets.integration-ref.page';\n\n//#endregion\n\n//#region ----- Component -----\n\n/**\n * Readonly detail tab for entities linked via `integrationRef`.\n * Shows connection display name and linked-at timestamp.\n */\n@Component({\n  selector: 'axm-integration-ref-page',\n  templateUrl: './integration-ref-page.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    AsyncPipe,\n    AXBadgeModule,\n    AXDecoratorModule,\n    AXLoadingModule,\n    AXTranslationModule,\n    AXPLogoComponent,\n  ],\n  providers: [\n    {\n      provide: AXPPageLayoutBase,\n      useExisting: AXMIntegrationRefPageComponent,\n    },\n  ],\n  host: { class: 'axm-integration-ref-page block w-full min-h-0' },\n})\nexport class AXMIntegrationRefPageComponent extends AXPPageLayoutBaseComponent {\n  //#region ----- Inputs -----\n\n  rootContext = input<Record<string, unknown>>({});\n  pageConfig = input<Record<string, unknown>>();\n\n  //#endregion\n\n  //#region ----- Services & Dependencies -----\n\n  protected readonly i18n = I18N;\n  private readonly displayService = inject(AXMIntegrationRefDisplayService);\n\n  //#endregion\n\n  //#region ----- State Signals -----\n\n  protected readonly loading = signal(true);\n  protected readonly view = signal<IntegrationRefPageView | null>(null);\n\n  //#endregion\n\n  //#region ----- Computed Properties -----\n\n  protected readonly integrationRef = computed(() => {\n    const raw = this.rootContext()?.['integrationRef'];\n    return this.asIntegrationRef(raw);\n  });\n\n  protected readonly hasLink = computed(() => Boolean(this.integrationRef()));\n\n  //#endregion\n\n  //#region ----- Lifecycle -----\n\n  constructor() {\n    super();\n    effect(() => {\n      const ref = this.integrationRef();\n      untracked(() => {\n        void this.loadView(ref);\n      });\n    });\n  }\n\n  //#endregion\n\n  //#region ----- Page metadata -----\n\n  override async getPageTitle(): Promise<string> {\n    return this.translateService.translateAsync(`${I18N}.title`);\n  }\n\n  //#endregion\n\n  //#region ----- Data Loading -----\n\n  private async loadView(ref: AXPIntegrationReference | null): Promise<void> {\n    if (!ref) {\n      this.view.set(null);\n      this.loading.set(false);\n      return;\n    }\n\n    this.loading.set(true);\n    try {\n      const connectionId = trim(ref.connectionId ?? '');\n      const [provider, connection] = await Promise.all([\n        this.displayService.resolve(ref),\n        connectionId ? this.displayService.getConnectionById(connectionId) : Promise.resolve(null),\n      ]);\n\n      this.view.set({\n        provider,\n        connectionDisplayName: trim(connection?.displayName ?? '') || '---',\n        linkedAtLabel: await this.formatLinkedAt(ref.linkedAt),\n        resourceType: trim(ref.resourceType ?? ''),\n        remoteId: trim(ref.remoteId ?? ''),\n      });\n    } finally {\n      this.loading.set(false);\n    }\n  }\n\n  private async formatLinkedAt(linkedAt: string | undefined): Promise<string> {\n    const value = trim(linkedAt ?? '');\n    if (!value) {\n      return '---';\n    }\n\n    try {\n      const dateFormat = await this.settingsService.get(AXPRegionalSetting.ShortDate);\n      const timeFormat = await this.settingsService.get(AXPRegionalSetting.ShortTime);\n      const format = `${dateFormat} ${timeFormat}`.trim();\n      return this.formatService.format(new Date(value), 'datetime', { format });\n    } catch {\n      return '---';\n    }\n  }\n\n  private asIntegrationRef(value: unknown): AXPIntegrationReference | null {\n    if (!isPlainObject(value)) {\n      return null;\n    }\n    const record = value as Record<string, unknown>;\n    const source = isString(record['source']) ? trim(record['source']) : '';\n    const connectionId = isString(record['connectionId']) ? trim(record['connectionId']) : '';\n    if (!source && !connectionId) {\n      return null;\n    }\n    return record as unknown as AXPIntegrationReference;\n  }\n\n  //#endregion\n}\n\n//#endregion\n","<div class=\"flex w-full flex-col gap-4 p-1\">\n  <!-- ----- Loading indicator while connection details are fetched ----- -->\n  @if (loading()) {\n    <div class=\"flex justify-center py-10\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n  <!-- ----- Empty state when the record is not linked ----- -->\n  @else if (!hasLink()) {\n    <section\n      class=\"flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-surface bg-lighter-surface px-6 py-12 text-center\"\n    >\n      <div\n        class=\"flex h-14 w-14 items-center justify-center rounded-full bg-surface text-2xl opacity-70\"\n      >\n        <i class=\"fa-light fa-plug\"></i>\n      </div>\n      <div class=\"font-medium\">{{ (i18n + '.empty.title' | translate | async) ?? '' }}</div>\n      <div class=\"max-w-md text-sm opacity-70\">\n        {{ (i18n + '.empty.description' | translate | async) ?? '' }}\n      </div>\n    </section>\n  }\n  <!-- ----- Readonly integration link summary card ----- -->\n  @else if (view(); as details) {\n    <section\n      class=\"overflow-hidden rounded-2xl border border-surface bg-lighter-surface shadow-sm\"\n    >\n      <div\n        class=\"flex flex-wrap items-start justify-between gap-4 border-b border-surface bg-gradient-to-br from-surface/40 to-transparent px-5 py-5\"\n      >\n        <div class=\"flex min-w-0 items-center gap-4\">\n          <div\n            class=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl border border-surface bg-lighter-surface shadow-sm\"\n          >\n            @if (details.provider?.logoKey) {\n              <axp-logo\n                [logoKey]=\"details.provider.logoKey\"\n                appearance=\"colored\"\n                [size]=\"32\"\n              />\n            }\n            <!-- ----- Fallback FA icon when provider has no logoKey ----- -->\n            @else if (details.provider?.icon) {\n              <i [class]=\"details.provider.icon\" class=\"text-2xl\"></i>\n            }\n            <!-- ----- Generic plug icon when provider metadata is missing ----- -->\n            @else {\n              <i class=\"fa-light fa-plug text-2xl opacity-70\"></i>\n            }\n          </div>\n\n          <div class=\"min-w-0\">\n            <div class=\"text-sm opacity-70\">\n              {{ (i18n + '.summary' | translate | async) ?? '' }}\n            </div>\n            <div class=\"mt-1 truncate text-lg font-semibold tracking-tight\">\n              @if (details.provider?.displayName) {\n                {{ details.provider.displayName | translate | async }}\n              }\n              <!-- ----- Fallback to connection name when provider title is unavailable ----- -->\n              @else {\n                {{ details.connectionDisplayName }}\n              }\n            </div>\n          </div>\n        </div>\n\n        <ax-badge\n          size=\"sm\"\n          look=\"twotone\"\n          color=\"success\"\n          [text]=\"(i18n + '.badge.linked' | translate | async) ?? ''\"\n        ></ax-badge>\n      </div>\n\n      <div class=\"grid gap-4 p-5 sm:grid-cols-2\">\n        <div\n          class=\"rounded-xl border border-surface/80 bg-surface/30 px-4 py-3\"\n        >\n          <div class=\"mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide opacity-60\">\n            <i class=\"fa-light fa-link\"></i>\n            <span>{{ (i18n + '.fields.connection' | translate | async) ?? '' }}</span>\n          </div>\n          <div class=\"text-sm font-medium\">{{ details.connectionDisplayName }}</div>\n        </div>\n\n        <div\n          class=\"rounded-xl border border-surface/80 bg-surface/30 px-4 py-3\"\n        >\n          <div class=\"mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide opacity-60\">\n            <i class=\"fa-light fa-calendar-clock\"></i>\n            <span>{{ (i18n + '.fields.linked-at' | translate | async) ?? '' }}</span>\n          </div>\n          <div class=\"text-sm font-medium\" [dir]=\"'ltr'\">{{ details.linkedAtLabel }}</div>\n        </div>\n\n        <!--->\n        <!-- ----- Optional remote resource metadata when present ----- -->\n        @if (details.resourceType || details.remoteId) {\n          <div\n            class=\"rounded-xl border border-surface/80 bg-surface/30 px-4 py-3 sm:col-span-2\"\n          >\n            <div class=\"mb-1 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide opacity-60\">\n              <i class=\"fa-light fa-database\"></i>\n              <span>{{ (i18n + '.fields.remote-record' | translate | async) ?? '' }}</span>\n            </div>\n            <div class=\"flex flex-wrap items-center gap-2 text-sm font-medium\">\n              @if (details.resourceType) {\n                <span class=\"rounded-md bg-surface px-2 py-0.5 text-xs\">{{ details.resourceType }}</span>\n              }\n              @if (details.remoteId) {\n                <span class=\"font-mono text-xs opacity-80\" [dir]=\"'ltr'\">{{ details.remoteId }}</span>\n              }\n            </div>\n          </div>\n        }\n      </div>\n\n      <div class=\"border-t border-surface px-5 py-3 text-xs opacity-60\">\n        {{ (i18n + '.readonly-hint' | translate | async) ?? '' }}\n      </div>\n    </section>\n  }\n</div>\n"],"names":["i1","i2"],"mappings":"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"}

package/fesm2022/acorex-platform-module-integration-management-client-integration-ref-widget-column.component-CPLhmHOe.mjs

@@ -0,0 +1,137 @@
+import * as i1 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i2 from '@acorex/components/popover';
+import { AXPopoverModule } from '@acorex/components/popover';
+import { AXFormatService } from '@acorex/core/format';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPSettingsService } from '@acorex-platform/framework-client/common';
+import { AXPLogoComponent } from '@acorex-platform/framework-client/core';
+import { AXPColumnWidgetComponent } from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPRegionalSetting } from '@acorex-platform/framework-shared/core';
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, viewChild, signal, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { trim } from 'lodash';
+import { A as AXMIntegrationRefDisplayService } from './acorex-platform-module-integration-management-client-integration-ref-display.service-CP818xou.mjs';
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMIntegrationRefWidgetColumnComponent extends AXPColumnWidgetComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        super();
+        //#region ----- Services & Dependencies -----
+        this.displayService = inject(AXMIntegrationRefDisplayService);
+        this.formatService = inject(AXFormatService);
+        this.settingsService = inject(AXPSettingsService);
+        //#endregion
+        //#region ----- View Children -----
+        this.trigger = viewChild('infoTrigger', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.infoPopover = viewChild('infoPopover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "infoPopover" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- State Signals -----
+        this.display = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        this.cardLoading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardLoading" }] : /* istanbul ignore next */ []));
+        this.card = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "card" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const value = this.rawValue;
+            untracked(() => {
+                void this.resolveDisplay(value);
+            });
+        });
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    /** Keeps grid row navigation from firing when interacting with this cell. */
+    onHostClick(event) {
+        if (!this.display()) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    async onTriggerClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        await this.openCard();
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    async resolveDisplay(value) {
+        this.display.set(await this.displayService.resolve(value));
+    }
+    async openCard() {
+        const ref = this.displayService.parseIntegrationRef(this.rawValue);
+        if (!ref) {
+            return;
+        }
+        this.cardLoading.set(true);
+        this.card.set(null);
+        this.openPopover();
+        try {
+            const connectionId = trim(ref.connectionId ?? '');
+            const connection = connectionId
+                ? await this.displayService.getConnectionById(connectionId)
+                : null;
+            this.card.set({
+                connectionDisplayName: trim(connection?.displayName ?? '') || '---',
+                linkedAtLabel: await this.formatLinkedAt(ref.linkedAt),
+            });
+        }
+        finally {
+            this.cardLoading.set(false);
+        }
+    }
+    openPopover() {
+        const popover = this.infoPopover();
+        const trigger = this.trigger();
+        if (!popover || !trigger) {
+            return;
+        }
+        popover.target = trigger.nativeElement;
+        popover.open();
+    }
+    async formatLinkedAt(linkedAt) {
+        const value = trim(linkedAt ?? '');
+        if (!value) {
+            return '---';
+        }
+        try {
+            const dateFormat = await this.settingsService.get(AXPRegionalSetting.ShortDate);
+            const timeFormat = await this.settingsService.get(AXPRegionalSetting.ShortTime);
+            const format = `${dateFormat} ${timeFormat}`.trim();
+            return this.formatService.format(new Date(value), 'datetime', { format });
+        }
+        catch {
+            return '---';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMIntegrationRefWidgetColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMIntegrationRefWidgetColumnComponent, isStandalone: true, selector: "axm-integration-ref-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, host: { listeners: { "click": "onHostClick($event)", "mousedown": "onHostClick($event)", "dblclick": "onHostClick($event)" }, classAttribute: "inline-flex min-w-0 items-center" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["infoTrigger"], descendants: true, isSignal: true }, { propertyName: "infoPopover", first: true, predicate: ["infoPopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- ----- Provider logo/icon with display name label ----- -->\n@if (display(); as info) {\n  <span\n    #infoTrigger\n    class=\"inline-flex min-w-0 cursor-pointer items-center gap-2 hover:opacity-80\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"info.displayName | translate | async\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown.enter)=\"onTriggerClick($event)\"\n    (keydown.space)=\"onTriggerClick($event)\"\n  >\n    @if (info.logoKey) {\n      <axp-logo [logoKey]=\"info.logoKey\" appearance=\"colored\" [size]=\"20\" />\n    }\n    <!-- ----- Fallback FA icon when provider has no logoKey ----- -->\n    @else if (info.icon) {\n      <i [class]=\"info.icon\" class=\"shrink-0 text-base\"></i>\n    }\n    <span class=\"truncate text-sm\">{{ info.displayName | translate | async }}</span>\n  </span>\n}\n\n<!-- ----- Connection details card opened on click ----- -->\n<ax-popover [openOn]=\"'manual'\" #infoPopover [adaptivityEnabled]=\"true\">\n  <div class=\"lightest-surface min-w-[280px] rounded-lg border p-3 shadow-lg\">\n    <div class=\"mb-3 border-b pb-2\">\n      <h3 class=\"text-sm font-semibold\">\n        {{ '@integration-management:widgets.integration-ref.card.title' | translate | async }}\n      </h3>\n    </div>\n\n    @if (cardLoading()) {\n      <!-- ----- Loading while connection is fetched ----- -->\n      <div class=\"flex justify-center py-3\">\n        <ax-loading></ax-loading>\n      </div>\n    }\n    <!-- ----- Connection name + linked-at once loaded ----- -->\n    @else if (card(); as details) {\n      <div class=\"space-y-2.5\">\n        <div>\n          <div class=\"mb-1 text-xs font-semibold\">\n            {{\n              '@integration-management:widgets.integration-ref.card.connection' | translate | async\n            }}\n          </div>\n          <div class=\"text-xs\">{{ details.connectionDisplayName }}</div>\n        </div>\n        <div>\n          <div class=\"mb-1 text-xs font-semibold\">\n            {{\n              '@integration-management:widgets.integration-ref.card.linked-at' | translate | async\n            }}\n          </div>\n          <div class=\"text-xs\" [dir]=\"'ltr'\">{{ details.linkedAtLabel }}</div>\n        </div>\n      </div>\n    }\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMIntegrationRefWidgetColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-integration-ref-widget-column', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AsyncPipe,
+                        AXLoadingModule,
+                        AXPopoverModule,
+                        AXTranslationModule,
+                        AXPLogoComponent,
+                    ], inputs: ['rawValue', 'rowData'], host: {
+                        class: 'inline-flex min-w-0 items-center',
+                        '(click)': 'onHostClick($event)',
+                        '(mousedown)': 'onHostClick($event)',
+                        '(dblclick)': 'onHostClick($event)',
+                    }, template: "<!-- ----- Provider logo/icon with display name label ----- -->\n@if (display(); as info) {\n  <span\n    #infoTrigger\n    class=\"inline-flex min-w-0 cursor-pointer items-center gap-2 hover:opacity-80\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"info.displayName | translate | async\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown.enter)=\"onTriggerClick($event)\"\n    (keydown.space)=\"onTriggerClick($event)\"\n  >\n    @if (info.logoKey) {\n      <axp-logo [logoKey]=\"info.logoKey\" appearance=\"colored\" [size]=\"20\" />\n    }\n    <!-- ----- Fallback FA icon when provider has no logoKey ----- -->\n    @else if (info.icon) {\n      <i [class]=\"info.icon\" class=\"shrink-0 text-base\"></i>\n    }\n    <span class=\"truncate text-sm\">{{ info.displayName | translate | async }}</span>\n  </span>\n}\n\n<!-- ----- Connection details card opened on click ----- -->\n<ax-popover [openOn]=\"'manual'\" #infoPopover [adaptivityEnabled]=\"true\">\n  <div class=\"lightest-surface min-w-[280px] rounded-lg border p-3 shadow-lg\">\n    <div class=\"mb-3 border-b pb-2\">\n      <h3 class=\"text-sm font-semibold\">\n        {{ '@integration-management:widgets.integration-ref.card.title' | translate | async }}\n      </h3>\n    </div>\n\n    @if (cardLoading()) {\n      <!-- ----- Loading while connection is fetched ----- -->\n      <div class=\"flex justify-center py-3\">\n        <ax-loading></ax-loading>\n      </div>\n    }\n    <!-- ----- Connection name + linked-at once loaded ----- -->\n    @else if (card(); as details) {\n      <div class=\"space-y-2.5\">\n        <div>\n          <div class=\"mb-1 text-xs font-semibold\">\n            {{\n              '@integration-management:widgets.integration-ref.card.connection' | translate | async\n            }}\n          </div>\n          <div class=\"text-xs\">{{ details.connectionDisplayName }}</div>\n        </div>\n        <div>\n          <div class=\"mb-1 text-xs font-semibold\">\n            {{\n              '@integration-management:widgets.integration-ref.card.linked-at' | translate | async\n            }}\n          </div>\n          <div class=\"text-xs\" [dir]=\"'ltr'\">{{ details.linkedAtLabel }}</div>\n        </div>\n      </div>\n    }\n  </div>\n</ax-popover>\n" }]
+        }], ctorParameters: () => [], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['infoTrigger', { isSignal: true }] }], infoPopover: [{ type: i0.ViewChild, args: ['infoPopover', { isSignal: true }] }] } });
+
+export { AXMIntegrationRefWidgetColumnComponent };
+//# sourceMappingURL=acorex-platform-module-integration-management-client-integration-ref-widget-column.component-CPLhmHOe.mjs.map

package/fesm2022/acorex-platform-module-integration-management-client-integration-ref-widget-column.component-CPLhmHOe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-module-integration-management-client-integration-ref-widget-column.component-CPLhmHOe.mjs","sources":["../../../../libs/modules/integration-management/client/src/lib/features/widgets/integration-ref/integration-ref-widget-column.component.ts","../../../../libs/modules/integration-management/client/src/lib/features/widgets/integration-ref/integration-ref-widget-column.component.html"],"sourcesContent":["//#region ----- Imports -----\n\nimport { AXLoadingModule } from '@acorex/components/loading';\nimport { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';\nimport { AXFormatService } from '@acorex/core/format';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXPSettingsService } from '@acorex-platform/framework-client/common';\nimport { AXPLogoComponent } from '@acorex-platform/framework-client/core';\nimport { AXPColumnWidgetComponent } from '@acorex-platform/framework-client/layout/widget-core';\nimport { AXPRegionalSetting } from '@acorex-platform/framework-shared/core';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  effect,\n  inject,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { trim } from 'lodash';\n\nimport {\n  AXMIntegrationRefDisplay,\n  AXMIntegrationRefDisplayService,\n} from './integration-ref-display.service';\n\n//#endregion\n\n//#region ----- Types -----\n\ninterface IntegrationRefCardState {\n  connectionDisplayName: string;\n  linkedAtLabel: string;\n}\n\n//#endregion\n\n//#region ----- Component -----\n\n@Component({\n  selector: 'axm-integration-ref-widget-column',\n  templateUrl: './integration-ref-widget-column.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    AsyncPipe,\n    AXLoadingModule,\n    AXPopoverModule,\n    AXTranslationModule,\n    AXPLogoComponent,\n  ],\n  inputs: ['rawValue', 'rowData'],\n  host: {\n    class: 'inline-flex min-w-0 items-center',\n    '(click)': 'onHostClick($event)',\n    '(mousedown)': 'onHostClick($event)',\n    '(dblclick)': 'onHostClick($event)',\n  },\n})\nexport class AXMIntegrationRefWidgetColumnComponent extends AXPColumnWidgetComponent<unknown> {\n  //#region ----- Services & Dependencies -----\n\n  private readonly displayService = inject(AXMIntegrationRefDisplayService);\n  private readonly formatService = inject(AXFormatService);\n  private readonly settingsService = inject(AXPSettingsService);\n\n  //#endregion\n\n  //#region ----- View Children -----\n\n  protected readonly trigger = viewChild<ElementRef<HTMLElement>>('infoTrigger');\n  protected readonly infoPopover = viewChild<AXPopoverComponent>('infoPopover');\n\n  //#endregion\n\n  //#region ----- State Signals -----\n\n  protected readonly display = signal<AXMIntegrationRefDisplay | null>(null);\n  protected readonly cardLoading = signal(false);\n  protected readonly card = signal<IntegrationRefCardState | null>(null);\n\n  //#endregion\n\n  //#region ----- Lifecycle -----\n\n  constructor() {\n    super();\n    effect(() => {\n      const value = this.rawValue;\n      untracked(() => {\n        void this.resolveDisplay(value);\n      });\n    });\n  }\n\n  //#endregion\n\n  //#region ----- Event Handlers -----\n\n  /** Keeps grid row navigation from firing when interacting with this cell. */\n  protected onHostClick(event: Event): void {\n    if (!this.display()) {\n      return;\n    }\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  protected async onTriggerClick(event: Event): Promise<void> {\n    event.stopPropagation();\n    event.preventDefault();\n    await this.openCard();\n  }\n\n  //#endregion\n\n  //#region ----- Data Loading -----\n\n  private async resolveDisplay(value: unknown): Promise<void> {\n    this.display.set(await this.displayService.resolve(value));\n  }\n\n  private async openCard(): Promise<void> {\n    const ref = this.displayService.parseIntegrationRef(this.rawValue);\n    if (!ref) {\n      return;\n    }\n\n    this.cardLoading.set(true);\n    this.card.set(null);\n    this.openPopover();\n\n    try {\n      const connectionId = trim(ref.connectionId ?? '');\n      const connection = connectionId\n        ? await this.displayService.getConnectionById(connectionId)\n        : null;\n\n      this.card.set({\n        connectionDisplayName: trim(connection?.displayName ?? '') || '---',\n        linkedAtLabel: await this.formatLinkedAt(ref.linkedAt),\n      });\n    } finally {\n      this.cardLoading.set(false);\n    }\n  }\n\n  private openPopover(): void {\n    const popover = this.infoPopover();\n    const trigger = this.trigger();\n    if (!popover || !trigger) {\n      return;\n    }\n    popover.target = trigger.nativeElement;\n    popover.open();\n  }\n\n  private async formatLinkedAt(linkedAt: string | undefined): Promise<string> {\n    const value = trim(linkedAt ?? '');\n    if (!value) {\n      return '---';\n    }\n\n    try {\n      const dateFormat = await this.settingsService.get(AXPRegionalSetting.ShortDate);\n      const timeFormat = await this.settingsService.get(AXPRegionalSetting.ShortTime);\n      const format = `${dateFormat} ${timeFormat}`.trim();\n      return this.formatService.format(new Date(value), 'datetime', { format });\n    } catch {\n      return '---';\n    }\n  }\n\n  //#endregion\n}\n\n//#endregion\n","<!-- ----- Provider logo/icon with display name label ----- -->\n@if (display(); as info) {\n  <span\n    #infoTrigger\n    class=\"inline-flex min-w-0 cursor-pointer items-center gap-2 hover:opacity-80\"\n    role=\"button\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"info.displayName | translate | async\"\n    (click)=\"onTriggerClick($event)\"\n    (keydown.enter)=\"onTriggerClick($event)\"\n    (keydown.space)=\"onTriggerClick($event)\"\n  >\n    @if (info.logoKey) {\n      <axp-logo [logoKey]=\"info.logoKey\" appearance=\"colored\" [size]=\"20\" />\n    }\n    <!-- ----- Fallback FA icon when provider has no logoKey ----- -->\n    @else if (info.icon) {\n      <i [class]=\"info.icon\" class=\"shrink-0 text-base\"></i>\n    }\n    <span class=\"truncate text-sm\">{{ info.displayName | translate | async }}</span>\n  </span>\n}\n\n<!-- ----- Connection details card opened on click ----- -->\n<ax-popover [openOn]=\"'manual'\" #infoPopover [adaptivityEnabled]=\"true\">\n  <div class=\"lightest-surface min-w-[280px] rounded-lg border p-3 shadow-lg\">\n    <div class=\"mb-3 border-b pb-2\">\n      <h3 class=\"text-sm font-semibold\">\n        {{ '@integration-management:widgets.integration-ref.card.title' | translate | async }}\n      </h3>\n    </div>\n\n    @if (cardLoading()) {\n      <!-- ----- Loading while connection is fetched ----- -->\n      <div class=\"flex justify-center py-3\">\n        <ax-loading></ax-loading>\n      </div>\n    }\n    <!-- ----- Connection name + linked-at once loaded ----- -->\n    @else if (card(); as details) {\n      <div class=\"space-y-2.5\">\n        <div>\n          <div class=\"mb-1 text-xs font-semibold\">\n            {{\n              '@integration-management:widgets.integration-ref.card.connection' | translate | async\n            }}\n          </div>\n          <div class=\"text-xs\">{{ details.connectionDisplayName }}</div>\n        </div>\n        <div>\n          <div class=\"mb-1 text-xs font-semibold\">\n            {{\n              '@integration-management:widgets.integration-ref.card.linked-at' | translate | async\n            }}\n          </div>\n          <div class=\"text-xs\" [dir]=\"'ltr'\">{{ details.linkedAtLabel }}</div>\n        </div>\n      </div>\n    }\n  </div>\n</ax-popover>\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-platform-module-integration-management-client-integration-ref-widget-view.component-BRpGpWHZ.mjs

@@ -0,0 +1,46 @@
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPLogoComponent } from '@acorex-platform/framework-client/core';
+import { AXPValueWidgetComponent } from '@acorex-platform/framework-client/layout/widget-core';
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { A as AXMIntegrationRefDisplayService } from './acorex-platform-module-integration-management-client-integration-ref-display.service-CP818xou.mjs';
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMIntegrationRefWidgetViewComponent extends AXPValueWidgetComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        super();
+        //#region ----- Services & Dependencies -----
+        this.displayService = inject(AXMIntegrationRefDisplayService);
+        //#endregion
+        //#region ----- State Signals -----
+        this.display = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const value = this.getValue();
+            untracked(() => {
+                void this.resolveDisplay(value);
+            });
+        });
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    async resolveDisplay(value) {
+        this.display.set(await this.displayService.resolve(value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMIntegrationRefWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMIntegrationRefWidgetViewComponent, isStandalone: true, selector: "axm-integration-ref-widget-view", usesInheritance: true, ngImport: i0, template: "<!-- ----- Provider identity for integrationRef field (view / detail) ----- -->\n@if (display(); as info) {\n  <div class=\"inline-flex items-center gap-2\">\n    @if (info.logoKey) {\n      <axp-logo [logoKey]=\"info.logoKey\" appearance=\"colored\" [size]=\"24\" />\n    }\n    <!-- ----- Fallback FA icon when provider has no logoKey ----- -->\n    @else if (info.icon) {\n      <i [class]=\"info.icon\" class=\"text-lg\"></i>\n    }\n    <span class=\"text-sm\">{{ info.displayName | translate | async }}</span>\n  </div>\n}\n<!-- ----- Empty when record is not linked to an integration ----- -->\n@else {\n  <span class=\"text-muted\">---</span>\n}\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMIntegrationRefWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-integration-ref-widget-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, AXDecoratorModule, AXTranslationModule, AXPLogoComponent], template: "<!-- ----- Provider identity for integrationRef field (view / detail) ----- -->\n@if (display(); as info) {\n  <div class=\"inline-flex items-center gap-2\">\n    @if (info.logoKey) {\n      <axp-logo [logoKey]=\"info.logoKey\" appearance=\"colored\" [size]=\"24\" />\n    }\n    <!-- ----- Fallback FA icon when provider has no logoKey ----- -->\n    @else if (info.icon) {\n      <i [class]=\"info.icon\" class=\"text-lg\"></i>\n    }\n    <span class=\"text-sm\">{{ info.displayName | translate | async }}</span>\n  </div>\n}\n<!-- ----- Empty when record is not linked to an integration ----- -->\n@else {\n  <span class=\"text-muted\">---</span>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+export { AXMIntegrationRefWidgetViewComponent };
+//# sourceMappingURL=acorex-platform-module-integration-management-client-integration-ref-widget-view.component-BRpGpWHZ.mjs.map

package/fesm2022/acorex-platform-module-integration-management-client-integration-ref-widget-view.component-BRpGpWHZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-module-integration-management-client-integration-ref-widget-view.component-BRpGpWHZ.mjs","sources":["../../../../libs/modules/integration-management/client/src/lib/features/widgets/integration-ref/integration-ref-widget-view.component.ts","../../../../libs/modules/integration-management/client/src/lib/features/widgets/integration-ref/integration-ref-widget-view.component.html"],"sourcesContent":["//#region ----- Imports -----\n\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AXPLogoComponent } from '@acorex-platform/framework-client/core';\nimport { AXPValueWidgetComponent } from '@acorex-platform/framework-client/layout/widget-core';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  signal,\n  untracked,\n} from '@angular/core';\n\nimport {\n  AXMIntegrationRefDisplay,\n  AXMIntegrationRefDisplayService,\n} from './integration-ref-display.service';\n\n//#endregion\n\n//#region ----- Component -----\n\n@Component({\n  selector: 'axm-integration-ref-widget-view',\n  templateUrl: './integration-ref-widget-view.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AsyncPipe, AXDecoratorModule, AXTranslationModule, AXPLogoComponent],\n})\nexport class AXMIntegrationRefWidgetViewComponent extends AXPValueWidgetComponent<unknown> {\n  //#region ----- Services & Dependencies -----\n\n  private readonly displayService = inject(AXMIntegrationRefDisplayService);\n\n  //#endregion\n\n  //#region ----- State Signals -----\n\n  protected readonly display = signal<AXMIntegrationRefDisplay | null>(null);\n\n  //#endregion\n\n  //#region ----- Lifecycle -----\n\n  constructor() {\n    super();\n    effect(() => {\n      const value = this.getValue();\n      untracked(() => {\n        void this.resolveDisplay(value);\n      });\n    });\n  }\n\n  //#endregion\n\n  //#region ----- Data Loading -----\n\n  private async resolveDisplay(value: unknown): Promise<void> {\n    this.display.set(await this.displayService.resolve(value));\n  }\n\n  //#endregion\n}\n\n//#endregion\n","<!-- ----- Provider identity for integrationRef field (view / detail) ----- -->\n@if (display(); as info) {\n  <div class=\"inline-flex items-center gap-2\">\n    @if (info.logoKey) {\n      <axp-logo [logoKey]=\"info.logoKey\" appearance=\"colored\" [size]=\"24\" />\n    }\n    <!-- ----- Fallback FA icon when provider has no logoKey ----- -->\n    @else if (info.icon) {\n      <i [class]=\"info.icon\" class=\"text-lg\"></i>\n    }\n    <span class=\"text-sm\">{{ info.displayName | translate | async }}</span>\n  </div>\n}\n<!-- ----- Empty when record is not linked to an integration ----- -->\n@else {\n  <span class=\"text-muted\">---</span>\n}\n"],"names":["i1"],"mappings":";;;;;;;;;;AAAA;AAqBA;AAEA;AAQM,MAAO,oCAAqC,SAAQ,uBAAgC,CAAA;;;AAexF,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;;AAbQ,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,+BAA+B,CAAC;;;QAMtD,IAAA,CAAA,OAAO,GAAG,MAAM,CAAkC,IAAI;oFAAC;QAQxE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;YAC7B,SAAS,CAAC,MAAK;AACb,gBAAA,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AACjC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;;;IAMQ,MAAM,cAAc,CAAC,KAAc,EAAA;AACzC,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5D;8GA/BW,oCAAoC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApC,oCAAoC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/BjD,ipBAiBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDYuB,iBAAiB,8BAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAnE,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAER,oCAAoC,EAAA,UAAA,EAAA,CAAA;kBANhD,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iCAAiC,EAAA,eAAA,EAE1B,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,SAAS,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,ipBAAA,EAAA;;;;;"}

package/fesm2022/{acorex-platform-module-integration-management-client-integrations-page.component-Q-SHidYA.mjs → acorex-platform-module-integration-management-client-integrations-page.component-iH0DqEak.mjs}

@@ -16,7 +16,7 @@ import * as i9 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import * as i10 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
-import * as i11 from '@acorex/core/translation';
+import * as i3$1 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
 import { AXPDeviceService, AXPLogoComponent } from '@acorex-platform/framework-client/core';
 import { AXPStateMessageComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent } from '@acorex-platform/framework-client/layout/components';
@@ -377,7 +377,7 @@ class AXMIntegrationsPageComponent extends AXPPageLayoutBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMIntegrationsPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMIntegrationsPageComponent, isStandalone: true, selector: "axm-integrations-page", providers: [{ provide: AXPPageLayoutBase, useExisting: AXMIntegrationsPageComponent }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <!-- ----- Page start side: overview stats and category filters (large screens) ----- -->\n  @if (showSidebarPanel()) {\n    <axp-layout-start-side class=\"h-full\">\n      <axp-layout-content class=\"axm-integrations-page__sidebar\">\n        @if (loading()) {\n          <!-- ----- Sidebar skeleton while domains and providers load ----- -->\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-title\"></ax-skeleton>\n            <div class=\"axm-integrations-page__sidebar-section-body\">\n              @for (row of [0, 1, 2, 3]; track row) {\n                <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-row\"></ax-skeleton>\n              }\n            </div>\n          </section>\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-title\"></ax-skeleton>\n            <div class=\"axm-integrations-page__sidebar-section-body\">\n              @for (row of [0, 1, 2, 3, 4]; track row) {\n                <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-row\"></ax-skeleton>\n              }\n            </div>\n          </section>\n        } @else {\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <h3 class=\"axm-integrations-page__sidebar-section-title\">\n              {{ (PAGE_I18N + '.sidebar.overview.title' | translate | async) ?? '' }}\n            </h3>\n            <ul class=\"axm-integrations-page__overview-list\">\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-circle-check\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.connected' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\">{{ overviewStats().connected }}</span>\n              </li>\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-shield-exclamation\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.error' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\" [class.--danger]=\"overviewStats().error > 0\">{{ overviewStats().error }}</span>\n              </li>\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-toggle-off\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.disabled' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\">{{ overviewStats().disabled }}</span>\n              </li>\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-plug\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.not-connected' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\">{{ overviewStats().notConnected }}</span>\n              </li>\n            </ul>\n          </section>\n\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <h3 class=\"axm-integrations-page__sidebar-section-title\">\n              {{ (PAGE_I18N + '.sidebar.categories.title' | translate | async) ?? '' }}\n            </h3>\n            <ul class=\"axm-integrations-page__category-list\">\n              <li class=\"axm-integrations-page__category-item\">\n                <ax-check-box\n                  class=\"axm-integrations-page__category-checkbox\"\n                  [ngModel]=\"isAllDomainsSelected()\"\n                  (onValueChanged)=\"handleAllDomainsFilterChange($event)\"\n                >\n                  <ax-label>{{ (PAGE_I18N + '.sidebar.categories.all' | translate | async) ?? '' }}</ax-label>\n                </ax-check-box>\n              </li>\n              @for (section of domainSections(); track section.domain.id) {\n                <li class=\"axm-integrations-page__category-item\">\n                  <ax-check-box\n                    class=\"axm-integrations-page__category-checkbox\"\n                    [ngModel]=\"isDomainFilterSelected(section.domain.id)\"\n                    (onValueChanged)=\"handleDomainFilterChange(section.domain.id, $event)\"\n                  >\n                    <ax-label>{{ section.domain.displayName | translate | async }}</ax-label>\n                  </ax-check-box>\n                </li>\n              }\n            </ul>\n          </section>\n        }\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-content>\n    @if (loading()) {\n      <!-- ----- Skeleton placeholders while domains and providers are fetched ----- -->\n      <div class=\"flex w-full flex-col gap-8\">\n        @for (sectionIndex of skeletonSectionPlaceholders; track sectionIndex) {\n          <section class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-col gap-2\">\n              <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-section-title\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-section-description\"></ax-skeleton>\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(16rem,18rem))] lg:justify-start\">\n              @for (cardIndex of skeletonCardPlaceholders; track cardIndex) {\n                <div class=\"axm-integrations-page__skeleton-card\">\n                  <div class=\"flex items-start justify-between gap-3\">\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-icon\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-status-badge\"></ax-skeleton>\n                  </div>\n\n                  <div class=\"flex flex-col gap-2\">\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-title\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-description\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-description --short\"></ax-skeleton>\n                  </div>\n\n                  <div class=\"axm-integrations-page__skeleton-footer\">\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-action\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-switch\"></ax-skeleton>\n                  </div>\n                </div>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    } @else if (!visibleDomainSections().length) {\n      <!-- ----- Empty state when all category filters are cleared on large screens ----- -->\n      <axp-state-message mode=\"empty\" icon=\"fa-light fa-filter\" [title]=\"PAGE_I18N + '.sidebar.empty-filter.title'\" [description]=\"PAGE_I18N + '.sidebar.empty-filter.description'\">\n        <ax-button slot=\"actions\" look=\"solid\" color=\"primary\" [text]=\"(PAGE_I18N + '.sidebar.empty-filter.action' | translate | async) ?? ''\" (onClick)=\"handleSelectAllDomainFilters()\"></ax-button>\n      </axp-state-message>\n    } @else {\n      <!-- ----- Domain sections with tenant provider cards ----- -->\n      <div class=\"flex w-full flex-col gap-8\">\n        @for (section of visibleDomainSections(); track section.domain.id) {\n          <section class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-col gap-1\">\n              <h2 class=\"text-lg font-semibold\">\n                {{ section.domain.displayName | translate | async }}\n              </h2>\n              @if (section.domain.description) {\n                <p class=\"text-sm text-muted\">\n                  {{ section.domain.description | translate | async }}\n                </p>\n              }\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(18rem,24rem))] lg:justify-start\">\n              @for (provider of section.providers; track provider.id) {\n                <article class=\"flex h-full w-full flex-col gap-3 rounded-xl border border-surface bg-lighter-surface p-4 shadow-sm transition-shadow hover:shadow-md\">\n                  <div class=\"flex items-start justify-between gap-3\">\n                    <div class=\"flex size-14 shrink-0 items-center justify-center rounded-xl border border-surface bg-transparent\">\n                      @if (provider.logoKey) {\n                        <axp-logo [logoKey]=\"provider.logoKey\" appearance=\"colored\" [size]=\"32\" />\n                      } @else if (provider.icon) {\n                        <ax-icon class=\"text-2xl\">\n                          <i [class]=\"provider.icon\"></i>\n                        </ax-icon>\n                      }\n                    </div>\n\n                    <div class=\"ax-sm\">\n                      @if (provider.allowMultipleConnections) {\n                        @if (getProviderConnectionSummary(provider.id); as summary) {\n                          @if (summary.total > 0) {\n                            <ax-badge\n                              look=\"twotone\"\n                              [color]=\"getMultiConnectionStatusBadgeColor(provider.id)\"\n                              [text]=\"(PANEL_I18N + '.status.connected-count' | translate: { params: { connected: summary.connected, total: summary.total } } | async) ?? ''\"\n                            ></ax-badge>\n                          } @else {\n                            <ax-badge look=\"twotone\" color=\"secondary\" [text]=\"(PANEL_I18N + '.status.not-connected' | translate | async) ?? ''\"></ax-badge>\n                          }\n                        }\n                      } @else if (hasEstablishedConnection(provider.id)) {\n                        @if (isConnectionEnabled(provider.id)) {\n                          <ax-badge look=\"twotone\" color=\"success\" [text]=\"(PANEL_I18N + '.status.connected' | translate | async) ?? ''\"></ax-badge>\n                        } @else {\n                          <ax-badge look=\"twotone\" color=\"warning\" [text]=\"(PANEL_I18N + '.status.disabled' | translate | async) ?? ''\"></ax-badge>\n                        }\n                      } @else {\n                        <ax-badge look=\"twotone\" color=\"secondary\" [text]=\"(PANEL_I18N + '.status.not-connected' | translate | async) ?? ''\"></ax-badge>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n                    <div class=\"flex flex-wrap items-center gap-2 font-medium\">\n                      <span>{{ provider.displayName | translate | async }}</span>\n                      @if (isConnectDisabled(provider.id) && connectDisabledBadgeKey(provider.id); as badgeKey) {\n                        <span\n                          class=\"inline-flex cursor-help\"\n                          [axTooltip]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                          axTooltipPlacement=\"top\"\n                          [attr.aria-label]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                        >\n                          <ax-badge size=\"sm\" look=\"twotone\" color=\"warning\" [text]=\"(badgeKey | translate | async) ?? ''\"></ax-badge>\n                        </span>\n                      }\n                    </div>\n\n                    @if (provider.description) {\n                      <p class=\"text-sm text-muted\">\n                        {{ provider.description | translate | async }}\n                      </p>\n                    }\n\n                    @if (getProviderBadges(provider.id); as badges) {\n                      @if (badges.length > 0) {\n                        <div class=\"flex flex-wrap items-center gap-1\">\n                          @for (badge of badges; track badge.text) {\n                            <ax-badge size=\"sm\" look=\"twotone\" [color]=\"badge.color\" [text]=\"badge.text\"></ax-badge>\n                          }\n                        </div>\n                      }\n                    }\n\n                    <!-- ----- Multi-connection provider: list each connection with status and actions ----- -->\n                    @if (provider.allowMultipleConnections) {\n                      <div class=\"mt-1 flex flex-col gap-2\">\n                        @for (connection of getConnections(provider.id); track connection.id) {\n                          <div class=\"flex flex-col gap-2 rounded-lg border border-surface bg-lighter-surface p-3\">\n                            <!-- ----- Row 1: connection identity + status badge ----- -->\n                            <div class=\"flex items-start justify-between gap-2\">\n                              <div class=\"min-w-0 flex-1\">\n                                <div class=\"truncate text-sm font-medium\">{{ connection.displayName }}</div>\n                                @if (connection.instanceUrl) {\n                                  <div class=\"truncate text-xs text-muted\">{{ connection.instanceUrl }}</div>\n                                }\n                              </div>\n                              <div class=\"ax-sm shrink-0\">\n                                @if (isEstablishedConnection(connection)) {\n                                  @if (isEnabledConnection(connection)) {\n                                    <ax-badge look=\"twotone\" color=\"success\" [text]=\"(PANEL_I18N + '.status.connected' | translate | async) ?? ''\"></ax-badge>\n                                  } @else {\n                                    <ax-badge look=\"twotone\" color=\"warning\" [text]=\"(PANEL_I18N + '.status.disabled' | translate | async) ?? ''\"></ax-badge>\n                                  }\n                                } @else {\n                                  <ax-badge look=\"twotone\" color=\"secondary\" [text]=\"(PANEL_I18N + '.status.not-connected' | translate | async) ?? ''\"></ax-badge>\n                                }\n                              </div>\n                            </div>\n\n                            <!-- ----- Row 2: actions + enable toggle ----- -->\n                            <div class=\"flex flex-nowrap items-center justify-between gap-2\">\n                              <div class=\"flex shrink-0 flex-nowrap items-center gap-2\">\n                                @if (isEstablishedConnection(connection)) {\n                                  <ax-dropdown-button\n                                    size=\"sm\"\n                                    look=\"outline\"\n                                    [mode]=\"'dropdown'\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction()\"\n                                    [text]=\"(PANEL_I18N + '.actions.manage' | translate | async) ?? ''\"\n                                  >\n                                    <ax-button-item-list>\n                                      @if (supportsConfigure(provider, connection)) {\n                                        <ax-button-item\n                                          [text]=\"(PANEL_I18N + '.actions.reconfigure' | translate | async) ?? ''\"\n                                          [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                                          (onClick)=\"handleConfigure(provider, connection)\"\n                                        >\n                                          <ax-prefix>\n                                            <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                                          </ax-prefix>\n                                        </ax-button-item>\n                                      }\n                                      <ax-button-item\n                                        [text]=\"(PANEL_I18N + '.actions.disconnect' | translate | async) ?? ''\"\n                                        color=\"danger\"\n                                        [disabled]=\"pendingAction()\"\n                                        (onClick)=\"handleDisconnect(provider, connection)\"\n                                      >\n                                        <ax-prefix>\n                                          <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                                        </ax-prefix>\n                                      </ax-button-item>\n                                      <ax-button-item\n                                        [text]=\"(PANEL_I18N + '.actions.remove' | translate | async) ?? ''\"\n                                        color=\"danger\"\n                                        [disabled]=\"pendingAction()\"\n                                        (onClick)=\"handleRemove(provider, connection)\"\n                                      >\n                                        <ax-prefix>\n                                          <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n                                        </ax-prefix>\n                                      </ax-button-item>\n                                    </ax-button-item-list>\n                                  </ax-dropdown-button>\n                                } @else if (supportsConnect(provider)) {\n                                  <ax-button\n                                    size=\"sm\"\n                                    look=\"solid\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                                    [text]=\"(PANEL_I18N + '.actions.connect' | translate | async) ?? ''\"\n                                    (onClick)=\"handleConnect(provider, connection)\"\n                                  >\n                                    <ax-prefix>\n                                      <ax-icon icon=\"fa-light fa-plug\"></ax-icon>\n                                    </ax-prefix>\n                                  </ax-button>\n                                  <ax-button\n                                    size=\"sm\"\n                                    look=\"outline\"\n                                    color=\"danger\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction()\"\n                                    [text]=\"(PANEL_I18N + '.actions.remove' | translate | async) ?? ''\"\n                                    (onClick)=\"handleRemove(provider, connection)\"\n                                  >\n                                    <ax-prefix>\n                                      <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n                                    </ax-prefix>\n                                  </ax-button>\n                                } @else {\n                                  <ax-button\n                                    size=\"sm\"\n                                    look=\"outline\"\n                                    color=\"danger\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction()\"\n                                    [text]=\"(PANEL_I18N + '.actions.remove' | translate | async) ?? ''\"\n                                    (onClick)=\"handleRemove(provider, connection)\"\n                                  >\n                                    <ax-prefix>\n                                      <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n                                    </ax-prefix>\n                                  </ax-button>\n                                }\n                              </div>\n\n                              <ax-switch\n                                class=\"shrink-0\"\n                                [ngModel]=\"isEnabledConnection(connection)\"\n                                [disabled]=\"pendingAction() || !isEstablishedConnection(connection)\"\n                                (ngModelChange)=\"handleToggleEnabled(provider, $event, connection)\"\n                              ></ax-switch>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  <!-- ----- Card footer: single-connection manage/connect, or add connection for multi ----- -->\n                  <div class=\"mt-auto flex items-center justify-between gap-3 border-t border-surface pt-4\">\n                    @if (provider.allowMultipleConnections) {\n                      @if (supportsConnect(provider)) {\n                        <ax-button\n                          size=\"sm\"\n                          look=\"outline\"\n                          type=\"button\"\n                          [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                          [text]=\"(PANEL_I18N + '.actions.add-connection' | translate | async) ?? ''\"\n                          (onClick)=\"handleAddConnection(provider)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button>\n                      } @else {\n                        <span></span>\n                      }\n                      <span></span>\n                    } @else if (hasEstablishedConnection(provider.id)) {\n                      <ax-dropdown-button size=\"sm\" [mode]=\"'dropdown'\" type=\"button\" [disabled]=\"pendingAction()\" [text]=\"(PANEL_I18N + '.actions.manage' | translate | async) ?? ''\">\n                        <ax-button-item-list>\n                          @if (supportsConfigure(provider)) {\n                            <ax-button-item [text]=\"(PANEL_I18N + '.actions.reconfigure' | translate | async) ?? ''\" [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\" (onClick)=\"handleConfigure(provider)\">\n                              <ax-prefix>\n                                <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                              </ax-prefix>\n                            </ax-button-item>\n                          }\n                          @for (action of getManageActions(provider); track action.commandKey) {\n                            <ax-button-item [text]=\"(action.titleKey | translate | async) ?? ''\" [color]=\"action.color\" [disabled]=\"pendingAction()\" (onClick)=\"handleManageAction(provider, action)\">\n                              @if (action.icon) {\n                                <ax-prefix>\n                                  <ax-icon [icon]=\"action.icon\"></ax-icon>\n                                </ax-prefix>\n                              }\n                            </ax-button-item>\n                          }\n                          <ax-button-item [text]=\"(PANEL_I18N + '.actions.disconnect' | translate | async) ?? ''\" color=\"danger\" [disabled]=\"pendingAction()\" (onClick)=\"handleDisconnect(provider)\">\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                      <ax-switch [ngModel]=\"isConnectionEnabled(provider.id)\" [disabled]=\"pendingAction() || !hasEstablishedConnection(provider.id)\" (ngModelChange)=\"handleToggleEnabled(provider, $event)\"></ax-switch>\n                    } @else if (supportsConnect(provider)) {\n                      <ax-button size=\"sm\" look=\"solid\" type=\"button\" [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\" [text]=\"(PANEL_I18N + '.actions.connect' | translate | async) ?? ''\" (onClick)=\"handleConnect(provider)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-light fa-plug\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button>\n                      <ax-switch [ngModel]=\"isConnectionEnabled(provider.id)\" [disabled]=\"pendingAction() || !hasEstablishedConnection(provider.id)\" (ngModelChange)=\"handleToggleEnabled(provider, $event)\"></ax-switch>\n                    } @else {\n                      <span></span>\n                      <ax-switch [ngModel]=\"isConnectionEnabled(provider.id)\" [disabled]=\"pendingAction() || !hasEstablishedConnection(provider.id)\" (ngModelChange)=\"handleToggleEnabled(provider, $event)\"></ax-switch>\n                    }\n                  </div>\n                </article>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["@layer properties;axm-integrations-page axp-layout-start-side{min-width:calc(var(--spacing, .25rem) * 80)!important;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}axm-integrations-page axp-layout-start-side axp-layout-content.axm-integrations-page__sidebar{flex:none;padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__sidebar-section{margin-top:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__sidebar-section-title{margin:0;padding-bottom:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:85%}axm-integrations-page .axm-integrations-page__sidebar-section:first-child .axm-integrations-page__sidebar-section-title{padding-top:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__sidebar-section-body{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axm-integrations-page .axm-integrations-page__overview-list,axm-integrations-page .axm-integrations-page__category-list{margin:0;display:flex;list-style-type:none;flex-direction:column;gap:var(--spacing, .25rem);padding:0}axm-integrations-page .axm-integrations-page__overview-item{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-integrations-page .axm-integrations-page__overview-label{display:inline-flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5)}axm-integrations-page .axm-integrations-page__overview-label ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){axm-integrations-page .axm-integrations-page__overview-label ax-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}axm-integrations-page .axm-integrations-page__overview-count{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface))}axm-integrations-page .axm-integrations-page__overview-count.--danger{background-color:var(--color-danger);color:var(--color-on-danger);border-color:var(--color-border-danger)}axm-integrations-page .axm-integrations-page__category-item{padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-integrations-page .axm-integrations-page__category-checkbox{width:100%}axm-integrations-page .axm-integrations-page__skeleton-sidebar-title{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 28);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-sidebar-row{height:calc(var(--spacing, .25rem) * 8);width:100%;border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-section-title{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 40);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-section-description{height:calc(var(--spacing, .25rem) * 4);width:100%;max-width:var(--container-md, 28rem);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-card{display:flex;height:100%;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__skeleton-icon{width:calc(var(--spacing, .25rem) * 14);height:calc(var(--spacing, .25rem) * 14);flex-shrink:0;border-radius:var(--radius-xl, .75rem)}axm-integrations-page .axm-integrations-page__skeleton-status-badge{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 20);flex-shrink:0;border-radius:calc(infinity * 1px)}axm-integrations-page .axm-integrations-page__skeleton-title{height:calc(var(--spacing, .25rem) * 5);width:calc(3 / 5 * 100%);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-description{height:calc(var(--spacing, .25rem) * 4);width:100%;border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-description.--short{width:80%}axm-integrations-page .axm-integrations-page__skeleton-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-top:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__skeleton-action{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-switch{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 11);border-radius:calc(infinity * 1px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i6.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i6.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i8.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i9.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i10.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i11.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMIntegrationsPageComponent, isStandalone: true, selector: "axm-integrations-page", providers: [{ provide: AXPPageLayoutBase, useExisting: AXMIntegrationsPageComponent }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <!-- ----- Page start side: overview stats and category filters (large screens) ----- -->\n  @if (showSidebarPanel()) {\n    <axp-layout-start-side class=\"h-full\">\n      <axp-layout-content class=\"axm-integrations-page__sidebar\">\n        @if (loading()) {\n          <!-- ----- Sidebar skeleton while domains and providers load ----- -->\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-title\"></ax-skeleton>\n            <div class=\"axm-integrations-page__sidebar-section-body\">\n              @for (row of [0, 1, 2, 3]; track row) {\n                <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-row\"></ax-skeleton>\n              }\n            </div>\n          </section>\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-title\"></ax-skeleton>\n            <div class=\"axm-integrations-page__sidebar-section-body\">\n              @for (row of [0, 1, 2, 3, 4]; track row) {\n                <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-sidebar-row\"></ax-skeleton>\n              }\n            </div>\n          </section>\n        } @else {\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <h3 class=\"axm-integrations-page__sidebar-section-title\">\n              {{ (PAGE_I18N + '.sidebar.overview.title' | translate | async) ?? '' }}\n            </h3>\n            <ul class=\"axm-integrations-page__overview-list\">\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-circle-check\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.connected' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\">{{ overviewStats().connected }}</span>\n              </li>\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-shield-exclamation\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.error' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\" [class.--danger]=\"overviewStats().error > 0\">{{ overviewStats().error }}</span>\n              </li>\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-toggle-off\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.disabled' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\">{{ overviewStats().disabled }}</span>\n              </li>\n              <li class=\"axm-integrations-page__overview-item\">\n                <span class=\"axm-integrations-page__overview-label\">\n                  <ax-icon icon=\"fa-light fa-plug\"></ax-icon>\n                  <span>{{ (PAGE_I18N + '.sidebar.overview.not-connected' | translate | async) ?? '' }}</span>\n                </span>\n                <span class=\"axm-integrations-page__overview-count\">{{ overviewStats().notConnected }}</span>\n              </li>\n            </ul>\n          </section>\n\n          <section class=\"axm-integrations-page__sidebar-section\">\n            <h3 class=\"axm-integrations-page__sidebar-section-title\">\n              {{ (PAGE_I18N + '.sidebar.categories.title' | translate | async) ?? '' }}\n            </h3>\n            <ul class=\"axm-integrations-page__category-list\">\n              <li class=\"axm-integrations-page__category-item\">\n                <ax-check-box\n                  class=\"axm-integrations-page__category-checkbox\"\n                  [ngModel]=\"isAllDomainsSelected()\"\n                  (onValueChanged)=\"handleAllDomainsFilterChange($event)\"\n                >\n                  <ax-label>{{ (PAGE_I18N + '.sidebar.categories.all' | translate | async) ?? '' }}</ax-label>\n                </ax-check-box>\n              </li>\n              @for (section of domainSections(); track section.domain.id) {\n                <li class=\"axm-integrations-page__category-item\">\n                  <ax-check-box\n                    class=\"axm-integrations-page__category-checkbox\"\n                    [ngModel]=\"isDomainFilterSelected(section.domain.id)\"\n                    (onValueChanged)=\"handleDomainFilterChange(section.domain.id, $event)\"\n                  >\n                    <ax-label>{{ section.domain.displayName | translate | async }}</ax-label>\n                  </ax-check-box>\n                </li>\n              }\n            </ul>\n          </section>\n        }\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-content>\n    @if (loading()) {\n      <!-- ----- Skeleton placeholders while domains and providers are fetched ----- -->\n      <div class=\"flex w-full flex-col gap-8\">\n        @for (sectionIndex of skeletonSectionPlaceholders; track sectionIndex) {\n          <section class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-col gap-2\">\n              <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-section-title\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-section-description\"></ax-skeleton>\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(16rem,18rem))] lg:justify-start\">\n              @for (cardIndex of skeletonCardPlaceholders; track cardIndex) {\n                <div class=\"axm-integrations-page__skeleton-card\">\n                  <div class=\"flex items-start justify-between gap-3\">\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-icon\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-status-badge\"></ax-skeleton>\n                  </div>\n\n                  <div class=\"flex flex-col gap-2\">\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-title\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-description\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-description --short\"></ax-skeleton>\n                  </div>\n\n                  <div class=\"axm-integrations-page__skeleton-footer\">\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-action\"></ax-skeleton>\n                    <ax-skeleton [animated]=\"true\" class=\"axm-integrations-page__skeleton-switch\"></ax-skeleton>\n                  </div>\n                </div>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    } @else if (!visibleDomainSections().length) {\n      <!-- ----- Empty state when all category filters are cleared on large screens ----- -->\n      <axp-state-message mode=\"empty\" icon=\"fa-light fa-filter\" [title]=\"PAGE_I18N + '.sidebar.empty-filter.title'\" [description]=\"PAGE_I18N + '.sidebar.empty-filter.description'\">\n        <ax-button slot=\"actions\" look=\"solid\" color=\"primary\" [text]=\"(PAGE_I18N + '.sidebar.empty-filter.action' | translate | async) ?? ''\" (onClick)=\"handleSelectAllDomainFilters()\"></ax-button>\n      </axp-state-message>\n    } @else {\n      <!-- ----- Domain sections with tenant provider cards ----- -->\n      <div class=\"flex w-full flex-col gap-8\">\n        @for (section of visibleDomainSections(); track section.domain.id) {\n          <section class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-col gap-1\">\n              <h2 class=\"text-lg font-semibold\">\n                {{ section.domain.displayName | translate | async }}\n              </h2>\n              @if (section.domain.description) {\n                <p class=\"text-sm text-muted\">\n                  {{ section.domain.description | translate | async }}\n                </p>\n              }\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-[repeat(auto-fill,minmax(18rem,24rem))] lg:justify-start\">\n              @for (provider of section.providers; track provider.id) {\n                <article class=\"flex h-full w-full flex-col gap-3 rounded-xl border border-surface bg-lighter-surface p-4 shadow-sm transition-shadow hover:shadow-md\">\n                  <div class=\"flex items-start justify-between gap-3\">\n                    <div class=\"flex size-14 shrink-0 items-center justify-center rounded-xl border border-surface bg-transparent\">\n                      @if (provider.logoKey) {\n                        <axp-logo [logoKey]=\"provider.logoKey\" appearance=\"colored\" [size]=\"32\" />\n                      } @else if (provider.icon) {\n                        <ax-icon class=\"text-2xl\">\n                          <i [class]=\"provider.icon\"></i>\n                        </ax-icon>\n                      }\n                    </div>\n\n                    <div class=\"ax-sm\">\n                      @if (provider.allowMultipleConnections) {\n                        @if (getProviderConnectionSummary(provider.id); as summary) {\n                          @if (summary.total > 0) {\n                            <ax-badge\n                              look=\"twotone\"\n                              [color]=\"getMultiConnectionStatusBadgeColor(provider.id)\"\n                              [text]=\"(PANEL_I18N + '.status.connected-count' | translate: { params: { connected: summary.connected, total: summary.total } } | async) ?? ''\"\n                            ></ax-badge>\n                          } @else {\n                            <ax-badge look=\"twotone\" color=\"secondary\" [text]=\"(PANEL_I18N + '.status.not-connected' | translate | async) ?? ''\"></ax-badge>\n                          }\n                        }\n                      } @else if (hasEstablishedConnection(provider.id)) {\n                        @if (isConnectionEnabled(provider.id)) {\n                          <ax-badge look=\"twotone\" color=\"success\" [text]=\"(PANEL_I18N + '.status.connected' | translate | async) ?? ''\"></ax-badge>\n                        } @else {\n                          <ax-badge look=\"twotone\" color=\"warning\" [text]=\"(PANEL_I18N + '.status.disabled' | translate | async) ?? ''\"></ax-badge>\n                        }\n                      } @else {\n                        <ax-badge look=\"twotone\" color=\"secondary\" [text]=\"(PANEL_I18N + '.status.not-connected' | translate | async) ?? ''\"></ax-badge>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n                    <div class=\"flex flex-wrap items-center gap-2 font-medium\">\n                      <span>{{ provider.displayName | translate | async }}</span>\n                      @if (isConnectDisabled(provider.id) && connectDisabledBadgeKey(provider.id); as badgeKey) {\n                        <span\n                          class=\"inline-flex cursor-help\"\n                          [axTooltip]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                          axTooltipPlacement=\"top\"\n                          [attr.aria-label]=\"(connectDisabledMessageKey(provider.id) | translate | async) ?? ''\"\n                        >\n                          <ax-badge size=\"sm\" look=\"twotone\" color=\"warning\" [text]=\"(badgeKey | translate | async) ?? ''\"></ax-badge>\n                        </span>\n                      }\n                    </div>\n\n                    @if (provider.description) {\n                      <p class=\"text-sm text-muted\">\n                        {{ provider.description | translate | async }}\n                      </p>\n                    }\n\n                    @if (getProviderBadges(provider.id); as badges) {\n                      @if (badges.length > 0) {\n                        <div class=\"flex flex-wrap items-center gap-1\">\n                          @for (badge of badges; track badge.text) {\n                            <ax-badge size=\"sm\" look=\"twotone\" [color]=\"badge.color\" [text]=\"badge.text\"></ax-badge>\n                          }\n                        </div>\n                      }\n                    }\n\n                    <!-- ----- Multi-connection provider: list each connection with status and actions ----- -->\n                    @if (provider.allowMultipleConnections) {\n                      <div class=\"mt-1 flex flex-col gap-2\">\n                        @for (connection of getConnections(provider.id); track connection.id) {\n                          <div class=\"flex flex-col gap-2 rounded-lg border border-surface bg-lighter-surface p-3\">\n                            <!-- ----- Row 1: connection identity + status badge ----- -->\n                            <div class=\"flex items-start justify-between gap-2\">\n                              <div class=\"min-w-0 flex-1\">\n                                <div class=\"truncate text-sm font-medium\">{{ connection.displayName }}</div>\n                                @if (connection.instanceUrl) {\n                                  <div class=\"truncate text-xs text-muted\">{{ connection.instanceUrl }}</div>\n                                }\n                              </div>\n                              <div class=\"ax-sm shrink-0\">\n                                @if (isEstablishedConnection(connection)) {\n                                  @if (isEnabledConnection(connection)) {\n                                    <ax-badge look=\"twotone\" color=\"success\" [text]=\"(PANEL_I18N + '.status.connected' | translate | async) ?? ''\"></ax-badge>\n                                  } @else {\n                                    <ax-badge look=\"twotone\" color=\"warning\" [text]=\"(PANEL_I18N + '.status.disabled' | translate | async) ?? ''\"></ax-badge>\n                                  }\n                                } @else {\n                                  <ax-badge look=\"twotone\" color=\"secondary\" [text]=\"(PANEL_I18N + '.status.not-connected' | translate | async) ?? ''\"></ax-badge>\n                                }\n                              </div>\n                            </div>\n\n                            <!-- ----- Row 2: actions + enable toggle ----- -->\n                            <div class=\"flex flex-nowrap items-center justify-between gap-2\">\n                              <div class=\"flex shrink-0 flex-nowrap items-center gap-2\">\n                                @if (isEstablishedConnection(connection)) {\n                                  <ax-dropdown-button\n                                    size=\"sm\"\n                                    look=\"outline\"\n                                    [mode]=\"'dropdown'\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction()\"\n                                    [text]=\"(PANEL_I18N + '.actions.manage' | translate | async) ?? ''\"\n                                  >\n                                    <ax-button-item-list>\n                                      @if (supportsConfigure(provider, connection)) {\n                                        <ax-button-item\n                                          [text]=\"(PANEL_I18N + '.actions.reconfigure' | translate | async) ?? ''\"\n                                          [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                                          (onClick)=\"handleConfigure(provider, connection)\"\n                                        >\n                                          <ax-prefix>\n                                            <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                                          </ax-prefix>\n                                        </ax-button-item>\n                                      }\n                                      <ax-button-item\n                                        [text]=\"(PANEL_I18N + '.actions.disconnect' | translate | async) ?? ''\"\n                                        color=\"danger\"\n                                        [disabled]=\"pendingAction()\"\n                                        (onClick)=\"handleDisconnect(provider, connection)\"\n                                      >\n                                        <ax-prefix>\n                                          <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                                        </ax-prefix>\n                                      </ax-button-item>\n                                      <ax-button-item\n                                        [text]=\"(PANEL_I18N + '.actions.remove' | translate | async) ?? ''\"\n                                        color=\"danger\"\n                                        [disabled]=\"pendingAction()\"\n                                        (onClick)=\"handleRemove(provider, connection)\"\n                                      >\n                                        <ax-prefix>\n                                          <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n                                        </ax-prefix>\n                                      </ax-button-item>\n                                    </ax-button-item-list>\n                                  </ax-dropdown-button>\n                                } @else if (supportsConnect(provider)) {\n                                  <ax-button\n                                    size=\"sm\"\n                                    look=\"solid\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                                    [text]=\"(PANEL_I18N + '.actions.connect' | translate | async) ?? ''\"\n                                    (onClick)=\"handleConnect(provider, connection)\"\n                                  >\n                                    <ax-prefix>\n                                      <ax-icon icon=\"fa-light fa-plug\"></ax-icon>\n                                    </ax-prefix>\n                                  </ax-button>\n                                  <ax-button\n                                    size=\"sm\"\n                                    look=\"outline\"\n                                    color=\"danger\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction()\"\n                                    [text]=\"(PANEL_I18N + '.actions.remove' | translate | async) ?? ''\"\n                                    (onClick)=\"handleRemove(provider, connection)\"\n                                  >\n                                    <ax-prefix>\n                                      <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n                                    </ax-prefix>\n                                  </ax-button>\n                                } @else {\n                                  <ax-button\n                                    size=\"sm\"\n                                    look=\"outline\"\n                                    color=\"danger\"\n                                    type=\"button\"\n                                    [disabled]=\"pendingAction()\"\n                                    [text]=\"(PANEL_I18N + '.actions.remove' | translate | async) ?? ''\"\n                                    (onClick)=\"handleRemove(provider, connection)\"\n                                  >\n                                    <ax-prefix>\n                                      <ax-icon icon=\"fa-light fa-trash\"></ax-icon>\n                                    </ax-prefix>\n                                  </ax-button>\n                                }\n                              </div>\n\n                              <ax-switch\n                                class=\"shrink-0\"\n                                [ngModel]=\"isEnabledConnection(connection)\"\n                                [disabled]=\"pendingAction() || !isEstablishedConnection(connection)\"\n                                (ngModelChange)=\"handleToggleEnabled(provider, $event, connection)\"\n                              ></ax-switch>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n\n                  <!-- ----- Card footer: single-connection manage/connect, or add connection for multi ----- -->\n                  <div class=\"mt-auto flex items-center justify-between gap-3 border-t border-surface pt-4\">\n                    @if (provider.allowMultipleConnections) {\n                      @if (supportsConnect(provider)) {\n                        <ax-button\n                          size=\"sm\"\n                          look=\"outline\"\n                          type=\"button\"\n                          [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\"\n                          [text]=\"(PANEL_I18N + '.actions.add-connection' | translate | async) ?? ''\"\n                          (onClick)=\"handleAddConnection(provider)\"\n                        >\n                          <ax-prefix>\n                            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                          </ax-prefix>\n                        </ax-button>\n                      } @else {\n                        <span></span>\n                      }\n                      <span></span>\n                    } @else if (hasEstablishedConnection(provider.id)) {\n                      <ax-dropdown-button size=\"sm\" [mode]=\"'dropdown'\" type=\"button\" [disabled]=\"pendingAction()\" [text]=\"(PANEL_I18N + '.actions.manage' | translate | async) ?? ''\">\n                        <ax-button-item-list>\n                          @if (supportsConfigure(provider)) {\n                            <ax-button-item [text]=\"(PANEL_I18N + '.actions.reconfigure' | translate | async) ?? ''\" [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\" (onClick)=\"handleConfigure(provider)\">\n                              <ax-prefix>\n                                <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n                              </ax-prefix>\n                            </ax-button-item>\n                          }\n                          @for (action of getManageActions(provider); track action.commandKey) {\n                            <ax-button-item [text]=\"(action.titleKey | translate | async) ?? ''\" [color]=\"action.color\" [disabled]=\"pendingAction()\" (onClick)=\"handleManageAction(provider, action)\">\n                              @if (action.icon) {\n                                <ax-prefix>\n                                  <ax-icon [icon]=\"action.icon\"></ax-icon>\n                                </ax-prefix>\n                              }\n                            </ax-button-item>\n                          }\n                          <ax-button-item [text]=\"(PANEL_I18N + '.actions.disconnect' | translate | async) ?? ''\" color=\"danger\" [disabled]=\"pendingAction()\" (onClick)=\"handleDisconnect(provider)\">\n                            <ax-prefix>\n                              <ax-icon icon=\"fa-light fa-link-slash\"></ax-icon>\n                            </ax-prefix>\n                          </ax-button-item>\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                      <ax-switch [ngModel]=\"isConnectionEnabled(provider.id)\" [disabled]=\"pendingAction() || !hasEstablishedConnection(provider.id)\" (ngModelChange)=\"handleToggleEnabled(provider, $event)\"></ax-switch>\n                    } @else if (supportsConnect(provider)) {\n                      <ax-button size=\"sm\" look=\"solid\" type=\"button\" [disabled]=\"pendingAction() || isConnectDisabled(provider.id)\" [text]=\"(PANEL_I18N + '.actions.connect' | translate | async) ?? ''\" (onClick)=\"handleConnect(provider)\">\n                        <ax-prefix>\n                          <ax-icon icon=\"fa-light fa-plug\"></ax-icon>\n                        </ax-prefix>\n                      </ax-button>\n                      <ax-switch [ngModel]=\"isConnectionEnabled(provider.id)\" [disabled]=\"pendingAction() || !hasEstablishedConnection(provider.id)\" (ngModelChange)=\"handleToggleEnabled(provider, $event)\"></ax-switch>\n                    } @else {\n                      <span></span>\n                      <ax-switch [ngModel]=\"isConnectionEnabled(provider.id)\" [disabled]=\"pendingAction() || !hasEstablishedConnection(provider.id)\" (ngModelChange)=\"handleToggleEnabled(provider, $event)\"></ax-switch>\n                    }\n                  </div>\n                </article>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["@layer properties;axm-integrations-page axp-layout-start-side{min-width:calc(var(--spacing, .25rem) * 80)!important;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}axm-integrations-page axp-layout-start-side axp-layout-content.axm-integrations-page__sidebar{flex:none;padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__sidebar-section{margin-top:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__sidebar-section-title{margin:0;padding-bottom:calc(var(--spacing, .25rem) * 2);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);opacity:85%}axm-integrations-page .axm-integrations-page__sidebar-section:first-child .axm-integrations-page__sidebar-section-title{padding-top:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__sidebar-section-body{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axm-integrations-page .axm-integrations-page__overview-list,axm-integrations-page .axm-integrations-page__category-list{margin:0;display:flex;list-style-type:none;flex-direction:column;gap:var(--spacing, .25rem);padding:0}axm-integrations-page .axm-integrations-page__overview-item{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-integrations-page .axm-integrations-page__overview-label{display:inline-flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 2.5)}axm-integrations-page .axm-integrations-page__overview-label ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){axm-integrations-page .axm-integrations-page__overview-label ax-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}axm-integrations-page .axm-integrations-page__overview-count{display:inline-flex;min-width:calc(var(--spacing, .25rem) * 7);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface))}axm-integrations-page .axm-integrations-page__overview-count.--danger{background-color:var(--color-danger);color:var(--color-on-danger);border-color:var(--color-border-danger)}axm-integrations-page .axm-integrations-page__category-item{padding-block:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axm-integrations-page .axm-integrations-page__category-checkbox{width:100%}axm-integrations-page .axm-integrations-page__skeleton-sidebar-title{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 28);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-sidebar-row{height:calc(var(--spacing, .25rem) * 8);width:100%;border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-section-title{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 40);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-section-description{height:calc(var(--spacing, .25rem) * 4);width:100%;max-width:var(--container-md, 28rem);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-card{display:flex;height:100%;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-surface));padding:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__skeleton-icon{width:calc(var(--spacing, .25rem) * 14);height:calc(var(--spacing, .25rem) * 14);flex-shrink:0;border-radius:var(--radius-xl, .75rem)}axm-integrations-page .axm-integrations-page__skeleton-status-badge{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 20);flex-shrink:0;border-radius:calc(infinity * 1px)}axm-integrations-page .axm-integrations-page__skeleton-title{height:calc(var(--spacing, .25rem) * 5);width:calc(3 / 5 * 100%);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-description{height:calc(var(--spacing, .25rem) * 4);width:100%;border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-description.--short{width:80%}axm-integrations-page .axm-integrations-page__skeleton-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-top:calc(var(--spacing, .25rem) * 4)}axm-integrations-page .axm-integrations-page__skeleton-action{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}axm-integrations-page .axm-integrations-page__skeleton-switch{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 11);border-radius:calc(infinity * 1px)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i6.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i6.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i8.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i9.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i10.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMIntegrationsPageComponent, decorators: [{
             type: Component,
@@ -403,4 +403,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }] });
 
 export { AXMIntegrationsPageComponent };
-//# sourceMappingURL=acorex-platform-module-integration-management-client-integrations-page.component-Q-SHidYA.mjs.map
+//# sourceMappingURL=acorex-platform-module-integration-management-client-integrations-page.component-iH0DqEak.mjs.map