@acorex-platform/module-integration-management-client 0.0.21

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

@@ -0,0 +1,406 @@
+import * as i2 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/check-box';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import * as i5 from '@acorex/components/dropdown-button';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i6 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i7 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i8 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+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 { 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';
+import { AXPIntegrationConnectionActionsService } from '@acorex-platform/framework-client/layout/widgets';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import { AXPQueryService } from '@acorex-platform/framework-client/runtime';
+import { AXP_INTEGRATION_CONNECTION_STATUS, AXP_INTEGRATION_CONNECTION_SCOPE, runtimeQueryCollectionData } from '@acorex-platform/framework-shared/core';
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+//#region ----- Imports -----
+const ERROR_CONNECTION_STATUSES = new Set([
+    AXP_INTEGRATION_CONNECTION_STATUS.Error,
+    AXP_INTEGRATION_CONNECTION_STATUS.Invalid,
+    AXP_INTEGRATION_CONNECTION_STATUS.Expired,
+    AXP_INTEGRATION_CONNECTION_STATUS.RefreshRequired,
+    AXP_INTEGRATION_CONNECTION_STATUS.PendingAuthorization,
+    AXP_INTEGRATION_CONNECTION_STATUS.Revoked,
+]);
+//#endregion
+//#region ----- Constants -----
+const PAGE_I18N = '@integration-management:pages.integrations';
+const PANEL_I18N = '@platform-layout-widgets:widgets.integration-connections-panel';
+const TENANT_SCOPE = AXP_INTEGRATION_CONNECTION_SCOPE.Tenant;
+const SKELETON_SECTION_COUNT = 2;
+const SKELETON_CARDS_PER_SECTION = 4;
+//#endregion
+//#region ----- Component -----
+class AXMIntegrationsPageComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----- Services & Dependencies -----
+        this.queryService = inject(AXPQueryService);
+        this.actionsService = inject(AXPIntegrationConnectionActionsService);
+        this.deviceService = inject(AXPDeviceService);
+        //#endregion
+        //#region ----- Constants -----
+        this.PAGE_I18N = PAGE_I18N;
+        this.PANEL_I18N = PANEL_I18N;
+        //#endregion
+        //#region ----- State Signals -----
+        this.loading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.pendingAction = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pendingAction" }] : /* istanbul ignore next */ []));
+        this.domainSections = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "domainSections" }] : /* istanbul ignore next */ []));
+        this.selectedDomainIds = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedDomainIds" }] : /* istanbul ignore next */ []));
+        this.panelData = signal({
+            providers: [],
+            connections: [],
+            providerBadges: {},
+            connectAvailabilityByProvider: {},
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelData" }] : /* istanbul ignore next */ []));
+        this.skeletonSectionPlaceholders = Array.from({ length: SKELETON_SECTION_COUNT }, (_, index) => index);
+        this.skeletonCardPlaceholders = Array.from({ length: SKELETON_CARDS_PER_SECTION }, (_, index) => index);
+        //#endregion
+        //#region ----- Sidebar Computed -----
+        this.overviewStats = computed(() => {
+            const providers = this.domainSections().flatMap((section) => section.providers);
+            const connections = this.panelData().connections;
+            let connected = 0;
+            let error = 0;
+            let disabled = 0;
+            let notConnected = 0;
+            for (const provider of providers) {
+                if (this.actionsService.isConnectionEnabled(connections, provider.id, TENANT_SCOPE)) {
+                    connected += 1;
+                    continue;
+                }
+                if (this.actionsService.hasEstablishedConnection(connections, provider.id, TENANT_SCOPE)) {
+                    if (this.isProviderInError(connections, provider.id)) {
+                        error += 1;
+                    }
+                    else {
+                        disabled += 1;
+                    }
+                    continue;
+                }
+                notConnected += 1;
+            }
+            return { connected, error, disabled, notConnected };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overviewStats" }] : /* istanbul ignore next */ []));
+        this.isAllDomainsSelected = computed(() => {
+            const sections = this.domainSections();
+            const selected = this.selectedDomainIds();
+            if (!sections.length) {
+                return true;
+            }
+            return sections.every((section) => selected.has(section.domain.id));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAllDomainsSelected" }] : /* istanbul ignore next */ []));
+        this.filteredDomainSections = computed(() => {
+            const selected = this.selectedDomainIds();
+            if (!selected.size) {
+                return [];
+            }
+            return this.domainSections().filter((section) => selected.has(section.domain.id));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredDomainSections" }] : /* istanbul ignore next */ []));
+        this.visibleDomainSections = computed(() => {
+            if (!this.deviceService.isLarge()) {
+                return this.domainSections();
+            }
+            return this.filteredDomainSections();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleDomainSections" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    async ngOnInit() {
+        super.ngOnInit();
+        await this.loadPage();
+    }
+    async getPageTitle() {
+        return this.translateService.translateAsync(`${PAGE_I18N}.title`);
+    }
+    async getPageDescription() {
+        return this.translateService.translateAsync(`${PAGE_I18N}.description`);
+    }
+    //#endregion
+    //#region ----- Connection Helpers -----
+    getConnections(providerId) {
+        return this.actionsService.getConnections(this.panelData().connections, providerId, TENANT_SCOPE);
+    }
+    getConnection(providerId) {
+        return this.actionsService.getConnection(this.panelData().connections, providerId, TENANT_SCOPE);
+    }
+    hasEstablishedConnection(providerId) {
+        return this.actionsService.hasEstablishedConnection(this.panelData().connections, providerId, TENANT_SCOPE);
+    }
+    isConnectionEnabled(providerId) {
+        return this.actionsService.isConnectionEnabled(this.panelData().connections, providerId, TENANT_SCOPE);
+    }
+    isEstablishedConnection(connection) {
+        return this.actionsService.isEstablishedConnection(connection);
+    }
+    isEnabledConnection(connection) {
+        return this.actionsService.isEnabledConnection(connection);
+    }
+    getProviderConnectionSummary(providerId) {
+        const connections = this.getConnections(providerId);
+        return {
+            connected: connections.filter((connection) => this.isEstablishedConnection(connection)).length,
+            total: connections.length,
+        };
+    }
+    getMultiConnectionStatusBadgeColor(providerId) {
+        const { connected, total } = this.getProviderConnectionSummary(providerId);
+        if (total === 0 || connected === 0) {
+            return 'secondary';
+        }
+        if (connected === total) {
+            return 'success';
+        }
+        return 'warning';
+    }
+    supportsConnect(provider) {
+        return this.actionsService.supportsConnect(provider);
+    }
+    supportsConfigure(provider, connection) {
+        return this.actionsService.supportsConfigure(provider, this.panelData().connections, TENANT_SCOPE, connection);
+    }
+    isConnectDisabled(providerId) {
+        return this.actionsService.isConnectDisabled(this.panelData().connectAvailabilityByProvider, providerId);
+    }
+    connectDisabledBadgeKey(providerId) {
+        return (this.panelData().connectAvailabilityByProvider[providerId]?.disabledBadgeKey
+            ?? this.panelData().providers.find((provider) => provider.id === providerId)?.connectDisabledBadgeKey);
+    }
+    connectDisabledMessageKey(providerId) {
+        return (this.panelData().connectAvailabilityByProvider[providerId]?.disabledMessageKey
+            ?? this.panelData().providers.find((provider) => provider.id === providerId)?.connectDisabledMessageKey);
+    }
+    getProviderBadges(providerId) {
+        return this.panelData().providerBadges[providerId] ?? [];
+    }
+    getManageActions(provider) {
+        return this.actionsService.getManageActions(provider, TENANT_SCOPE);
+    }
+    //#endregion
+    //#region ----- Sidebar Filters -----
+    showSidebarPanel() {
+        return this.deviceService.isLarge();
+    }
+    isDomainFilterSelected(domainId) {
+        return this.selectedDomainIds().has(domainId);
+    }
+    handleAllDomainsFilterChange(event) {
+        if (event.value) {
+            this.selectAllDomainFilters();
+            return;
+        }
+        this.selectedDomainIds.set(new Set());
+    }
+    handleSelectAllDomainFilters() {
+        this.selectAllDomainFilters();
+    }
+    handleDomainFilterChange(domainId, event) {
+        const next = new Set(this.selectedDomainIds());
+        if (event.value) {
+            next.add(domainId);
+        }
+        else {
+            next.delete(domainId);
+        }
+        this.selectedDomainIds.set(next);
+    }
+    selectAllDomainFilters() {
+        this.selectedDomainIds.set(new Set(this.domainSections().map((section) => section.domain.id)));
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    async handleConnect(provider, connection) {
+        if (this.pendingAction()) {
+            return;
+        }
+        this.pendingAction.set(true);
+        try {
+            const outcome = await this.actionsService.connect(provider, {
+                connectionScope: TENANT_SCOPE,
+                connectAvailabilityByProvider: this.panelData().connectAvailabilityByProvider,
+                ...(connection?.id ? { connectionId: connection.id } : {}),
+            });
+            if (outcome === 'reload') {
+                await this.loadPage(false);
+            }
+        }
+        finally {
+            this.actionsService.releasePendingAction(() => this.pendingAction.set(false));
+        }
+    }
+    async handleAddConnection(provider) {
+        await this.handleConnect(provider);
+    }
+    async handleConfigure(provider, connection) {
+        await this.handleConnect(provider, connection ?? this.getConnection(provider.id));
+    }
+    async handleManageAction(provider, action, connection) {
+        if (this.pendingAction()) {
+            return;
+        }
+        this.pendingAction.set(true);
+        try {
+            const success = await this.actionsService.runManageAction(provider, action, TENANT_SCOPE, connection?.id);
+            if (success) {
+                await this.loadPage(false);
+            }
+        }
+        finally {
+            this.actionsService.releasePendingAction(() => this.pendingAction.set(false));
+        }
+    }
+    async handleDisconnect(provider, connection) {
+        if (this.pendingAction()) {
+            return;
+        }
+        const target = connection ?? this.getConnection(provider.id);
+        if (!target) {
+            return;
+        }
+        this.pendingAction.set(true);
+        try {
+            const success = await this.actionsService.disconnect(provider, target);
+            if (success) {
+                await this.loadPage(false);
+            }
+        }
+        finally {
+            this.actionsService.releasePendingAction(() => this.pendingAction.set(false));
+        }
+    }
+    async handleRemove(provider, connection) {
+        if (this.pendingAction()) {
+            return;
+        }
+        this.pendingAction.set(true);
+        try {
+            const success = await this.actionsService.remove(provider, connection);
+            if (success) {
+                await this.loadPage(false);
+            }
+        }
+        finally {
+            this.actionsService.releasePendingAction(() => this.pendingAction.set(false));
+        }
+    }
+    async handleToggleEnabled(provider, enabled, connection) {
+        if (this.pendingAction()) {
+            return;
+        }
+        const target = connection ?? this.getConnection(provider.id);
+        if (!target || !this.isEstablishedConnection(target)) {
+            return;
+        }
+        if (this.isEnabledConnection(target) === enabled) {
+            return;
+        }
+        this.pendingAction.set(true);
+        try {
+            const success = await this.actionsService.setConnectionEnabled(target.id, enabled);
+            if (success) {
+                await this.loadPage(false);
+            }
+        }
+        finally {
+            this.actionsService.releasePendingAction(() => this.pendingAction.set(false));
+        }
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    async loadPage(showBlockingLoader = true) {
+        if (showBlockingLoader) {
+            this.loading.set(true);
+        }
+        try {
+            await this.actionsService.waitForSettingsLoaded();
+            const [domainsResult, panelData] = await Promise.all([
+                this.queryService.fetch('IntegrationManagement.Domain:List', { includeProviderCount: false }),
+                this.actionsService.loadPanelData({ connectionScope: TENANT_SCOPE }),
+            ]);
+            const domains = runtimeQueryCollectionData(domainsResult)?.items ?? [];
+            const sections = [];
+            for (const domain of [...domains].sort((left, right) => (left.sortOrder ?? 100) - (right.sortOrder ?? 100))) {
+                const providers = panelData.providers.filter((provider) => provider.domainId === domain.id && provider.connectionScopes.includes(TENANT_SCOPE));
+                if (!providers.length) {
+                    continue;
+                }
+                sections.push({ domain, providers });
+            }
+            this.domainSections.set(sections);
+            this.selectAllDomainFilters();
+            this.panelData.set(panelData);
+            this.recompute();
+        }
+        finally {
+            if (showBlockingLoader) {
+                this.loading.set(false);
+            }
+        }
+    }
+    //#endregion
+    //#region ----- Overview Helpers -----
+    isProviderInError(connections, providerId) {
+        const providerConnections = this.actionsService.getConnections(connections, providerId, TENANT_SCOPE);
+        return providerConnections.some((connection) => {
+            if (connection.isRevoked || ERROR_CONNECTION_STATUSES.has(connection.status)) {
+                return true;
+            }
+            return Boolean(String(connection.lastErrorCode ?? '').trim()
+                || String(connection.lastErrorMessage ?? '').trim());
+        });
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMIntegrationsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-integrations-page', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXPPageLayoutBase, useExisting: AXMIntegrationsPageComponent }], imports: [
+                        AsyncPipe,
+                        FormsModule,
+                        AXBadgeModule,
+                        AXButtonModule,
+                        AXCheckBoxModule,
+                        AXDropdownButtonModule,
+                        AXDecoratorModule,
+                        AXLabelModule,
+                        AXSkeletonModule,
+                        AXSwitchModule,
+                        AXTooltipModule,
+                        AXTranslationModule,
+                        AXPLogoComponent,
+                        AXPPageLayoutComponent,
+                        AXPStateMessageComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutStartSideComponent,
+                    ], 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"] }]
+        }] });
+
+export { AXMIntegrationsPageComponent };
+//# sourceMappingURL=acorex-platform-module-integration-management-client-integrations-page.component-Q-SHidYA.mjs.map