import { Component, ChangeDetectionStrategy } from '@angular/core';
import { EuiEuLanguages } from '@eui/core';
import { EuimLabelModule } from '../../atoms/euim-label';
import { IonicModule } from '@ionic/angular';
import { EuimAvatarModule } from '../../euim-avatar';
import { EuimEmptyListPlaceholderModule } from '../../euim-empty-list-placeholder';
import { TranslateModule } from '@ngx-translate/core';
import * as i0 from "@angular/core";
import * as i1 from "@eui/core";
import * as i2 from "../../../services";
import * as i3 from "@ionic/angular";
import * as i4 from "../../euim-avatar/euim-avatar.component";
import * as i5 from "../../euim-avatar/euim-avatar-icon/euim-avatar-icon.component";
import * as i6 from "../../atoms/euim-label/euim-label.component";
import * as i7 from "../../euim-empty-list-placeholder/euim-empty-list-placeholder.component";
import * as i8 from "@ngx-translate/core";
export class EuimLanguageListComponent {
    constructor(
    /**
     * @deprecated will be removed in eUI Mobile v19.
     */
    appShellService, 
    /**
     * @deprecated will be removed in eUI Mobile v19.
     */
    appService, modalCtrl, i18nService) {
        this.appShellService = appShellService;
        this.appService = appService;
        this.modalCtrl = modalCtrl;
        this.i18nService = i18nService;
    }
    ngOnInit() {
        this.setLanguages();
    }
    onLanguageSelected(language) {
        this.i18nService.updateState({ activeLang: language.code });
        this.modalCtrl.dismiss(null, 'cancel');
    }
    isLastElementOfArray(array, element) {
        if (array.length === 0) {
            return false;
        }
        return array[array.length - 1] === element;
    }
    setLanguages() {
        this.euLanguageList =
            EuiEuLanguages.getOrderedLanguages(EuiEuLanguages.filterEULanguages(this.languages));
        this.nonEULanguageList =
            [...EuiEuLanguages.getOrderedLanguages(EuiEuLanguages.filterNonEULanguages(this.languages))];
        this.languagesSortedByEUAndNonEU = [...this.euLanguageList, ...this.nonEULanguageList];
        this.results = [...this.languagesSortedByEUAndNonEU];
    }
    onClose() {
        return this.modalCtrl.dismiss(null, 'cancel');
    }
    handleChange(event) {
        const query = event.target.value.toLowerCase();
        this.results = this.languagesSortedByEUAndNonEU.filter(d => {
            return d.code.toLowerCase().indexOf(query) > -1 ||
                d.label.toLowerCase().indexOf(query) > -1;
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimLanguageListComponent, deps: [{ token: i1.EuiAppShellService }, { token: i2.EuimAppService }, { token: i3.ModalController }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EuimLanguageListComponent, isStandalone: true, selector: "euim-language-list", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"branding\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n    @if (hasSearchbar) {\n      <ion-toolbar color=\"branding\" class=\"euim-language-selector__search\">\n        <ion-searchbar (ionInput)=\"handleChange($event)\"></ion-searchbar>\n      </ion-toolbar>\n    }\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code || firstElementFromNonEUList?.code === item.code || euLanguageList[0]?.code === item.code\n          || nonEULanguageList[0]?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code || euLanguageList[0]?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item || isLastElementOfArray(euLanguageList, item) || isLastElementOfArray(nonEULanguageList, item) ? 'none' : 'inset'\">\n            <euim-avatar fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n                <euim-avatar-icon>\n                    <ion-icon name=\"language\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n                </euim-avatar-icon>\n            </euim-avatar>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n", dependencies: [{ kind: "ngmodule", type: EuimAvatarModule }, { kind: "component", type: i4.EuimAvatarComponent, selector: "euim-avatar", inputs: ["color", "size", "fill", "variant", "borderColor"] }, { kind: "component", type: i5.EuimAvatarIconComponent, selector: "euim-avatar-icon" }, { kind: "ngmodule", type: EuimLabelModule }, { kind: "component", type: i6.EuimLabelComponent, selector: "div[euimLabel], p[euimLabel], span[euimLabel], euim-label", inputs: ["euimLabelTruncateWithLines", "euimLabelTitle", "euimLabelSubTitle", "euimLabelMeta", "euimLabelTruncate", "euimLabelTextWrap"] }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i3.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i3.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i3.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i3.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i3.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i3.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i3.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { kind: "component", type: i3.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i3.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i3.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i3.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i3.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "ngmodule", type: EuimEmptyListPlaceholderModule }, { kind: "component", type: i7.EuimEmptyListPlaceholderComponent, selector: "euim-empty-list-placeholder", inputs: ["message", "icon", "description", "button", "euimMarginTopLarge", "euimMarginTopSmall", "euimMarginBottomSmall"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimLanguageListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'euim-language-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [EuimAvatarModule, EuimLabelModule, IonicModule, EuimEmptyListPlaceholderModule, TranslateModule], template: "<ion-header>\n  <ion-toolbar color=\"branding\">\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"onClose()\">\n        <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    <ion-title> {{'euim.language-list.SELECT-LANGUAGE' | translate }}</ion-title>\n  </ion-toolbar>\n    @if (hasSearchbar) {\n      <ion-toolbar color=\"branding\" class=\"euim-language-selector__search\">\n        <ion-searchbar (ionInput)=\"handleChange($event)\"></ion-searchbar>\n      </ion-toolbar>\n    }\n</ion-header>\n<ion-content>\n  @if (results.length > 0) {\n    <ion-list>\n      @for (item of results; track item) {\n        @if (firstElementFromEUList?.code === item.code || firstElementFromNonEUList?.code === item.code || euLanguageList[0]?.code === item.code\n          || nonEULanguageList[0]?.code === item.code) {\n          <ion-item-divider>\n            {{ (firstElementFromEUList?.code === item.code || euLanguageList[0]?.code === item.code)\n            ? ('euim.language-list.EU-LANGUAGES' | translate)\n            : 'euim.language-list.NON-EU-LANGUAGES' | translate }}\n          </ion-item-divider>\n        }\n        <ion-item button (click)=\"onLanguageSelected(item)\" [lines]=\"lastElementFromEUList === item || isLastElementOfArray(euLanguageList, item) || isLastElementOfArray(nonEULanguageList, item) ? 'none' : 'inset'\">\n            <euim-avatar fill=\"solid\" slot=\"start\" variant=\"rounded\" class=\"euim-language-selector__avatar\">\n                <euim-avatar-icon>\n                    <ion-icon name=\"language\" class=\"euim-language-selector__internal-icon\"></ion-icon>\n                </euim-avatar-icon>\n            </euim-avatar>\n          <ion-label>\n            <div euimLabel euimLabelTitle>{{item.label}}</div>\n            <div euimLabel euimLabelMeta class=\"eui-u-text-uppercase\">\n              {{item.code}}\n            </div>\n          </ion-label>\n          @if (selectedLanguage?.code===item.code) {\n            <ion-buttons>\n              <ion-button  fill=\"clear\" >\n                <ion-icon name=\"checkmark\" slot=\"icon-only\" color=\"primary\"></ion-icon>\n              </ion-button>\n            </ion-buttons>\n          }\n        </ion-item>\n      }\n    </ion-list>\n  }\n  @if (results.length < 1) {\n    <euim-empty-list-placeholder euimMarginTopLarge\n      class=\"euim-language-selector__empty-placeholder\">\n    </euim-empty-list-placeholder>\n  }\n</ion-content>\n\n" }]
        }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i2.EuimAppService }, { type: i3.ModalController }, { type: i1.I18nService }] });
//# sourceMappingURL=data:application/json;base64, 