import * as i0 from '@angular/core';
import { inject, ViewEncapsulation, Component } from '@angular/core';
import * as i3 from '@acorex/components/avatar';
import { AXAvatarModule } from '@acorex/components/avatar';
import * as i2$1 from '@acorex/components/button';
import { AXButtonModule } from '@acorex/components/button';
import { AXCheckBoxModule } from '@acorex/components/check-box';
import * as i1 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXFormModule } from '@acorex/components/form';
import { AXImageModule } from '@acorex/components/image';
import { AXLabelModule } from '@acorex/components/label';
import * as i2$2 from '@acorex/components/loading';
import { AXLoadingModule } from '@acorex/components/loading';
import * as i7 from '@acorex/components/search-box';
import { AXSearchBoxModule } from '@acorex/components/search-box';
import { AXTextBoxModule } from '@acorex/components/text-box';
import * as i5 from '@acorex/core/translation';
import { AXTranslationModule } from '@acorex/core/translation';
import { AXPSessionService, AXPAuthStrategyRegistryService } from '@acorex/platform/auth';
import { AXP_PLATFORM_CONFIG_TOKEN, AXPLogoComponent } from '@acorex/platform/common';
import { AXPUserAvatarComponent } from '@acorex/platform/layout/components';
import * as i1$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { Subscription, first } from 'rxjs';

class AXPAuthTenantChooserComponent {
    constructor() {
        this.router = inject(Router);
        this.platformConfig = inject(AXP_PLATFORM_CONFIG_TOKEN);
        this.sessionService = inject(AXPSessionService);
        this.authStrategyRegistry = inject(AXPAuthStrategyRegistryService);
        this.strategyName = this.sessionService.getSessionData()?.strategy;
        this.strategy = this.authStrategyRegistry.get(this.strategyName);
        this.subscription = new Subscription();
        this.user = this.sessionService.user;
        this.searchValue = '';
        this.showAll = false;
        this.selectedTenant = null;
        this.displayedTenants = [];
    }
    async handleChooseTenant(item) {
        this.selectedTenant = item;
        if (this.strategy) {
            const updateContext = {
                tenant: item,
                user: this.user,
            };
            await this.sessionService.updateToken(updateContext);
        }
        return this.router.navigate(['/auth/account/app-chooser']);
    }
    ngOnInit() {
        this.sessionService.tenants$.pipe(first()).subscribe((tenants) => {
            this.displayedTenants = tenants.slice(0, 4);
            this.allTenants = tenants;
        });
    }
    filterTenants(tenants) {
        return tenants.filter((tenant) => tenant.title.toLowerCase().includes(this.searchValue.toLowerCase()));
    }
    handleSearch(event) {
        if (event != undefined) {
            this.searchValue = event;
            this.displayedTenants = this.filterTenants(this.allTenants);
        }
    }
    showAllTenants() {
        this.showAll = !this.showAll;
        this.displayedTenants = this.filterTenants(this.showAll ? this.allTenants : this.allTenants.slice(0, 4));
    }
    async handleSignout() {
        await this.sessionService.signout();
        this.router.navigate(['/auth/login']);
    }
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPAuthTenantChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPAuthTenantChooserComponent, isStandalone: true, selector: "axp-auth-tenant-chooser", ngImport: i0, template: "<main\n  *translate=\"let t\"\n  class=\"ax-w-full ax-space-y-10 ax-h-[100vh] ax-flex ax-flex-col ax-items-center ax-justify-center ax-bg-lightest md:ax-bg-default\"\n>\n  <section>\n    <axp-logo\n      [source]=\"platformConfig.logo?.full\"\n      [attr.alt]=\"platformConfig.title\"\n      class=\"ax-w-36 ax-mx-auto ax-text-2xl ax-font-bold\"\n    ></axp-logo>\n  </section>\n  <section class=\"ax-flex ax-justify-center\">\n    <div\n      class=\"ax-flex ax-gap-2 ax-justify-center ax-text-center ax-flex-col ax-items-center ax-border ax-rounded-lg ax-shadow-lg ax-p-6 md:ax-w-96 ax-w-80\"\n    >\n      <ax-avatar class=\"ax-rounded-full\" [size]=\"72\">\n        @if (user?.avatar) {\n          <!-- <ax-image [src]=\"user?.avatar\"></ax-image> -->\n          <axp-user-avatar [size]=\"72\" [userId]=\"user?.id!\"></axp-user-avatar>\n        }\n      </ax-avatar>\n      <h2 class=\"md:ax-text-lg ax-font-medium\">{{ '@auth:welcome.message' | translate | async }}, {{ user?.title }}</h2>\n      <p class=\"ax-text-neutral-500 ax-text-sm md:ax-text-base ax-font-medium\">\n        {{ '@auth:tenant-chooser.description' | translate | async }}\n      </p>\n      <div class=\"ax-mt-3 ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n        @if (allTenants && allTenants.length > 4) {\n          <ax-search-box\n            [placeholder]=\"'@general:search.title' | translate | async\"\n            [ngModel]=\"searchValue\"\n            (ngModelChange)=\"handleSearch($event)\"\n            ><ax-clear-button></ax-clear-button\n          ></ax-search-box>\n        }\n        @for (tenant of displayedTenants; track $index) {\n          <div\n            class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-center ax-cursor-pointer\"\n            (click)=\"handleChooseTenant(tenant)\"\n          >\n            <div class=\"ax-flex ax-gap-2 ax-items-center ax-font-medium\">\n              <div\n                class=\"ax-size-12 ax-min-w-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\"\n              >\n                <ax-icon class=\"fa-solid fa-building ax-text-neutral-500 ax-text-lg\"> </ax-icon>\n              </div>\n              <span class=\"md:ax-text-base ax-text-sm ax-text-start\">{{ tenant.title }} </span>\n            </div>\n            @if (tenant.name === selectedTenant?.name) {\n              <ax-loading></ax-loading>\n            } @else {\n              <ax-icon class=\"fa-solid fa-chevron-right ax-text-neutral-400\"> </ax-icon>\n            }\n          </div>\n        }\n      </div>\n      @if (allTenants && allTenants.length > 4) {\n        <div class=\"ax-mt-6 ax-w-full ax-flex ax-justify-center\">\n          <ax-button\n            (onClick)=\"showAllTenants()\"\n            class=\"ax-w-full\"\n            look=\"outline\"\n            [text]=\"\n              showAll\n                ? ('@general:actions.view-less.title' | translate | async)\n                : ('@general:actions.view-all.title' | translate | async)\n            \"\n          ></ax-button>\n        </div>\n      }\n    </div>\n  </section>\n  <section>\n    <p class=\"ax-text-neutral-400 ax-text-sm\">\n      {{ '@auth:tenant-chooser.footer' | translate | async }}\n      <a (click)=\"handleSignout()\" class=\"ax-text-primary ax-cursor-pointer hover:ax-underline ax-font-medium\">\n        {{ '@auth:backLogin' | translate | async }}\n      </a>\n    </p>\n  </section>\n</main>\n", styles: [":host{display:contents}.gradient{background:-webkit-linear-gradient(var(--ax-current-v1),var(--ax-current-v2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.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: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i7.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPAuthTenantChooserComponent, decorators: [{
            type: Component,
            args: [{ selector: 'axp-auth-tenant-chooser', imports: [
                        CommonModule,
                        FormsModule,
                        AXFormModule,
                        AXTextBoxModule,
                        AXButtonModule,
                        AXLabelModule,
                        AXCheckBoxModule,
                        AXAvatarModule,
                        AXImageModule,
                        AXDecoratorModule,
                        AXPLogoComponent,
                        AXLoadingModule,
                        AXTranslationModule,
                        AXSearchBoxModule,
                        AXPUserAvatarComponent,
                    ], encapsulation: ViewEncapsulation.None, template: "<main\n  *translate=\"let t\"\n  class=\"ax-w-full ax-space-y-10 ax-h-[100vh] ax-flex ax-flex-col ax-items-center ax-justify-center ax-bg-lightest md:ax-bg-default\"\n>\n  <section>\n    <axp-logo\n      [source]=\"platformConfig.logo?.full\"\n      [attr.alt]=\"platformConfig.title\"\n      class=\"ax-w-36 ax-mx-auto ax-text-2xl ax-font-bold\"\n    ></axp-logo>\n  </section>\n  <section class=\"ax-flex ax-justify-center\">\n    <div\n      class=\"ax-flex ax-gap-2 ax-justify-center ax-text-center ax-flex-col ax-items-center ax-border ax-rounded-lg ax-shadow-lg ax-p-6 md:ax-w-96 ax-w-80\"\n    >\n      <ax-avatar class=\"ax-rounded-full\" [size]=\"72\">\n        @if (user?.avatar) {\n          <!-- <ax-image [src]=\"user?.avatar\"></ax-image> -->\n          <axp-user-avatar [size]=\"72\" [userId]=\"user?.id!\"></axp-user-avatar>\n        }\n      </ax-avatar>\n      <h2 class=\"md:ax-text-lg ax-font-medium\">{{ '@auth:welcome.message' | translate | async }}, {{ user?.title }}</h2>\n      <p class=\"ax-text-neutral-500 ax-text-sm md:ax-text-base ax-font-medium\">\n        {{ '@auth:tenant-chooser.description' | translate | async }}\n      </p>\n      <div class=\"ax-mt-3 ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n        @if (allTenants && allTenants.length > 4) {\n          <ax-search-box\n            [placeholder]=\"'@general:search.title' | translate | async\"\n            [ngModel]=\"searchValue\"\n            (ngModelChange)=\"handleSearch($event)\"\n            ><ax-clear-button></ax-clear-button\n          ></ax-search-box>\n        }\n        @for (tenant of displayedTenants; track $index) {\n          <div\n            class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-center ax-cursor-pointer\"\n            (click)=\"handleChooseTenant(tenant)\"\n          >\n            <div class=\"ax-flex ax-gap-2 ax-items-center ax-font-medium\">\n              <div\n                class=\"ax-size-12 ax-min-w-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\"\n              >\n                <ax-icon class=\"fa-solid fa-building ax-text-neutral-500 ax-text-lg\"> </ax-icon>\n              </div>\n              <span class=\"md:ax-text-base ax-text-sm ax-text-start\">{{ tenant.title }} </span>\n            </div>\n            @if (tenant.name === selectedTenant?.name) {\n              <ax-loading></ax-loading>\n            } @else {\n              <ax-icon class=\"fa-solid fa-chevron-right ax-text-neutral-400\"> </ax-icon>\n            }\n          </div>\n        }\n      </div>\n      @if (allTenants && allTenants.length > 4) {\n        <div class=\"ax-mt-6 ax-w-full ax-flex ax-justify-center\">\n          <ax-button\n            (onClick)=\"showAllTenants()\"\n            class=\"ax-w-full\"\n            look=\"outline\"\n            [text]=\"\n              showAll\n                ? ('@general:actions.view-less.title' | translate | async)\n                : ('@general:actions.view-all.title' | translate | async)\n            \"\n          ></ax-button>\n        </div>\n      }\n    </div>\n  </section>\n  <section>\n    <p class=\"ax-text-neutral-400 ax-text-sm\">\n      {{ '@auth:tenant-chooser.footer' | translate | async }}\n      <a (click)=\"handleSignout()\" class=\"ax-text-primary ax-cursor-pointer hover:ax-underline ax-font-medium\">\n        {{ '@auth:backLogin' | translate | async }}\n      </a>\n    </p>\n  </section>\n</main>\n", styles: [":host{display:contents}.gradient{background:-webkit-linear-gradient(var(--ax-current-v1),var(--ax-current-v2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}\n"] }]
        }] });

export { AXPAuthTenantChooserComponent };
//# sourceMappingURL=acorex-modules-auth-tenant-chooser.component-vI4qDxVt.mjs.map
