import * as i3 from '@angular/common';
import { DOCUMENT, CommonModule, NgIf } from '@angular/common';
import * as i4 from '@angular/forms';
import { Validators, FormGroup, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i1$1 from '@angular/cdk/layout';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import * as i4$1 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import * as i1 from '@angular/material/dialog';
import { MatDialogTitle, MatDialogRef, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogModule } from '@angular/material/dialog';
import * as i9 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import * as i2$1 from '@angular/material/core';
import { MAT_NATIVE_DATE_FORMATS, NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
import * as i0 from '@angular/core';
import { signal, Injectable, Inject, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, Host, Optional, EventEmitter, Output, effect, Directive, inject, DestroyRef, ViewChild, Injector, HostListener, ViewContainerRef, ContentChild, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { BehaviorSubject, Subject, fromEvent, debounceTime, auditTime } from 'rxjs';
import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
import { ComponentPortal } from '@angular/cdk/portal';
import * as i2 from '@angular/cdk/overlay';

/**
 * This file contains translations for static translation keys used by Fudis components. These are
 * not supposed to be modified by the using application.
 */
/**
 * English translations
 */
const en = {
    BREADCRUMBS: { PREFIX: 'Breadcrumbs' },
    REQUIRED: 'Required',
    DATEPICKER: {
        CALENDAR: 'Calendar',
        CLOSE: 'Close calendar',
        OPEN: 'Open calendar',
        PLACEHOLDER: 'dd.mm.yyyy',
        PREV_MONTH: 'Previous month',
        NEXT_MONTH: 'Next month',
        PREV_YEAR: 'Previous year',
        NEXT_YEAR: 'Next year',
        PREV_MULTIYEAR: 'Previous 24 years',
        NEXT_MULTIYEAR: 'Next 24 years',
        SWITCH_MONTH_VIEW: 'Switch to month view',
        SWITCH_MULTIYEAR_VIEW: 'Switch to year view',
        VALIDATION: {
            START_DATE_INVALID: 'Start date cannot be after end date',
            END_DATE_INVALID: 'End date cannot be before start date',
            DATE_PARSE: 'Invalid date format',
        },
    },
    DIALOG: { CLOSE: 'Close' },
    DROPDOWNMENU: {
        ITEM: {
            DISABLED: 'Disabled',
        },
    },
    ERROR_SUMMARY: {
        TITLE: 'The information is incomplete or incorrect. Please correct the following items:',
    },
    INPUT_WITH_LANGUAGE_OPTIONS: {
        LANGUAGE: 'Language',
        MISSING: 'Missing',
        MAX_LENGTH: 'characters used',
    },
    LINK: {
        EXTERNAL_LINK: '(opens in a new tab)',
    },
    SELECT: {
        DISABLED: 'Disabled',
        MULTISELECT: {
            REMOVE_ITEM: 'Remove selections',
        },
        AUTOCOMPLETE: {
            CLEAR: 'Clear selection',
            NO_RESULTS: 'No results found',
            SHOWING: 'Showing',
            RESULTS: 'results',
        },
    },
    IMAGE: {
        FUNIDATA_LOGO: 'Funidata homepage',
    },
    ATTENTION: 'Attention',
    LOADING_SPINNER: {
        VISIBLE_LABEL: 'Loading',
        PAGE_LOADING: 'Page is loading',
        PAGE_LOAD_FINISHED: 'Page load finished',
    },
    LANGUAGE_BADGE: {
        ARIA_LABEL: {
            FI: 'Change translation to Finnish',
            SV: 'Change translation to Swedish',
            EN: 'Change translation to English',
            TRANSLATIONS: 'Translations',
            SELECTED: '(Selected)',
            MISSING_TRANSLATION: '(Missing translation)',
        },
    },
    TEXTAREA: {
        MAX_LENGTH: 'characters used',
    },
    TEXTINPUT: {
        MAX_LENGTH: 'characters used',
    },
    ALERT: {
        HEADING_LABEL: 'Notifications - Number of notifications',
    },
};
/**
 * Finnish translations
 */
const fi = {
    BREADCRUMBS: { PREFIX: 'Murupolku' },
    REQUIRED: 'Pakollinen',
    DATEPICKER: {
        CALENDAR: 'Kalenteri',
        CLOSE: 'Sulje kalenteri',
        OPEN: 'Avaa kalenteri',
        PLACEHOLDER: 'pp.kk.vvvv',
        PREV_MONTH: 'Edellinen kuukausi',
        NEXT_MONTH: 'Seuraava kuukausi',
        PREV_YEAR: 'Edellinen vuosi',
        NEXT_YEAR: 'Seuraava vuosi',
        PREV_MULTIYEAR: 'Edelliset 24 vuotta',
        NEXT_MULTIYEAR: 'Seuraavat 24 vuotta',
        SWITCH_MONTH_VIEW: 'Vaihda kuukausinäkymään',
        SWITCH_MULTIYEAR_VIEW: 'Vaihda vuosinäkymään',
        VALIDATION: {
            START_DATE_INVALID: 'Alkamispäivän on oltava ennen päättymispäivää',
            END_DATE_INVALID: 'Päättymispäivän on oltava alkamispäivän jälkeen',
            DATE_PARSE: 'Virheellinen päivämääräformaatti.',
        },
    },
    DIALOG: { CLOSE: 'Sulje' },
    DROPDOWNMENU: {
        ITEM: {
            DISABLED: 'Ei valittavissa',
        },
    },
    ERROR_SUMMARY: {
        TITLE: 'Tiedoissa on puutteita tai virheitä. Korjaa seuraavat kohdat:',
    },
    INPUT_WITH_LANGUAGE_OPTIONS: {
        LANGUAGE: 'Kieli',
        MISSING: 'Puuttuu',
        MAX_LENGTH: 'merkkiä käytetty',
    },
    LINK: {
        EXTERNAL_LINK: '(aukeaa uuteen välilehteen)',
    },
    SELECT: {
        DISABLED: 'Ei valittavissa',
        MULTISELECT: {
            REMOVE_ITEM: 'Poista valintoja',
        },
        AUTOCOMPLETE: {
            CLEAR: 'Tyhjennä valinta',
            NO_RESULTS: 'Haku ei palauttanut yhtään tulosta',
            SHOWING: 'Näytetään',
            RESULTS: 'tulosta',
        },
    },
    IMAGE: {
        FUNIDATA_LOGO: 'Funidatan kotisivut',
    },
    ATTENTION: 'Huomio',
    LOADING_SPINNER: {
        VISIBLE_LABEL: 'Ladataan',
        PAGE_LOADING: 'Sivua ladataan',
        PAGE_LOAD_FINISHED: 'Sivu on ladattu',
    },
    LANGUAGE_BADGE: {
        ARIA_LABEL: {
            FI: 'Vaihda käännöskieleksi Suomi',
            SV: 'Vaihda käännöskieleksi Ruotsi',
            EN: 'Vaihda käännöskieleksi Englanti',
            TRANSLATIONS: 'Käännöskielet',
            SELECTED: '(Valittuna)',
            MISSING_TRANSLATION: '(Käännös puuttuu)',
        },
    },
    TEXTAREA: {
        MAX_LENGTH: 'merkkiä käytetty',
    },
    TEXTINPUT: {
        MAX_LENGTH: 'merkkiä käytetty',
    },
    ALERT: {
        HEADING_LABEL: 'Ilmoitukset - Ilmoituksia yhteensä',
    },
};
/**
 * Swedish translations
 */
const sv = {
    BREADCRUMBS: { PREFIX: 'Länkstig' },
    REQUIRED: 'Obligatorisk',
    DATEPICKER: {
        CALENDAR: 'Kalender',
        CLOSE: 'Stäng kalender',
        OPEN: 'Öppna kalender',
        PLACEHOLDER: 'dd.mm.åååå',
        PREV_MONTH: 'Förra månaden',
        NEXT_MONTH: 'Nästa månad',
        PREV_YEAR: 'Förra året',
        NEXT_YEAR: 'Nästa år',
        PREV_MULTIYEAR: 'Tidigare 24 år',
        NEXT_MULTIYEAR: 'Nästa 24 år',
        SWITCH_MONTH_VIEW: 'Byta till månadsvy',
        SWITCH_MULTIYEAR_VIEW: 'Byta till årsvy',
        VALIDATION: {
            START_DATE_INVALID: 'Startdatumet måste vara före slutdatumet',
            END_DATE_INVALID: 'Slutdatumet måste vara efter startdatumet',
            DATE_PARSE: 'Datumet format är felaktigt',
        },
    },
    DIALOG: { CLOSE: 'Stäng' },
    DROPDOWNMENU: {
        ITEM: {
            DISABLED: 'Inaktiverad',
        },
    },
    ERROR_SUMMARY: {
        TITLE: 'Det finns brister eller fel i uppgifterna. Korrigera följande punkter:',
    },
    INPUT_WITH_LANGUAGE_OPTIONS: {
        LANGUAGE: 'Språk',
        MISSING: 'Saknas',
        MAX_LENGTH: 'tecken använt',
    },
    SELECT: {
        DISABLED: 'Inaktiverad',
        MULTISELECT: {
            REMOVE_ITEM: 'Ta bort val',
        },
        AUTOCOMPLETE: {
            CLEAR: 'Radera val',
            NO_RESULTS: 'Inga sökresultat',
            SHOWING: 'Visas',
            RESULTS: 'resultat',
        },
    },
    IMAGE: {
        FUNIDATA_LOGO: 'Funidatas hemsida',
    },
    LINK: {
        EXTERNAL_LINK: '(öppnas i en ny flik)',
    },
    ATTENTION: 'Observera',
    LOADING_SPINNER: {
        VISIBLE_LABEL: 'Laddar',
        PAGE_LOADING: 'Sidan laddas',
        PAGE_LOAD_FINISHED: 'Sidan har laddats klart',
    },
    LANGUAGE_BADGE: {
        ARIA_LABEL: {
            FI: 'Ändra översättning till Finska',
            SV: 'Ändra översättning till Svenska',
            EN: 'Ändra översättning till Engelska',
            TRANSLATIONS: 'Översättningar',
            SELECTED: 'Vald',
            MISSING_TRANSLATION: '(Saknad översättning)',
        },
    },
    TEXTAREA: {
        MAX_LENGTH: 'tecken använt',
    },
    TEXTINPUT: {
        MAX_LENGTH: 'tecken använt',
    },
    ALERT: {
        HEADING_LABEL: 'Meddelanden - Totalt meddelanden',
    },
};

class FudisTranslationService {
    constructor() {
        /**
         * Signal for Application's translation texts, default language for translations is English
         */
        this._appTranslationsSignal = signal(en);
        /**
         * Application language, default language is English
         */
        this._appLanguage = signal('en');
        /**
         * Currently available languages in Fudis are Finnish, Swedish and English
         */
        this._selectableLanguages = signal(['fi', 'sv', 'en']);
    }
    /**
     * Set language of repeated texts Fudis uses for its components. E. g. 'required' text of form
     * components or help texts for screen readers for various buttons. Also as Error Summary
     * Component reloads its errors if error's language has changed, here is defined component to NOT
     * focus to the updated list on only language change.
     */
    setLanguage(language) {
        this._appLanguage.set(language);
        if (language === 'en') {
            this._appTranslationsSignal.set({ ...en });
        }
        else if (language === 'fi') {
            this._appTranslationsSignal.set({ ...fi });
        }
        else {
            this._appTranslationsSignal.set({ ...sv });
        }
    }
    /**
     * Get current language of Fudis configs
     */
    getLanguage() {
        return this._appLanguage();
    }
    /**
     * Get current language as Signal
     */
    getLanguageSignal() {
        return this._appLanguage.asReadonly();
    }
    /**
     * Get application's translation config values Signal
     */
    getTranslations() {
        return this._appTranslationsSignal.asReadonly();
    }
    /**
     * Set which languages are visible in Language Badges
     */
    setSelectableLanguages(languages) {
        this._selectableLanguages.set([...languages]);
    }
    /**
     * Get visible languages of Language Badges
     */
    getSelectableLanguages() {
        return this._selectableLanguages.asReadonly();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisTranslationService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisTranslationService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: () => [] });

class FudisIdService {
    constructor() {
        this._idData = {
            components: {
                alert: [],
                autocomplete: [],
                'body-text': [],
                checkbox: [],
                button: [],
                'autocomplete-multi-select': [],
                datepicker: [],
                dialog: [],
                dropdown: [],
                'error-message': [],
                expandable: [],
                fieldset: [],
                form: [],
                guidance: [],
                heading: [],
                'localized-text-group': [],
                link: [],
                popover: [],
                section: [],
                'text-area': [],
                'text-input': [],
                'validator-error-message': [],
            },
            parents: {
                breadcrumbs: {},
                'checkbox-group': {},
                'language-badge-group': {},
                'radio-button-group': {},
            },
            grandParents: {
                'description-list': {},
                'dropdown-menu': {},
                select: {},
                multiselect: {},
            },
        };
    }
    /**
     * Get collected ID data
     */
    getIdData() {
        return this._idData;
    }
    /* ------------------
     * Basic Id for single leveled components. E. g. Button
     * ------------------
     * /
  
    /**
     * Get an id and add it to collection for a single component. E.g. 'fudis-button-1'
     */
    getNewId(componentType) {
        const orderNumber = this._idData.components[componentType].length + 1;
        const newId = `fudis-${componentType}-${orderNumber}`;
        this.addNewId(componentType, newId);
        return newId;
    }
    /**
     * Add an id to collection of single components
     */
    addNewId(componentType, newId) {
        this._idData.components[componentType].push(newId);
    }
    /* ------------------
     * Ids' for two leveled components. E. g. Breadcrumbs and Breadcrumbs Item
     * ------------------
     */
    /**
     * Get an id and add it to collection for a parent component. E.g. 'fudis-breadcrumbs-1'
     */
    getNewParentId(componentType) {
        const orderNumber = Object.keys(this._idData.parents[componentType]).length + 1;
        const newId = `fudis-${componentType}-${orderNumber}`;
        this.addNewParentId(componentType, newId);
        return newId;
    }
    /**
     * Add id to collection of parents
     */
    addNewParentId(componentType, newId) {
        this._idData.parents[componentType][newId] = [];
    }
    /**
     * Get an id and add it to collection for a child component. E.g. 'fudis-breadcrumbs-1-item-1'
     */
    getNewChildId(parentType, parentId) {
        let newId = '';
        const orderNumber = Object.keys(this._idData.parents[parentType]?.[parentId]).length + 1;
        if (orderNumber) {
            newId = `${parentId}-item-${orderNumber}`;
            this._idData.parents[parentType][parentId].push(newId);
        }
        return newId;
    }
    getAllChildrenIds(parentType, parentId) {
        return this._idData.parents[parentType]?.[parentId];
    }
    /**
     * Add id to collection of parents children
     */
    addNewChildId(parentType, parentId, customId) {
        this._idData.parents[parentType]?.[parentId].push(customId);
    }
    /* ------------------
     * Ids' for three leveled components. E. g. Select, SelectGroup and Select Option and DL, DL Item, DL Term & Details
     * ------------------
     */
    /**
     * Get an id and add it to collection for a grand parent type components
     */
    getNewGrandParentId(componentType) {
        let newId = '';
        const orderNumber = Object.keys(this._idData.grandParents[componentType]).length + 1;
        newId = `fudis-${componentType}-${orderNumber}`;
        this.addNewGrandParentId(componentType, newId);
        return newId;
    }
    /**
     * Add grand parent id to data collection
     */
    addNewGrandParentId(componentType, newId) {
        if (componentType === 'description-list') {
            const newGrandParent = {
                id: newId,
                items: {},
            };
            this._idData.grandParents[componentType][newId] = newGrandParent;
        }
        else if (componentType === 'dropdown-menu') {
            const newGrandParent = {
                id: newId,
                groups: {},
                nonGroupedOptions: [],
            };
            this._idData.grandParents[componentType][newId] = newGrandParent;
        }
        else {
            const newGrandParent = {
                id: newId,
                groups: {},
                nonGroupedOptions: [],
            };
            this._idData.grandParents[componentType][newId] = newGrandParent;
        }
    }
    /**
     * Get an id and add it to collection for first child of grandparent. E.g. Select Group or
     * Description List Item
     */
    getNewGroupId(componentType, parentId) {
        let newId = '';
        if (this._idData.grandParents[componentType]?.[parentId]) {
            if (componentType === 'description-list') {
                const orderNumber = Object.keys(this._idData.grandParents[componentType][parentId].items).length + 1;
                newId = `${parentId}-item-${orderNumber}`;
                this._idData.grandParents[componentType][parentId].items[newId] = {
                    term: [],
                    details: [],
                };
            }
            else {
                const orderNumber = Object.keys(this._idData.grandParents[componentType][parentId].groups).length + 1;
                newId = `${parentId}-group-${orderNumber}`;
                this._idData.grandParents[componentType][parentId].groups[newId] = [];
            }
        }
        return newId;
    }
    /**
     * Add group id of grand parent to data collection
     */
    addNewGroupId(componentType, parentId, newId) {
        if (this._idData.grandParents[componentType]?.[parentId]) {
            if (componentType === 'description-list') {
                this._idData.grandParents[componentType][parentId].items[newId] = {
                    term: [],
                    details: [],
                };
            }
            else {
                this._idData.grandParents[componentType][parentId].groups[newId] = [];
            }
        }
    }
    getNewDropdownMenuId(parentId, groupParentId) {
        let newId = '';
        if (groupParentId) {
            const orderNumber = this._idData.grandParents['dropdown-menu'][parentId].groups[groupParentId].length + 1;
            newId = `${groupParentId}-option-${orderNumber}`;
            this._idData.grandParents['dropdown-menu'][parentId].groups[groupParentId].push(newId);
        }
        else {
            const orderNumber = this._idData.grandParents['dropdown-menu'][parentId].nonGroupedOptions.length + 1;
            newId = `${parentId}-option-${orderNumber}`;
            this._idData.grandParents['dropdown-menu'][parentId].nonGroupedOptions.push(newId);
        }
        return newId;
    }
    /**
     * Get an id and add it to collection for Select Options -->
     * fudis-select-4-group-2-option-g3n3ratedh4sh
     */
    getNewSelectOptionId(label, selectType, selectParentId, groupParentId) {
        const newId = FudisIdService.createSelectOptionId(selectParentId, label);
        if (groupParentId) {
            this._idData.grandParents[selectType][selectParentId].groups[groupParentId].push(newId);
        }
        else {
            this._idData.grandParents[selectType][selectParentId].nonGroupedOptions.push(newId);
        }
        return newId;
    }
    static createSelectOptionId(id, label) {
        return `${id}-option-${FudisIdService.hashLabel(label)}`;
    }
    /**
     * Djb2 hash for hashing the label for the option id. It doesn't have to be this, it can be
     * anything as long as it's fast and short
     */
    static hashLabel(label) {
        let hash = 0;
        for (let i = 0; i < label.length; i++) {
            hash = (hash * 31 + label.charCodeAt(i)) >>> 0;
        }
        return hash.toString(36);
    }
    /**
     * Get an id and add it to collection for Descrition List Term & Details -->
     * fudis-description-list-1-item-1-term & fudis-description-list-1-item-1-details-1
     */
    getNewDlGrandChilId(childType, parentDlId, parentItemId) {
        let newId = '';
        if (this._idData.grandParents['description-list']?.[parentDlId]?.items[parentItemId]) {
            const orderNumber = this._idData.grandParents['description-list'][parentDlId].items[parentItemId][childType]
                .length + 1;
            newId = `${parentItemId}-${childType}-${orderNumber}`;
            this._idData.grandParents['description-list'][parentDlId].items[parentItemId][childType].push(newId);
        }
        return newId;
    }
    getDlGrandChildrensIds(childType, parentDlId, parentItemId) {
        const allGrandChildrensIds = this._idData.grandParents['description-list']?.[parentDlId]?.items[parentItemId][childType];
        return allGrandChildrensIds;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisIdService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisIdService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

class FudisAlertService {
    constructor(_idService) {
        this._idService = _idService;
        /**
         * Current alerts
         */
        this._alerts = new BehaviorSubject([]);
    }
    /**
     * To add new alert, which will be rendered by Alert Group component. Note that 'id' doesn't
     * necessarily need to be unique. All errors with the same 'id' can be dismissed with
     * dismissAlert() using that particular 'id'.
     */
    addAlert(newAlert) {
        const htmlId = this._idService.getNewId('alert');
        const currentAlerts = this._alerts.getValue();
        this._alerts.next([
            ...currentAlerts,
            { ...newAlert, htmlId, buttonId: `${htmlId}-button`, initialFocus: true },
        ]);
    }
    /**
     * To dismiss alert by 'id' provided in 'addAlert()'. It will dismiss all alerts matching the
     * 'id'.
     */
    dismissAlert(id) {
        const filteredAlerts = this._alerts.getValue().filter((alert) => alert.id !== id);
        this._alerts.next(filteredAlerts);
    }
    /**
     * Dismisses only one alert from alert's close button click in the UI
     */
    dismissAlertFromButton(id) {
        const filteredAlerts = this._alerts.getValue().filter((alert) => alert.buttonId !== id);
        this._alerts.next(filteredAlerts);
    }
    /**
     * Dismiss all alerts
     */
    dismissAll() {
        this._alerts.next([]);
    }
    /**
     * Get alerts as an Observable
     */
    get alerts() {
        return this._alerts;
    }
    /**
     * Set 'initialFocus' attribute of alert to false, so that if same alert with link is rendered
     * again, the initial focus will not jump there anymore.
     */
    updateAlertLinkFocusState(htmlId) {
        let alertIndex;
        const tempAlerts = this._alerts.getValue();
        tempAlerts.forEach((value, index) => {
            if (value.htmlId === htmlId) {
                alertIndex = index;
            }
            if (alertIndex !== -1) {
                tempAlerts[index].initialFocus = false;
                this._alerts.next(tempAlerts);
            }
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisAlertService, deps: [{ token: FudisIdService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisAlertService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisAlertService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: FudisIdService }] });

class FudisFocusService {
    constructor(_document) {
        this._document = _document;
        /**
         * List of ignored id's
         */
        this._ignoreInitialFocusList = [];
    }
    /**
     * Get target HTML element to focus
     */
    getFocusTarget() {
        return this._focusTarget;
    }
    /**
     * Set focus target if it's not alert close button
     */
    setFocusTarget(target) {
        if (!target.classList.contains('fudis-alert__close')) {
            this._focusTarget = target;
        }
    }
    /**
     * Focus target element by id. If focusable element is not available when function is called, it
     * will repeatively call itself until try counter is full.
     *
     * @param id Target to focus
     * @param tryCounter How many times function should try to focus to given id
     */
    focusToElementById(id, numberOfTries = 100) {
        setTimeout(() => {
            const element = this._document.getElementById(id);
            if (element) {
                element.focus();
            }
            else if (numberOfTries > 0) {
                this.focusToElementById(id, numberOfTries - 1);
            }
        }, 50);
    }
    /**
     * Add component with given id to ignore list, so that initialFocus is ignored with that. Used
     * e.g. in a form where same component is added multiple times when user clicks 'New item' or
     * similar and focus is wanted to move there except with 'item-id-x'.
     */
    addToIgnoreList(id) {
        if (!this._ignoreInitialFocusList.includes(id)) {
            this._ignoreInitialFocusList.push(id);
        }
    }
    /**
     * Remove id from ignore initialFocus list
     */
    removeFromIgnoreList(id) {
        if (this._ignoreInitialFocusList.includes(id)) {
            this._ignoreInitialFocusList = this._ignoreInitialFocusList.filter((item) => {
                return item !== id;
            });
        }
    }
    /**
     * Get list of ignored id's
     */
    getIgnoreList() {
        return this._ignoreInitialFocusList;
    }
    /**
     * Check if current id is in the ignored list
     */
    isIgnored(id) {
        if (this._ignoreInitialFocusList.includes(id)) {
            return true;
        }
        return false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisFocusService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisFocusService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisFocusService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }] });

class FudisDialogService {
    constructor(ngMaterialDialog) {
        this.ngMaterialDialog = ngMaterialDialog;
        this._dialogOpen = new BehaviorSubject(false);
    }
    /**
     * Open new dialog.
     *
     * @param component Component or template to show in the dialog.
     * @param config Optional configuration object. Use the `data` field to inject data into
     *   `component`.
     * @returns Reference to the dialog that was opened.
     */
    open(component, config) {
        return this.ngMaterialDialog.open(component, FudisDialogService._createConfig(config));
    }
    /**
     * Close opened Dialog
     *
     * @param dialogResult Data sent to Component which opened this dialog.
     */
    close(dialogResult) {
        const currentDialogs = this.ngMaterialDialog.openDialogs;
        if (currentDialogs.length > 0) {
            currentDialogs?.[currentDialogs.length - 1].close(dialogResult);
        }
    }
    /**
     * Close all instances of Dialogs
     */
    closeAll() {
        this.ngMaterialDialog.closeAll();
    }
    /**
     * Get dialog open status
     */
    getDialogOpenStatus() {
        return this._dialogOpen;
    }
    /**
     * Set dialog open
     */
    setDialogOpenStatus(value) {
        this._dialogOpen.next(value);
    }
    /**
     * @returns Currently open Dialogs
     */
    dialogsOpen() {
        return this.ngMaterialDialog.openDialogs;
    }
    /**
     * Merge consumer's config with ours.
     */
    static _createConfig(userConfig = {}) {
        const overridableOptions = { hasBackdrop: true, disableClose: true, autoFocus: false };
        const forcedOptions = {
            enterAnimationDuration: 0,
            exitAnimationDuration: 0,
            panelClass: 'fudis-dialog-panel',
            backdropClass: 'fudis-dialog-backdrop',
        };
        return { ...overridableOptions, ...userConfig, ...forcedOptions };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisDialogService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisDialogService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i1.MatDialog }] });

class BreadcrumbsComponent {
    constructor(_translationService, _idService) {
        this._translationService = _translationService;
        this._idService = _idService;
        /**
         * Prefix for aria-label from Fudis translation keys
         */
        this._breadcrumbsPrefix = new BehaviorSubject(this._translationService.getTranslations()().BREADCRUMBS.PREFIX);
        this._id = this._idService.getNewParentId('breadcrumbs');
        this._breadcrumbsPrefix.next(this._translationService.getTranslations()().BREADCRUMBS.PREFIX);
    }
    /**
     * Getter for id
     */
    get id() {
        return this._id;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: FudisTranslationService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbsComponent, isStandalone: false, selector: "fudis-breadcrumbs", inputs: { label: "label" }, ngImport: i0, template: "<nav [attr.aria-label]=\"(_breadcrumbsPrefix | async) + ': ' + label\" [attr.id]=\"_id\">\n  <ul class=\"fudis-breadcrumbs\">\n    <ng-content select=\"fudis-breadcrumbs-item\" />\n  </ul>\n</nav>\n", styles: [".fudis-breadcrumbs{text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;box-sizing:border-box;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:calc(1.5rem / var(--fudis-rem-multiplier));list-style:none}.fudis-breadcrumbs-item-host:last-of-type .fudis-breadcrumbs-item__icon{display:none}.fudis-breadcrumbs-item-host .fudis-breadcrumbs-item a{color:var(--fudis-color-primary-dark);display:inline-block;position:relative;text-decoration:underline solid;font-family:Fira Sans,sans-serif;overflow-wrap:anywhere;font-size:inherit;font-weight:inherit}.fudis-breadcrumbs-item-host .fudis-breadcrumbs-item a:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}\n"], dependencies: [{ kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-breadcrumbs', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<nav [attr.aria-label]=\"(_breadcrumbsPrefix | async) + ': ' + label\" [attr.id]=\"_id\">\n  <ul class=\"fudis-breadcrumbs\">\n    <ng-content select=\"fudis-breadcrumbs-item\" />\n  </ul>\n</nav>\n", styles: [".fudis-breadcrumbs{text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;box-sizing:border-box;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:calc(1.5rem / var(--fudis-rem-multiplier));list-style:none}.fudis-breadcrumbs-item-host:last-of-type .fudis-breadcrumbs-item__icon{display:none}.fudis-breadcrumbs-item-host .fudis-breadcrumbs-item a{color:var(--fudis-color-primary-dark);display:inline-block;position:relative;text-decoration:underline solid;font-family:Fira Sans,sans-serif;overflow-wrap:anywhere;font-size:inherit;font-weight:inherit}.fudis-breadcrumbs-item-host .fudis-breadcrumbs-item a:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: FudisIdService }], propDecorators: { label: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class IconComponent {
    constructor(elementRef) {
        this.elementRef = elementRef;
        /**
         * Binding host CSS class to component wrapper
         */
        this._classes = 'fudis-icon-host';
        /**
         * Icon color
         */
        this.color = 'gray-dark';
        /**
         * Icon rotation
         */
        this.rotate = 'none';
        /**
         * CSS class list
         */
        this._classList = new BehaviorSubject([]);
        elementRef.nativeElement.style.cssText = `
      display: inline-flex;
      vertical-align: middle;
    `;
    }
    ngOnChanges(changes) {
        if (changes.icon?.currentValue !== changes.icon?.previousValue ||
            changes.color?.currentValue !== changes.color?.previousValue ||
            changes.rotate?.currentValue !== changes.rotate?.previousValue) {
            this._classList.next(this._getClasses());
        }
    }
    /**
     * Get CSS classes with correct color, rotate and size suffixes
     */
    _getClasses() {
        this._iconSize = this.icon.includes('-small') ? 'sm' : 'lg';
        const cssClasses = [
            'fudis-icon',
            `fudis-icon__color__${this.color}`,
            `fudis-icon__rotate__${this.rotate}`,
            `fudis-icon__${this._iconSize}`,
            `fudis-icon__${this.icon}`,
        ];
        return cssClasses;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: IconComponent, isStandalone: false, selector: "fudis-icon", inputs: { icon: "icon", color: "color", rotate: "rotate" }, host: { properties: { "class": "this._classes" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <ng-container *ngIf=\"icon === 'achievement'\">\n    <svg\n      id=\"achievement\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M24.373 12.384c-.277.894-.664 1.75-1.152 2.55a7.743 7.743 0 0 1-1.067-2.251 29.695 29.695 0 0 1 1.152-3.616 21.15 21.15 0 0 1 1.067 3.317ZM22.209 15.67a8.063 8.063 0 0 1-1.067 2.186 6.729 6.729 0 0 1-1.067-2.133 8.66 8.66 0 0 1 1.067-2.422c.49.722.85 1.523 1.067 2.368Z\"\n      />\n      <path\n        d=\"M24.064 17.888a10.932 10.932 0 0 1-2.9-.47 9.271 9.271 0 0 1 2.132-1.813c.984.023 1.96.177 2.902.459a9.526 9.526 0 0 1-2.134 1.824ZM22.73 20.267a9.804 9.804 0 0 1-2.634 1.066 9.826 9.826 0 0 1-2.496-1.365 9.802 9.802 0 0 1 2.634-1.067c.892.336 1.732.796 2.496 1.366ZM18.826 15.403c.347.778.549 1.613.598 2.464-.181.576-2.027 2.133-2.027 2.133a7.06 7.06 0 0 1-.597-2.475c.192-.608 2.026-2.122 2.026-2.122Z\"\n      />\n      <path\n        d=\"m18.112 19.339 3.307-1.664-2.496 2.282-4.587 2.592.416-1.216 3.36-1.994ZM7.66 12.576c.255.84.613 1.647 1.066 2.4.47-.648.83-1.369 1.067-2.133a29.196 29.196 0 0 0-1.067-3.467 21.546 21.546 0 0 0-1.067 3.2ZM9.792 15.67a8.064 8.064 0 0 0 1.067 2.186 6.73 6.73 0 0 0 1.066-2.133A8.663 8.663 0 0 0 10.86 13.3a7.56 7.56 0 0 0-1.067 2.368Z\"\n      />\n      <path\n        d=\"M7.936 17.888c.984-.025 1.96-.183 2.901-.47a9.27 9.27 0 0 0-2.133-1.813c-.983.023-1.959.177-2.901.459a9.525 9.525 0 0 0 2.133 1.824ZM11.904 21.333a9.825 9.825 0 0 0 2.496-1.365 9.802 9.802 0 0 0-2.635-1.067c-.891.336-1.732.796-2.495 1.366.821.481 1.709.84 2.634 1.066ZM13.174 15.403a7.062 7.062 0 0 0-.598 2.464c.181.576 2.027 2.133 2.027 2.133.347-.782.55-1.62.597-2.475-.192-.608-2.026-2.122-2.026-2.122Z\"\n      />\n      <path d=\"m13.888 19.339-3.307-1.664 2.496 2.282 4.587 2.592-.406-1.216-3.37-1.994Z\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'achievement-small'\"\n    ><svg\n      id=\"achievement-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M14.569 5.603a8.87 8.87 0 0 1-.904 2 6.079 6.079 0 0 1-.837-1.766c.24-.964.543-1.912.904-2.837.35.843.63 1.713.837 2.603ZM12.87 8.18c-.19.61-.473 1.19-.837 1.715a5.282 5.282 0 0 1-.837-1.673c.18-.673.463-1.313.837-1.9.384.566.667 1.195.837 1.858Z\"\n      />\n      <path\n        d=\"M14.327 9.92a8.577 8.577 0 0 1-2.276-.368 7.271 7.271 0 0 1 1.673-1.422 8.636 8.636 0 0 1 2.277.36 7.473 7.473 0 0 1-1.674 1.43ZM13.28 11.787a7.689 7.689 0 0 1-2.067.836 7.708 7.708 0 0 1-1.958-1.07 7.688 7.688 0 0 1 2.067-.838c.7.264 1.359.624 1.958 1.072ZM10.217 7.97c.271.612.43 1.266.468 1.934-.142.452-1.59 1.673-1.59 1.673a5.54 5.54 0 0 1-.468-1.941c.15-.477 1.59-1.665 1.59-1.665Z\"\n      />\n      <path\n        d=\"m9.657 11.059 2.594-1.306-1.958 1.79-3.599 2.034.327-.954 2.636-1.564ZM1.456 5.753c.2.66.481 1.292.837 1.883a5.749 5.749 0 0 0 .837-1.674 22.903 22.903 0 0 0-.837-2.72 16.904 16.904 0 0 0-.837 2.511ZM3.13 8.18c.19.61.473 1.19.837 1.715a5.28 5.28 0 0 0 .837-1.673 6.795 6.795 0 0 0-.837-1.9A5.933 5.933 0 0 0 3.13 8.18Z\"\n      />\n      <path\n        d=\"M1.674 9.92a8.577 8.577 0 0 0 2.276-.368A7.272 7.272 0 0 0 2.276 8.13 8.636 8.636 0 0 0 0 8.49a7.473 7.473 0 0 0 1.674 1.43ZM4.787 12.623a7.708 7.708 0 0 0 1.958-1.07 7.688 7.688 0 0 0-2.067-.838 7.97 7.97 0 0 0-1.958 1.072c.644.377 1.34.66 2.067.836ZM5.782 7.97a5.54 5.54 0 0 0-.469 1.934c.143.452 1.59 1.673 1.59 1.673a5.54 5.54 0 0 0 .47-1.941c-.152-.477-1.59-1.665-1.59-1.665Z\"\n      />\n      <path d=\"M6.343 11.059 3.75 9.753l1.958 1.79 3.599 2.034-.318-.954-2.645-1.564Z\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'alert'\"\n    ><svg\n      id=\"alert\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.634 8.5a1 1 0 0 1 1.73 0l7.5 13a1 1 0 0 1-.86 1.5h-15a1 1 0 0 1-.87-1.5l7.5-13Zm8.37 13.5-7.5-13-7.5 13h15Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"16.504\" cy=\"19.75\" r=\".75\" />\n      <path\n        d=\"M16.504 17.75a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 1.5 0v3a.76.76 0 0 1-.75.75Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'alert-fill'\"\n    ><svg\n      id=\"alert-fill\"\n      fill=\"none\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path fill=\"#fff\" fill-rule=\"evenodd\" d=\"m16.5 9.5 8 14h-16l8-14Z\" clip-rule=\"evenodd\" />\n      <path\n        fill=\"#B83C2E\"\n        fill-rule=\"evenodd\"\n        d=\"M15.634 9.5a1 1 0 0 1 1.73 0l7.5 13a1 1 0 0 1-.86 1.5h-15a1 1 0 0 1-.87-1.5l7.5-13Zm8.37 13.5-7.5-13-7.5 13h15Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle fill=\"#B83C2E\" cx=\"16.504\" cy=\"20.75\" r=\".75\" />\n      <path\n        fill=\"#B83C2E\"\n        d=\"M16.504 18.75a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 1.5 0v3a.76.76 0 0 1-.75.75Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'alert-small'\"\n    ><svg\n      id=\"alert-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7.186 1.47a.941.941 0 0 1 1.628 0l7.06 12.237a.942.942 0 0 1-.81 1.412H.945a.941.941 0 0 1-.819-1.412l7.06-12.236Zm7.879 12.708L8.005 1.941.945 14.178h14.12Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"8.005\" cy=\"12.06\" r=\".706\" />\n      <path\n        d=\"M8.005 10.178a.706.706 0 0 1-.706-.706V6.648a.706.706 0 1 1 1.412 0v2.824a.715.715 0 0 1-.706.706Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'archive'\"\n    ><svg\n      id=\"archive\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M25.429 11.83a.533.533 0 0 0-.533.533v10.304a1.6 1.6 0 0 1-1.6 1.6H9.78a1.6 1.6 0 0 1-1.6-1.6V12.363a.533.533 0 1 0-1.067 0v10.304a2.667 2.667 0 0 0 2.667 2.666h13.515a2.677 2.677 0 0 0 2.666-2.666V12.363a.533.533 0 0 0-.533-.534Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M8 6.4h17.066a2.667 2.667 0 0 1 2.667 2.667v1.962h-22.4V9.067A2.667 2.667 0 0 1 8 6.4ZM6.4 9.963h20.266v-.896a1.6 1.6 0 0 0-1.6-1.6H8a1.61 1.61 0 0 0-1.6 1.6v.896ZM20.267 17.248c0 .784-.636 1.419-1.42 1.419H14.23a1.419 1.419 0 0 1-1.43-1.419v-.352c0-.79.64-1.43 1.43-1.43h4.619a1.43 1.43 0 0 1 1.419 1.43v.352Zm-6.4-.352v.352a.363.363 0 0 0 .362.352h4.619a.352.352 0 0 0 .352-.352v-.352a.363.363 0 0 0-.352-.363h-4.62a.363.363 0 0 0-.362.363Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'arrow-big'\"\n    ><svg\n      id=\"arrow-big\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.925 24.534a1.6 1.6 0 0 1-1.6-1.6v-9.93l-3.06 3.064a1.596 1.596 0 0 1-2.259.005 1.598 1.598 0 0 1-.011-2.258l5.792-5.87c.315-.322.75-.495 1.174-.478.39-.016.858.161 1.166.47l5.861 5.87a1.6 1.6 0 1 1-2.264 2.26l-3.2-3.202v10.07a1.6 1.6 0 0 1-1.6 1.6L36.267 16\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'arrow-dashed'\"\n    ><svg\n      id=\"arrow-dashed\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M23.466 17.067H16v-2.134h7.466v2.134Zm-10.666 0H5.333v-2.134H12.8v2.134Z\" />\n      <path d=\"m26.506 16-6.016 4.267v-8.534L26.506 16Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'arrow-solid'\"\n    ><svg\n      id=\"arrow-solid\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M25.868 15.182a1 1 0 0 1 0 1.636l-7.865 5.539a1 1 0 0 1-1.576-.818V10.461a1 1 0 0 1 1.576-.818l7.865 5.54Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.5 16a1 1 0 0 1 1-1H20a1 1 0 1 1 0 2H6.5a1 1 0 0 1-1-1Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'back'\"\n    ><svg\n      id=\"back\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m18.684 14.403-.018-.003h-7.37l3.486-3.411c.2-.197.2-.513 0-.709a.518.518 0 0 0-.723 0l-4.25 4.16a.686.686 0 0 0 0 .986l4.25 4.16c.2.196.524.196.723 0 .2-.194.2-.512 0-.708l-3.486-3.411h7.37v.004c1.49-.037 2.667 1.19 2.667 2.662s-1.178 2.699-2.667 2.663v.004h-1.6a.533.533 0 0 0 0 1.067h1.6a3.737 3.737 0 0 0 3.733-3.734c0-2.057-1.654-3.756-3.715-3.73\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'brochure'\"\n    ><svg\n      id=\"brochure\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M11 8.5a.5.5 0 0 0-.5.5v13.5a.5.5 0 0 0 .5.5h7v-2a1.5 1.5 0 0 1 1.5-1.5h2V9a.5.5 0 0 0-.5-.5H11Zm9.793 12H19.5a.5.5 0 0 0-.5.5v1.293l1.793-1.793ZM9.5 9A1.5 1.5 0 0 1 11 7.5h10A1.5 1.5 0 0 1 22.5 9v11.207L18.707 24H11a1.5 1.5 0 0 1-1.5-1.5V9Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12 12a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'bullets'\"\n    ><svg\n      id=\"bullets\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <circle cx=\"7\" cy=\"11\" r=\"1\" />\n      <rect width=\"16\" height=\"2\" x=\"10\" y=\"10\" rx=\"1\" />\n      <circle cx=\"7\" cy=\"16\" r=\"1\" />\n      <rect width=\"16\" height=\"2\" x=\"10\" y=\"15\" rx=\"1\" />\n      <circle cx=\"7\" cy=\"21\" r=\"1\" />\n      <rect width=\"16\" height=\"2\" x=\"10\" y=\"20\" rx=\"1\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'calendar'\"\n    ><svg\n      id=\"calendar\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.394 24.533c.552 0 1.073-.813 1.073-1.365v-12.8c0-.553-.52-.768-1.073-.768H19.2V8.533h-1.066V9.6h-4.267V8.533H12.8V9.6H9.594c-.518 0-1.06.244-1.06.768v12.8c0 .553.507 1.365 1.06 1.365h12.8ZM9.6 10.667h3.2v1.066h1.067v-1.066h4.267v1.066H19.2v-1.066h3.2V12.8H9.6v-2.133Zm0 3.2h12.8v8.868c0 .276-.163.732-.44.732h-12c-.275 0-.36-.456-.36-.732v-8.868Zm4.267 5.333h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Zm3.2 3.2h-2.134v2.133h2.133V19.2Zm0-3.2h-2.134v2.133h2.133V16Zm3.2 3.2h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'change-log'\"\n    ><svg\n      id=\"change-log\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.5 15.717V11.2h-1v5.083l2.91 1.746.514-.858-2.424-1.454Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M9.066 16a6.934 6.934 0 1 1 3.736 6.152l.494-.95A5.862 5.862 0 1 0 10.138 16H9.066Z\"\n      />\n      <path d=\"M7.467 16h4.266L9.6 18.667 7.467 16Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'check'\"\n    ><svg\n      id=\"check\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.726 9.437a1.5 1.5 0 0 1 .371 2.088l-7.448 10.667a1.5 1.5 0 0 1-2.347.143l-4.285-4.779a1.5 1.5 0 0 1 2.234-2.003l3.022 3.37 6.364-9.115a1.5 1.5 0 0 1 2.089-.371Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'check-indeterminate-small'\"\n    ><svg\n      id=\"check-indeterminate-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <rect width=\"12\" height=\"3\" x=\"2\" y=\"7\" rx=\"1.5\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'check-small'\"\n    ><svg\n      id=\"check-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.572 3.18a1 1 0 0 1 .248 1.392l-5.713 8.182a1 1 0 0 1-1.564.095L3.256 9.184a1 1 0 1 1 1.489-1.335l2.444 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'checkmark-circle'\"\n    ><svg\n      id=\"checkmark-circle\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M21.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.489-1.335l2.444 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'chevron'\"\n    ><svg\n      id=\"chevron\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'chevron-ring'\"\n    ><svg\n      id=\"chevron-ring\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g fill-rule=\"evenodd\" clip-path=\"url(#a)\" clip-rule=\"evenodd\">\n        <path\n          d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        />\n        <path\n          d=\"M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18Z\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'chevron-ring-fill'\"\n    ><svg\n      id=\"chevron-ring-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#484848\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill=\"#484848\"\n        fill-rule=\"evenodd\"\n        d=\"M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'clock'\"\n    ><svg\n      id=\"clock\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.066 16a6.933 6.933 0 1 1 13.867 0 6.933 6.933 0 0 1-13.867 0Zm12.8 0A5.867 5.867 0 0 0 16 10.133 5.877 5.877 0 0 0 10.133 16a5.867 5.867 0 0 0 11.733 0Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.5 15.71V11.2h-1v5.09l2.908 1.659.496-.869-2.404-1.37Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M11.2 15.467h1.067v1.067H11.2zM19.733 15.467H20.8v1.067h-1.067zM15.467 19.733h1.067V20.8h-1.067z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'close'\"\n    ><svg\n      id=\"close\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z\"\n      />\n      <path\n        d=\"M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'close-big'\"\n    ><svg\n      id=\"close-big\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M25.566 6.403a.75.75 0 0 1 0 1.06L7.464 25.567a.75.75 0 0 1-1.06-1.061L24.504 6.403a.75.75 0 0 1 1.06 0Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M6.403 6.403a.75.75 0 0 1 1.06 0l18.103 18.102a.75.75 0 0 1-1.06 1.06L6.402 7.465a.75.75 0 0 1 0-1.061Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'code'\"\n    ><svg\n      id=\"code\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"m7.563 16.277 3.755 2.464c.15.107.256.203.32.299a.609.609 0 0 1 .096.341.66.66 0 0 1-.086.352.304.304 0 0 1-.256.128.524.524 0 0 1-.16-.032c-.053-.032-.138-.074-.245-.149l-4.064-2.71c-.01 0-.032-.01-.053-.031-.31-.203-.47-.427-.47-.662 0-.234.15-.458.46-.661.031-.021.052-.032.063-.043l4.064-2.666c.096-.054.17-.107.235-.128.064-.022.117-.043.17-.043.107 0 .192.043.246.128a.53.53 0 0 1 .096.33.645.645 0 0 1-.096.353.971.971 0 0 1-.32.298l-3.755 2.432ZM14.508 20.235c-.107.245-.214.416-.31.501a.484.484 0 0 1-.341.128.484.484 0 0 1-.352-.15.468.468 0 0 1-.15-.362c0-.043.011-.085.022-.139.01-.053.032-.106.053-.16l4.555-7.669c.117-.256.224-.427.32-.512a.488.488 0 0 1 .33-.139c.15 0 .267.054.374.15.107.096.15.213.15.352 0 .042-.011.085-.022.128a.537.537 0 0 1-.053.138l-4.576 7.734ZM24.875 16.277l-3.744-2.432a1.164 1.164 0 0 1-.33-.298.609.609 0 0 1-.097-.342c0-.138.032-.256.085-.33a.286.286 0 0 1 .246-.128c.053 0 .106.01.17.042.064.022.14.075.235.139l4.064 2.667c.01.01.032.021.064.042.31.192.459.416.459.662 0 .234-.15.458-.448.661a.608.608 0 0 1-.075.043l-4.064 2.709-.021.01c-.182.107-.31.171-.384.171a.286.286 0 0 1-.246-.128c-.064-.085-.085-.202-.085-.352 0-.128.032-.234.096-.341.064-.096.17-.203.33-.299l3.745-2.496Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'decrease-indent'\"\n    ><svg\n      id=\"decrease-indent\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.066 16.533h9.6v-1.067h-9.6v1.067ZM9.066 14.4h9.6v-1.067h-9.6V14.4ZM9.066 12.267h13.867V11.2H9.066v1.067ZM9.066 18.667h9.6V17.6h-9.6v1.067ZM9.066 20.8h13.867v-1.067H9.066V20.8ZM19.733 16l3.2 2.133v-4.266L19.733 16Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'delete'\"\n    ><svg\n      id=\"delete\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.067 25.067v-16h13.867v16H9.067ZM10.134 24h11.733V10.133H10.134V24Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M15.467 12.267h1.067V20.8h-1.067zM12.267 14.4h1.067v6.4h-1.067zM18.667 14.4h1.067v6.4h-1.067zM6.934 9.067h18.133v1.067H6.934zM13.334 6.933v2.134h1.067V8h3.2v1.067h1.066V6.933h-5.333Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'dot'\"\n    ><svg\n      id=\"dot\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <circle cx=\"16\" cy=\"16\" r=\"4.267\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'edit'\"\n    ><svg\n      id=\"edit\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"m7.797 24.235 4.64-1.248-3.381-3.382-1.26 4.63ZM9.637 19.04l8.794-8.795 3.387 3.386-8.795 8.795-3.386-3.387ZM22.517 12.907l1.494-1.483a.768.768 0 0 0 0-1.067L21.706 8a.757.757 0 0 0-1.066 0l-1.494 1.483 3.371 3.424Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'editor'\"\n    ><svg\n      id=\"editor\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m11.246 16.85 4.258-9.58a.532.532 0 0 1 .713-.29c.133.058.23.165.279.29l4.258 9.58a.533.533 0 0 1-.975.433L18.498 14.4h-4.996l-1.281 2.883a.533.533 0 1 1-.975-.433Zm2.73-3.517h4.048L16 8.78l-2.023 4.553ZM13.679 24a1.004 1.004 0 1 1-2.008 0 1.004 1.004 0 0 1 2.008 0Zm5.521-1.004a1.004 1.004 0 1 0 0 2.008 1.004 1.004 0 0 0 0-2.008ZM14.934 24a1.004 1.004 0 1 1 2.008 0 1.004 1.004 0 0 1-2.008 0Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'exclamation-mark-circle'\"\n    ><svg\n      id=\"exclamation-mark-circle\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'exclamation-mark-circle-fill'\"\n    ><svg\n      id=\"exclamation-mark-circle-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <circle cx=\"16\" cy=\"15\" r=\"10\" fill=\"#B83C2E\" />\n      <path\n        fill=\"#fff\"\n        d=\"M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'exclamation-mark-circle-small'\"\n    ><svg\n      id=\"exclamation-mark-circle-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M8 10.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1M8 9c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1\"\n      />\n      <path d=\"M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m1 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'eye'\"\n    ><svg\n      id=\"eye\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.75 10.23c1.451-.01 2.894.21 4.274.654l.14.045.094.114a5.737 5.737 0 1 1-8.87 0l.387.317-.151-.476a13.863 13.863 0 0 1 4.127-.653Zm-3.68 1.562a4.737 4.737 0 1 0 7.505-.001 12.596 12.596 0 0 0-3.817-.56h-.001c-1.25.007-2.492.196-3.686.56Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path d=\"M15.807 12.01a2.667 2.667 0 1 0 2.667 2.667 2.656 2.656 0 0 0-2.667-2.666Z\" />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M6.307 15.915Zm.143-.235a7.3 7.3 0 0 1 .34-.478 9.683 9.683 0 0 1 1.62-1.638c1.49-1.19 3.854-2.397 7.344-2.397s5.854 1.206 7.344 2.397a9.686 9.686 0 0 1 1.62 1.638c.148.192.26.356.34.478a7.37 7.37 0 0 1-.341.478 9.715 9.715 0 0 1-1.623 1.638c-1.491 1.191-3.856 2.397-7.34 2.397-3.485 0-5.849-1.206-7.34-2.397a9.717 9.717 0 0 1-1.623-1.638 7.327 7.327 0 0 1-.34-.478Zm19.192 0c.442-.234.442-.234.441-.235v-.002l-.003-.005-.008-.014a3.061 3.061 0 0 0-.136-.227 8.103 8.103 0 0 0-.426-.605 10.678 10.678 0 0 0-1.788-1.81c-1.646-1.315-4.226-2.615-7.968-2.615s-6.322 1.3-7.968 2.616a10.678 10.678 0 0 0-1.788 1.809 8.111 8.111 0 0 0-.533.781 3.033 3.033 0 0 0-.029.05l-.008.015-.002.005-.001.002.44.235-.44-.234-.125.235.124.234.442-.235-.442.235.001.001.001.002.003.004.008.015a3.798 3.798 0 0 0 .135.226c.095.15.236.358.428.606.383.496.969 1.153 1.79 1.808 1.647 1.316 4.227 2.616 7.964 2.616s6.316-1.3 7.964-2.616a10.719 10.719 0 0 0 1.79-1.808 8.113 8.113 0 0 0 .535-.782l.028-.05.008-.015.003-.004v-.002s.001-.001-.44-.236Zm0 0 .441.235.125-.234-.125-.236-.441.235Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'eye-blind'\"\n    ><svg\n      id=\"eye-blind\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M15.8 11.2c-2.1 0-3.8.4-5.1 1-.9 1.8-.7 4 .4 5.7l.7-.7c-1-1.6-1-3.8.3-5.4 1.2-.4 2.4-.6 3.7-.6 0 .1.1.1.1.1.6 0 1.2 0 1.8.1l.1-.1c-.7-.1-1.4-.1-2-.1ZM20.5 12l-.5.5c1 1.9.6 4.2-1 5.7-.9.9-2.1 1.3-3.2 1.3-.8 0-1.5-.2-2.2-.5l-.7.7c.3.2.6.3.9.4.6.1 1.2.1 1.9.1.8 0 1.5-.1 2.2-.2.7-.3 1.3-.6 1.8-1.2 1.8-1.7 2.3-4.4 1.3-6.6-.1 0-.3-.1-.5-.2Z\"\n      />\n      <path\n        d=\"M15.8 12c-1.5 0-2.7 1.2-2.7 2.7 0 .4.1.7.2 1l3.5-3.5c-.3-.1-.6-.2-1-.2ZM18.4 14.1l-3.2 3.2c.2 0 .4.1.6.1 1.5 0 2.7-1.2 2.7-2.7 0-.2 0-.4-.1-.6Z\"\n      />\n      <path\n        d=\"M15.8 10.2c-3.7 0-6.3 1.3-8 2.6-.8.6-1.4 1.3-1.8 1.8-.2.2-.3.5-.4.6l-.1.2v.1l.4.2-.4.2v.1l.1.2c.1.1.2.4.4.6.4.5 1 1.2 1.8 1.8.5.4 1 .7 1.6 1.1l.7-.7c-.7-.3-1.2-.7-1.7-1.1-.7-.6-1.3-1.2-1.6-1.6-.1-.2-.3-.4-.3-.5.1-.1.2-.3.3-.5.3-.4.9-1 1.6-1.6.6-.5 1.3-1 2.2-1.4 1.3-.6 3-1 5.1-1 .7 0 1.3 0 1.9.1l.9-.9c-.8-.2-1.7-.3-2.7-.3ZM26.1 15.4l-.4.2.4.2.1-.2-.1-.2Zm-4.9-4.1-.7.7c.2.1.4.2.6.2.8.4 1.5.8 2.1 1.3.7.6 1.3 1.2 1.6 1.6.1.2.3.4.3.5-.1.1-.2.3-.3.5-.3.4-.9 1-1.6 1.6-1.2.9-2.8 1.9-5.2 2.2-.7.1-1.4.2-2.2.2-.7 0-1.3 0-1.9-.1-.4-.1-.8-.1-1.2-.2l-.8.8c1.1.3 2.4.5 3.9.5 3.7 0 6.3-1.3 8-2.6.8-.7 1.4-1.3 1.8-1.8.2-.2.3-.5.4-.6v-.2l-.4-.2.4-.2v-.1l-.1-.2c-.1-.1-.2-.4-.4-.6-.4-.5-1-1.2-1.8-1.8-.6-.6-1.5-1.1-2.5-1.5Z\"\n      />\n      <path d=\"m5.9 15.7-.4-.2-.1.2.1.2.4-.2Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'fail'\"\n    ><svg\n      id=\"fail\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.11 9.934a1.545 1.545 0 1 0-2.184 2.168l10.06 10.053c.284.289.67.454 1.075.461h.033c.4-.01.783-.171 1.07-.451l.007-.007.007-.007c.586-.6.586-1.557 0-2.157L12.11 9.934Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M20.093 9.724a1.553 1.553 0 0 1 2.194 2.17l-.028.035L12.02 22.162c-.289.282-.673.444-1.077.454h-.033a1.553 1.553 0 0 1-1.084-2.637l.006-.006L20.061 9.75l.032-.026Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'hourglass'\"\n    ><svg\n      id=\"hourglass\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m16.896 16 3.904-2.848V9.6h1.067V8.533H10.134V9.6H11.2v3.552L15.095 16 11.2 18.848V22.4h-1.067v1.067h11.733V22.4H20.8v-3.552L16.896 16Zm-4.628-3.392L16 15.338l3.733-2.73V9.6h-7.466v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33L16 14.016l-2.666-1.952Zm5.333 8.203h-5.333v1.066h5.333v-1.066Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'increase-indent'\"\n    ><svg\n      id=\"increase-indent\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.333 16.533h9.6v-1.067h-9.6v1.067ZM13.333 18.667h9.6V17.6h-9.6v1.067ZM9.066 20.8h13.867v-1.067H9.066V20.8ZM13.333 14.4h9.6v-1.067h-9.6V14.4ZM9.066 12.267h13.867V11.2H9.066v1.067ZM9.066 18.133l3.2-2.133-3.2-2.133v4.266Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info'\"\n    ><svg\n      id=\"info\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" />\n      <path d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info-circle'\"\n    ><svg\n      id=\"info-circle\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" />\n      <path d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info-circle-fill'\"\n    ><svg\n      id=\"info-circle-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path\n        fill=\"#fff\"\n        d=\"M26 16c0 5.523-4.477 10-10 10S6 21.523 6 16 10.477 6 16 6s10 4.477 10 10Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" fill=\"#1076DB\" />\n      <path fill=\"#1076DB\" d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info-circle-small'\"\n    ><svg\n      id=\"info-circle-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path d=\"M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m1 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0\" />\n      <path d=\"M8 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9 12V7H6v1h1v4H6v1h4v-1z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'junction'\"\n    ><svg\n      id=\"junction\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M19.2 8.565h-8.533L6.4 11.232l4.267 2.667H19.2V8.565ZM22.294 14.965h-8.533V20.3h8.533l4.267-2.667-4.267-2.667ZM16.427 21.365a.528.528 0 0 0-.533.534v3.2c0 .298.234.533.533.533a.528.528 0 0 0 .533-.533v-3.2a.528.528 0 0 0-.533-.534ZM16.427 7.477a.528.528 0 0 0 .533-.533V5.867a.528.528 0 0 0-.533-.534.528.528 0 0 0-.533.534v1.077c0 .299.234.533.533.533Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'link'\"\n    ><svg\n      id=\"link\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M20.707 11.121a1 1 0 0 0-1.414 0l-.354.354a1 1 0 0 1-1.414-1.414l.354-.354a3 3 0 0 1 4.242 0l.707.707a3 3 0 0 1 0 4.243l-4.242 4.242a2.5 2.5 0 0 1-3.536 0 1 1 0 1 1 1.415-1.414.5.5 0 0 0 .707 0l4.242-4.242a1 1 0 0 0 0-1.415l-.707-.707Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M11.868 21.374a1 1 0 0 0 1.414 0l.354-.353a1 1 0 0 1 1.414 1.414l-.354.354a3 3 0 0 1-4.242 0l-.707-.708a3 3 0 0 1 0-4.242l3.889-3.89a3 3 0 0 1 4.242 0l.354.354a1 1 0 1 1-1.414 1.414l-.354-.353a1 1 0 0 0-1.414 0l-3.889 3.89a1 1 0 0 0 0 1.413l.707.707Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'list-add'\"\n    ><svg\n      id=\"list-add\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.5 6.5a.5.5 0 0 1 .5.5v2h2.5V7a.5.5 0 0 1 1 0v2H19V7a.5.5 0 0 1 1 0v2h1a1 1 0 0 1 1 1v1a4.978 4.978 0 0 0-3 1h-6.5a.5.5 0 0 0 0 1H18a4.977 4.977 0 0 0-.9 2h-4.6a.5.5 0 0 0 0 1H17a5 5 0 0 0 5 5v1a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h1V7a.5.5 0 0 1 .5-.5Zm0 11.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22 12.5a.5.5 0 0 1 .5.5v2.5H25a.5.5 0 0 1 0 1h-2.5V19a.5.5 0 0 1-1 0v-2.5H19a.5.5 0 0 1 0-1h2.5V13a.5.5 0 0 1 .5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'list-minus'\"\n    ><svg\n      id=\"list-minus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.5 6.5a.5.5 0 0 1 .5.5v2h2.5V7a.5.5 0 0 1 1 0v2H19V7a.5.5 0 0 1 1 0v2h1a1 1 0 0 1 1 1v1a4.978 4.978 0 0 0-3 1h-6.5a.5.5 0 0 0 0 1H18a4.977 4.977 0 0 0-.9 2h-4.6a.5.5 0 0 0 0 1H17a5 5 0 0 0 5 5v1a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h1V7a.5.5 0 0 1 .5-.5Zm0 11.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M18.5 16a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'lock'\"\n    ><svg\n      id=\"lock\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M20.8 13.43h-1.066v-.534a3.733 3.733 0 1 0-7.467 0v.533h-1.066c-.59 0-1.067.478-1.067 1.067v6.933a1.6 1.6 0 0 0 1.6 1.6h8.533a1.6 1.6 0 0 0 1.6-1.6v-6.933c0-.59-.477-1.067-1.067-1.067Zm-7.466-.534a2.667 2.667 0 1 1 5.333 0v.533h-5.333v-.533Zm6.933 9.067a.533.533 0 0 0 .533-.534v-6.933h-9.6v6.933a.544.544 0 0 0 .534.534h8.533Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M17.6 17.163a1.6 1.6 0 1 0-2.4 1.376v1.557a.8.8 0 1 0 1.6 0v-1.557a1.59 1.59 0 0 0 .8-1.376Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'lock-open'\"\n    ><svg\n      id=\"lock-open\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.267 12.279v-.06 3.344H20.8c.59 0 1.067.477 1.067 1.066v6.934a1.6 1.6 0 0 1-1.6 1.6h-8.533a1.6 1.6 0 0 1-1.6-1.6v-6.934c0-.589.477-1.066 1.066-1.066h1.067v-3.284Zm8 11.817a.533.533 0 0 0 .533-.533v-6.934h-9.6v6.934a.544.544 0 0 0 .534.533h8.533Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M17.6 19.296a1.6 1.6 0 1 0-2.4 1.376v1.557a.8.8 0 1 0 1.6 0v-1.557a1.59 1.59 0 0 0 .8-1.376Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.268 16.106V11.66C12.268 9.708 13.976 8 16 8c2.025 0 3.733 1.708 3.733 3.66v.073h-1.067v-.073c0-1.363-1.23-2.593-2.666-2.593s-2.667 1.23-2.667 2.593v4.446h-1.066Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'magic-wand'\"\n    ><svg\n      id=\"magic-wand\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m14.264 16.686-7.643 7.717a.722.722 0 0 0 0 1.04c.147.148.294.148.588.148s.44 0 .588-.149l7.643-7.717a.722.722 0 0 0 0-1.039c-.294-.296-.882-.296-1.176 0\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M19.703 13.125c.147 0 .441 0 .588-.149l2.94-2.968a.722.722 0 0 0 0-1.039.706.706 0 0 0-1.03 0l-2.939 2.968c-.294.149-.294.594-.147.89.147.15.441.298.588.298M20.29 16.686a.706.706 0 0 0-1.028 0 .722.722 0 0 0 0 1.04l2.94 2.967c.146.149.293.149.587.149s.441 0 .588-.149a.722.722 0 0 0 0-1.039l-3.087-2.968ZM12.5 8.82a.706.706 0 0 0-1.028 0 .722.722 0 0 0 0 1.04l2.94 2.968c.146.148.293.148.587.148s.441 0 .588-.148a.722.722 0 0 0 0-1.039L12.5 8.821ZM17.351 17.577c-.44 0-.735.296-.735.742v4.007c0 .445.294.742.735.742s.735-.297.735-.742v-4.007c0-.445-.44-.742-.735-.742\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M17.351 6.446c-.44 0-.735.297-.735.742v4.007c0 .445.294.742.735.742s.735-.296.735-.742V7.188c0-.445-.44-.742-.735-.742\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.854 15.5h3.969c.44 0 .735-.298.735-.743s-.441-.742-.735-.742H9.854c-.44 0-.735.297-.735.742s.294.742.735.742\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M24.847 14.015h-3.969c-.44 0-.734.297-.734.742s.294.742.735.742h3.968c.441 0 .735-.297.735-.742s-.441-.742-.735-.742\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'mail'\"\n    ><svg\n      id=\"mail\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M24 10H8l8 7 8-7Z\" />\n      <path d=\"m16 18.5-8-7V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9.5l-8 7Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'menu'\"\n    ><svg\n      id=\"menu\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M28.8 9.067H3.2V5.333h25.6v3.734Zm0 4.8H3.2V17.6h25.6v-3.733Zm0 8.533H3.2v3.733h25.6V22.4Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'message'\"\n    ><svg\n      id=\"message\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M11 25.5V22h3.5L11 25.5Z\" />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7 11a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-9Zm3 5.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm.75-4.75a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5h-10.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'minus'\"\n    ><svg\n      id=\"minus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M10 15h12v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'minus-ring-fill'\"\n    ><svg\n      id=\"minus-ring-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path fill=\"#1076DB\" d=\"M10 15h12v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'new-tab'\"\n    ><svg\n      id=\"new-tab\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M17.571 8H23.464c.296 0 .536.24.536.536V14.429h-1.071v-4.6l-7.657 7.657-.38.379-.757-.758.38-.379 7.656-7.657h-4.6V8ZM9 10.143h7.5v1.071h-6.429V21.93h10.715V15.5h1.071V23H9V10.143Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'notebook'\"\n    ><svg\n      id=\"notebook\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13 7a.5.5 0 0 0-1 0v2h-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1h-1V7a.5.5 0 0 0-1 0v2h-2.5V7a.5.5 0 0 0-1 0v2H13V7Zm-1 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm.5-3.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7Zm-.5-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'notification'\"\n    ><svg\n      id=\"notification\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 24a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0 1a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z\"\n        clip-rule=\"evenodd\"\n      />\n      <g clip-path=\"url(#a)\">\n        <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" />\n        <path d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M8 8h16v16H8z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'numbering'\"\n    ><svg\n      id=\"numbering\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M8.897 8v4.732H7.812V9.078l-1.015.623-.483-.735L7.91 8h.987ZM7.705 13.902c.34 0 .632.06.875.182.247.121.434.285.56.49.13.205.196.432.196.679 0 .252-.051.492-.154.721-.103.229-.285.492-.546.791-.261.294-.642.667-1.14 1.12h1.938l-.112.847h-3.08v-.784c.574-.565.992-.99 1.253-1.274.261-.29.443-.53.546-.721.107-.191.161-.387.161-.588 0-.191-.056-.34-.168-.448a.582.582 0 0 0-.441-.168.845.845 0 0 0-.448.119 1.61 1.61 0 0 0-.413.371l-.65-.518a2.15 2.15 0 0 1 .699-.602c.275-.145.583-.217.924-.217ZM7.701 19.902c.331 0 .614.054.847.161.238.107.418.252.539.434.126.182.189.385.189.609 0 .285-.082.523-.245.714-.159.191-.385.329-.679.413.317.033.576.147.777.343.2.191.301.464.301.819 0 .266-.07.511-.21.735-.14.22-.348.394-.623.525-.27.13-.595.196-.973.196-.69 0-1.232-.238-1.624-.714l.595-.581c.159.159.313.275.462.35.154.07.322.105.504.105.22 0 .397-.06.532-.182.135-.121.203-.29.203-.504 0-.243-.065-.415-.196-.518-.126-.107-.317-.161-.574-.161h-.392l.119-.763h.273c.21 0 .376-.054.497-.161.121-.107.182-.259.182-.455a.49.49 0 0 0-.168-.399c-.112-.098-.266-.147-.462-.147-.331 0-.64.138-.924.413l-.546-.595a2.24 2.24 0 0 1 1.596-.637Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.347 10.232a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5ZM12.347 16.732a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5ZM12.347 22.732a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'pdf'\"\n    ><svg\n      id=\"pdf\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7.69 12.363c1.857 0 2.987.757 2.987 2.346 0 1.696-1.226 2.454-2.89 2.454h-.864v2.57H5.515v-7.37H7.69Zm-.01 3.744c.939 0 1.525-.32 1.525-1.398 0-.928-.565-1.312-1.525-1.312h-.757v2.71h.757Zm5.952-3.744c1.941 0 3.776.597 3.776 3.648 0 2.986-1.824 3.722-3.584 3.722h-2.006v-7.37h1.814Zm-.405 1.056v5.258h.693c1.099 0 2.005-.49 2.005-2.666 0-2.219-.96-2.592-2.048-2.592h-.65Zm9.525-.011h-2.613v2.208h2.272v1.045h-2.272v3.072H18.73v-7.37h4.17l-.149 1.045Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7.5 6A1.5 1.5 0 0 1 9 4.5h15A1.5 1.5 0 0 1 25.5 6v16.207L20.707 27H9a1.5 1.5 0 0 1-1.5-1.5V21h1v4.5a.5.5 0 0 0 .5.5h11v-3a1.5 1.5 0 0 1 1.5-1.5h3V6a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v5h-1V6Zm16.293 16.5H21.5a.5.5 0 0 0-.5.5v2.293l2.793-2.793Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'paperclip'\"\n    ><svg\n      id=\"paperclip\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M11 8.594a3.594 3.594 0 1 1 7.188 0V21.53a2.156 2.156 0 0 1-4.313 0V11.47a.719.719 0 1 1 1.438 0V21.53a.719.719 0 1 0 1.437 0V8.594a2.157 2.157 0 0 0-4.312 0V21.53a3.593 3.593 0 1 0 7.187 0V11.47a.719.719 0 1 1 1.438 0V21.53a5.032 5.032 0 0 1-10.063 0z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'people'\"\n    ><svg\n      id=\"people\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"34\"\n      height=\"33\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M25 17.197a6 6 0 1 0-6.367-10.164A6 6 0 0 1 21 18.197V19h2a4 4 0 0 1 4 4v1h4v-2a4 4 0 0 0-4-4h-2v-.803ZM14.353 19H15v-.465c-.231.134-.448.29-.646.465Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22 14c0 2.22-1.207 4.16-3 5.197V20h2a4 4 0 0 1 4 4v2H7v-2a4 4 0 0 1 4-4h2v-.803A6 6 0 1 1 22 14Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'person'\"\n    ><svg\n      id=\"person\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22 13c0 2.22-1.207 4.16-3 5.197V19h2a4 4 0 0 1 4 4v2H7v-2a4 4 0 0 1 4-4h2v-.803A6 6 0 1 1 22 13Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'person-small'\"\n    ><svg\n      id=\"person-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13 6a4.993 4.993 0 0 1-2 4v1h1a4 4 0 0 1 4 4v1H0v-1a4 4 0 0 1 4-4h1v-1a5 5 0 1 1 8-4Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'picker'\"\n    ><svg\n      id=\"picker\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.794 14.851a3.396 3.396 0 0 1 3.392-3.392 3.395 3.395 0 0 1 3.393 3.392 3.396 3.396 0 0 1-3.393 3.392 3.396 3.396 0 0 1-3.392-3.392m10.408 6.512-3.01-3.122a5.22 5.22 0 0 0 1.247-3.39A5.258 5.258 0 0 0 20.186 9.6a5.257 5.257 0 0 0-5.252 5.251 5.258 5.258 0 0 0 5.252 5.25c.932 0 1.807-.246 2.565-.673l3.093 3.208c.361.372.96.383 1.334.023a.915.915 0 0 0 .024-1.296\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M3.2 17.067h8.533V16H3.2v1.067ZM3.2 12.8h9.6v-1.067H3.2V12.8ZM3.2 8.533h10.667V7.467H3.2v1.066ZM3.2 21.333h9.6v-1.066H3.2v1.066ZM3.2 25.6h8.533v-1.067H3.2V25.6Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'pin-small'\"\n    ><svg\n      id=\"pin-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M8.34 4C6.5 4 5 5.52 5 7.39c0 .6.16 1.23.43 1.67l.02.04c.07.12.38.52.8 1 .86.99 2.11 2.33 2.11 2.33s1.24-1.36 2.09-2.34c.4-.47.7-.86.77-.97l.04-.07c.28-.44.43-1.07.43-1.67 0-1.86-1.5-3.38-3.35-3.38Zm0 5.24c-1.04 0-1.89-.85-1.89-1.89s.85-1.9 1.89-1.9 1.9.85 1.9 1.89-.85 1.9-1.9 1.9Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'place'\"\n    ><svg\n      id=\"place\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M21.867 8.533c0 .295-.219.534-.489.534H10.623c-.27 0-.49-.24-.49-.534 0-.294.22-.533.49-.533h10.755c.27 0 .49.239.49.533M15.623 11.89l-5.333 5.333a.534.534 0 0 0 .754.754l4.423-4.422v9.912a.533.533 0 1 0 1.067 0v-9.912l4.422 4.422a.534.534 0 0 0 .755-.754l-5.334-5.333a.534.534 0 0 0-.754 0\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'place-ring-fill'\"\n    ><svg\n      id=\"place-ring-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M23.467 21.733c-.294 0-.533-.219-.533-.489V10.49c0-.27.238-.489.533-.489.294 0 .533.219.533.489v10.755c0 .27-.239.49-.533.49ZM20.11 15.49l-5.333-5.334a.534.534 0 0 0-.754.754l4.422 4.424H8.532a.533.533 0 1 0 0 1.066h9.913l-4.422 4.423a.534.534 0 0 0 .754.754l5.333-5.334a.534.534 0 0 0 0-.754Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'plus'\"\n    ><svg\n      id=\"plus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M16 9h1v13h-1z\" />\n      <path d=\"M10 15h13v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'print'\"\n    ><svg\n      id=\"print\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <mask\n        id=\"a\"\n        width=\"20\"\n        height=\"20\"\n        x=\"6\"\n        y=\"6\"\n        maskUnits=\"userSpaceOnUse\"\n        style=\"mask-type: luminance\"\n      >\n        <path fill-rule=\"evenodd\" d=\"M6.4 6.933h19.2v18.134H6.4V6.933Z\" clip-rule=\"evenodd\" />\n      </mask>\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m21.654 24-11.414.107v-6.4c0-.214.107-.32.214-.32H21.44c.107 0 .214.106.214.32V24ZM10.24 8h11.414v1.813H10.24V8Zm12.587 16.107V22.08c.107 0 .213.107.32.107h1.173c.747 0 1.28-.64 1.28-1.387v-8.32c0-1.387-1.066-2.56-2.346-2.56h-.427V7.893c0-.533-.533-.96-1.067-.96H10.24c-.64 0-1.066.427-1.066.96V9.92h-.427c-1.28 0-2.347 1.173-2.347 2.56v8.213c0 .747.64 1.387 1.28 1.387h1.387v2.027c0 .533.533.96 1.067.96h11.413c.747 0 1.28-.427 1.28-.96Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path d=\"M11.84 20.053h8.32v-1.066h-8.32v1.066ZM11.84 22.827h8.32V21.76h-8.32v1.067Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'question-mark'\"\n    ><svg\n      id=\"question-mark\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M15.992 7c.96 0 1.784.176 2.472.528.704.336 1.232.792 1.584 1.368.352.576.528 1.192.528 1.848 0 .624-.112 1.16-.336 1.608a3.336 3.336 0 0 1-.768 1.056c-.304.272-.712.592-1.224.96-.672.464-1.176.896-1.512 1.296-.336.384-.504.904-.504 1.56v1.08h-2.184v-1.2c0-.688.112-1.272.336-1.752.24-.48.52-.864.84-1.152.32-.288.744-.616 1.272-.984.608-.4 1.056-.76 1.344-1.08.288-.32.432-.736.432-1.248 0-.656-.216-1.16-.648-1.512-.432-.368-1.024-.552-1.776-.552-1.28 0-2.392.576-3.336 1.728L11 9.376C12.344 7.792 14.008 7 15.992 7ZM15.2 20.776c.48 0 .88.16 1.2.48.32.32.48.712.48 1.176 0 .464-.16.864-.48 1.2-.32.32-.72.48-1.2.48a1.6 1.6 0 0 1-1.176-.48 1.68 1.68 0 0 1-.48-1.2c0-.464.16-.856.48-1.176a1.6 1.6 0 0 1 1.176-.48Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'question-mark-small'\"\n    ><svg\n      id=\"question-mark-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M8.094 3c.616 0 1.139.103 1.568.308.439.205.77.48.994.826.224.345.336.723.336 1.134 0 .373-.065.695-.196.966-.13.261-.29.476-.476.644-.187.168-.43.355-.728.56-.383.252-.667.485-.854.7-.187.215-.28.5-.28.854v.476H6.792v-.546c0-.42.065-.775.196-1.064.14-.299.303-.532.49-.7.187-.177.43-.369.728-.574.317-.215.546-.401.686-.56a.862.862 0 0 0 .224-.616c0-.308-.107-.546-.322-.714-.205-.177-.49-.266-.854-.266-.663 0-1.255.308-1.778.924L5 4.442C5.812 3.481 6.843 3 8.094 3Zm-.448 7.826c.317 0 .588.112.812.336.224.215.336.48.336.798 0 .308-.112.574-.336.798a1.106 1.106 0 0 1-.812.336 1.09 1.09 0 0 1-.798-.336 1.114 1.114 0 0 1-.322-.798c0-.317.107-.583.322-.798a1.06 1.06 0 0 1 .798-.336Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'required'\"\n    ><svg\n      id=\"required\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.745 9a.75.75 0 0 1 .75.75v4.676l3.87-2.32a.75.75 0 0 1 .77 1.287l-3.931 2.357 3.932 2.357a.75.75 0 1 1-.771 1.286l-3.87-2.319v4.676a.75.75 0 0 1-1.5 0v-4.675l-3.859 2.318a.75.75 0 0 1-.772-1.286l3.925-2.357-3.925-2.357a.75.75 0 0 1 .772-1.286l3.86 2.318V9.75a.75.75 0 0 1 .75-.75Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-close'\"\n    ><svg\n      id=\"ring-close\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z\"\n      />\n      <path\n        d=\"M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-close-fill'\"\n    ><svg\n      id=\"ring-close-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path\n        fill=\"#fff\"\n        d=\"M29 16C29 23.1797 23.1797 29 16 29C8.8203 29 3 23.1797 3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28ZM16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        d=\"M20.2545 20.9324C20.0775 20.9294 19.9088 20.8565 19.7852 20.7298L11.2518 12.1964C11.05 12.0347 10.9589 11.7714 11.0176 11.5195C11.0763 11.2676 11.2744 11.0717 11.5269 11.0159C11.7795 10.96 12.0417 11.0541 12.2012 11.2578L20.7345 19.7911C20.9892 20.0522 20.9892 20.4687 20.7345 20.7298C20.6057 20.8553 20.4343 20.9277 20.2545 20.9324Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        d=\"M11.721 20.9324C11.9008 20.9277 12.0723 20.8553 12.201 20.7298L20.7344 12.1964C20.9447 11.9278 20.9203 11.5442 20.6777 11.3044C20.4351 11.0645 20.0513 11.0445 19.785 11.2578L11.2517 19.7911C11.0643 19.9831 11.009 20.268 11.1111 20.5161C11.2131 20.7642 11.4528 20.9279 11.721 20.9324V20.9324Z\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-plus-fill'\"\n    ><svg\n      id=\"ring-plus-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path fill=\"#1076DB\" d=\"M16 9h1v13h-1z\" />\n      <path fill=\"#1076DB\" d=\"M10 15h13v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-plus'\"\n    ><svg\n      id=\"ring-plus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path d=\"M16 9h1v13h-1z\" />\n      <path d=\"M10 15h13v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'rosette'\"\n    ><svg\n      id=\"rosette\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.439 20.144a5.925 5.925 0 0 1-5.92-5.919 5.925 5.925 0 0 1 5.92-5.919 5.926 5.926 0 0 1 5.92 5.92 5.926 5.926 0 0 1-5.92 5.918Zm9.385-5.862a.754.754 0 0 0 .532-.305.655.655 0 0 0 .112-.53l-.61-2.758a.656.656 0 0 0-.327-.432.746.746 0 0 0-.61-.05l-2.295.786c-.158-.3-.339-.586-.537-.86l1.73-1.705a.755.755 0 0 0 .227-.572.655.655 0 0 0-.242-.483L21.61 5.596a.65.65 0 0 0-.524-.136.753.753 0 0 0-.51.34L19.27 7.845a6.993 6.993 0 0 0-1.017-.357l.273-2.41a.756.756 0 0 0-.182-.586.654.654 0 0 0-.493-.224h-2.824a.654.654 0 0 0-.492.224.752.752 0 0 0-.183.585l.273 2.411c-.349.094-.687.21-1.01.354l-1.304-2.04a.751.751 0 0 0-.512-.34.65.65 0 0 0-.523.135L9.082 7.373a.655.655 0 0 0-.242.483c-.011.211.071.42.226.572l1.727 1.7c-.199.274-.381.561-.541.863l-2.287-.785a.748.748 0 0 0-.611.051.657.657 0 0 0-.327.432l-.61 2.759a.65.65 0 0 0 .112.529c.123.17.318.281.533.305l2.407.255c.013.28.04.554.085.824l-2.304.748a.747.747 0 0 0-.457.41.65.65 0 0 0 0 .54l1.169 2.571c.077.17.227.299.41.356a.754.754 0 0 0 .606-.078l2.074-1.24c.234.283.493.54.767.784l-3.375 5.905 3.83-.958.996 2.987 3.047-5.338 3.046 5.338.998-2.987 3.83.958-3.293-5.76c.338-.28.65-.592.93-.931l2.078 1.241a.752.752 0 0 0 .607.08.666.666 0 0 0 .41-.357l1.17-2.572a.65.65 0 0 0 0-.538.75.75 0 0 0-.459-.411l-2.309-.75a7.17 7.17 0 0 0 .084-.821l2.415-.256Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'rule'\"\n    ><svg\n      id=\"rule\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.467 8.533v7.574a2.666 2.666 0 0 0 0 5.226v2.134h1.067V21.28a2.666 2.666 0 0 0 0-5.227v-7.52h-1.067Zm-4.265 14.934v-6.454a2.666 2.666 0 0 0 0-5.226V9.6h-1.067v2.24a2.666 2.666 0 0 0 0 5.227v6.4h1.067ZM9.069 14.4a1.6 1.6 0 1 1 3.2 0 1.6 1.6 0 0 1-3.2 0Zm12.263-1.6a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Zm-.534 10.667h1.067v-6.454a2.666 2.666 0 0 0 0-5.226V9.6h-1.067v2.24a2.666 2.666 0 0 0 0 5.227v6.4ZM16 20.267a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'search'\"\n    ><svg\n      id=\"search\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m19.114 18.485 3.083 3.2a.917.917 0 0 1 0 1.227.981.981 0 0 1-1.366 0l-3.2-3.2a5.472 5.472 0 0 1-2.634.683 5.397 5.397 0 1 1 5.397-5.333 5.227 5.227 0 0 1-1.28 3.423Zm-5.473-6.65a3.488 3.488 0 0 0-2.11 3.27 3.467 3.467 0 0 0 3.476 3.423 3.488 3.488 0 1 0-1.366-6.693Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'seats'\"\n    ><svg\n      id=\"seats\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.602 8.001c-.882 0-1.6.717-1.6 1.599s.718 1.6 1.599 1.6c.882 0 1.601-.717 1.601-1.599s-.718-1.6-1.6-1.6m0 4.267A2.67 2.67 0 0 1 6.935 9.6a2.67 2.67 0 0 1 2.666-2.667 2.67 2.67 0 0 1 2.667 2.668A2.67 2.67 0 0 1 9.6 12.268M16.002 8.002c-.882 0-1.6.717-1.6 1.6a1.6 1.6 0 0 0 1.6 1.599c.427 0 .83-.166 1.132-.468a1.602 1.602 0 0 0-1.132-2.73m0 4.266a2.67 2.67 0 0 1-2.666-2.667 2.67 2.67 0 0 1 2.667-2.668 2.671 2.671 0 0 1 2.666 2.668 2.65 2.65 0 0 1-.78 1.886 2.65 2.65 0 0 1-1.886.78M9.601 14.401a1.601 1.601 0 0 0-.001 3.2c.882 0 1.601-.718 1.601-1.6 0-.882-.718-1.6-1.6-1.6m0 4.267A2.671 2.671 0 0 1 6.934 16 2.67 2.67 0 0 1 9.6 13.333a2.67 2.67 0 0 1 2.667 2.668A2.67 2.67 0 0 1 9.6 18.668M18.135 16.002A2.134 2.134 0 1 1 13.866 16a2.134 2.134 0 0 1 4.269.002\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.001 14.402a1.601 1.601 0 0 0 0 3.2c.881 0 1.6-.718 1.6-1.6 0-.882-.717-1.6-1.6-1.6m0 4.267A2.671 2.671 0 0 1 13.335 16a2.67 2.67 0 0 1 2.667-2.667 2.67 2.67 0 0 1 2.666 2.668 2.67 2.67 0 0 1-2.667 2.667\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.402 8.003c-.882 0-1.6.717-1.6 1.6a1.6 1.6 0 0 0 1.599 1.599c.427 0 .83-.166 1.133-.468a1.602 1.602 0 0 0-1.132-2.73m0 4.266h-.001a2.67 2.67 0 0 1-2.666-2.667 2.67 2.67 0 0 1 2.667-2.668 2.671 2.671 0 0 1 2.667 2.668c0 .713-.278 1.383-.781 1.887a2.657 2.657 0 0 1-1.886.78\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M24.534 16.003a2.134 2.134 0 1 1-4.268-.002 2.134 2.134 0 0 1 4.268.002\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.4 14.403a1.601 1.601 0 0 0 0 3.2c.882 0 1.6-.718 1.6-1.6 0-.882-.717-1.6-1.6-1.6m0 4.267a2.671 2.671 0 0 1-2.666-2.668 2.669 2.669 0 0 1 2.667-2.667 2.671 2.671 0 0 1 2.667 2.668A2.67 2.67 0 0 1 22.4 18.67M11.733 22.401a2.133 2.133 0 1 1-4.267 0 2.133 2.133 0 0 1 4.268 0\"\n        clip-rule=\"evenodd\"\n      />\n      <mask\n        id=\"b\"\n        width=\"7\"\n        height=\"7\"\n        x=\"6\"\n        y=\"19\"\n        maskUnits=\"userSpaceOnUse\"\n        style=\"mask-type: luminance\"\n      >\n        <path fill-rule=\"evenodd\" d=\"M6.934 19.734h5.333v5.334H6.934v-5.334Z\" clip-rule=\"evenodd\" />\n      </mask>\n      <g mask=\"url(#b)\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M9.599 20.8A1.595 1.595 0 0 0 8 22.4c0 .882.717 1.6 1.599 1.6s1.6-.717 1.601-1.6c0-.881-.718-1.6-1.6-1.6h-.001Zm0 4.268a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.884-.78H9.6a2.669 2.669 0 0 1 2.667 2.667 2.671 2.671 0 0 1-2.668 2.667Z\"\n          clip-rule=\"evenodd\"\n        />\n      </g>\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M18.134 22.402a2.133 2.133 0 1 1-4.267 0 2.133 2.133 0 0 1 4.267 0\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 20.802a1.595 1.595 0 0 0-1.6 1.599c0 .882.717 1.6 1.6 1.601.881 0 1.6-.718 1.6-1.6 0-.882-.718-1.6-1.6-1.6Zm0 4.267a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.883-.78h.003a2.669 2.669 0 0 1 2.666 2.667A2.671 2.671 0 0 1 16 25.069ZM24.533 22.403a2.133 2.133 0 1 1-4.267 0 2.133 2.133 0 0 1 4.267 0\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.399 20.803a1.595 1.595 0 0 0-1.6 1.599c0 .882.718 1.6 1.6 1.601.882 0 1.6-.718 1.6-1.6 0-.882-.717-1.6-1.6-1.6Zm0 4.267a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.884-.78h.002a2.669 2.669 0 0 1 2.667 2.667 2.671 2.671 0 0 1-2.668 2.667Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'settings'\"\n    ><svg\n      id=\"settings\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M23.819 16.768v-1.344a1.067 1.067 0 0 0-.864-1.067l-1.259-.181a6.1 6.1 0 0 0-.352-.864l.758-1.013c.32-.425.28-1.021-.096-1.398l-.95-.949a1.067 1.067 0 0 0-1.397-.107l-1.067.768a5.509 5.509 0 0 0-.853-.352l-.181-1.258a1.067 1.067 0 0 0-1.067-.918h-1.344a1.067 1.067 0 0 0-1.067.918L13.9 10.26c-.294.094-.58.211-.853.352l-1.067-.768a1.067 1.067 0 0 0-1.397.107l-.95.95a1.067 1.067 0 0 0-.096 1.397l.758 1.013c-.14.279-.257.567-.352.864l-1.259.181c-.53.075-.923.532-.917 1.067v1.344c-.006.535.387.992.917 1.067l1.259.181c.095.293.213.578.352.853l-.758 1.067a1.067 1.067 0 0 0 .096 1.387l.95.96c.376.376.973.417 1.397.096l1.067-.768c.271.149.557.27.853.362l.181 1.259c.075.53.532.923 1.067.917h1.29c.536.006.992-.387 1.067-.917l.182-1.259c.296-.092.581-.213.853-.362l1.067.768c.424.32 1.02.28 1.397-.096l.95-.96c.37-.375.41-.965.095-1.387l-.757-1.067c.14-.275.257-.56.352-.853l1.259-.181c.53-.075.922-.532.917-1.067Zm-7.2 4.181-.267 1.867h-.981l-.267-1.867-.757-.245a5.093 5.093 0 0 1-.672-.288l-.715-.352-1.504 1.13-.693-.693 1.13-1.514-.362-.704a5.236 5.236 0 0 1-.277-.672l-.246-.758-1.866-.266v-.982l1.866-.266.246-.758c.074-.23.167-.456.277-.672l.363-.714-1.131-1.504.693-.694 1.504 1.131.715-.363c.215-.113.44-.206.672-.277l.757-.245.267-1.867h.981l.267 1.867.757.245c.233.07.458.162.672.277l.715.363 1.504-1.13.693.693-1.13 1.504.362.714c.11.216.204.441.278.672l.245.758 1.867.266v.982l-1.867.266-.245.758a5.25 5.25 0 0 1-.278.672l-.362.704 1.13 1.514-.693.694-1.504-1.131-.715.352c-.216.114-.44.21-.672.288l-.757.245Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.152 16.096a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Zm4 0a1.333 1.333 0 1 0-2.667 0 1.333 1.333 0 0 0 2.667 0Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'shopping-cart'\"\n    ><svg\n      id=\"shopping-cart\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M22.524 9.674a1 1 0 0 1 .868 1.117L22.216 20.2H9.784l-1.027-8.194a.387.387 0 0 0-.384-.34h-3.04a1 1 0 1 1 0-2h3.04a2.387 2.387 0 0 1 2.368 2.093l.808 6.441h8.901l.957-7.657a1 1 0 0 1 1.117-.869ZM11.733 25.6a2.133 2.133 0 1 0 0-4.267 2.133 2.133 0 0 0 0 4.267ZM20.267 25.6a2.133 2.133 0 1 0 0-4.267 2.133 2.133 0 0 0 0 4.267Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.4 12.233H9.6v-1h12.8v1ZM21.334 15.967H10.667v-1h10.667v1Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.366 18.667v-6.934h1v6.934h-1ZM17.634 18.667v-6.934h1v6.934h-1Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'sorter'\"\n    ><svg\n      id=\"sorter\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.146 10.646a.5.5 0 0 1 .708 0l4.5 4.5a.5.5 0 0 1-.708.708L17 12.207V20.5a.5.5 0 0 1-1 0v-8.293l-3.646 3.647a.5.5 0 0 1-.708-.708l4.5-4.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'star'\"\n    ><svg\n      id=\"star\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m16.811 8.83 2.121 4.298 4.745.69a.533.533 0 0 1 .294.91l-3.432 3.345.81 4.724a.533.533 0 0 1-.773.562l-4.242-2.23-4.244 2.23a.532.532 0 0 1-.772-.562l.809-4.724-3.43-3.346a.533.533 0 0 1 .294-.91l4.743-.689 2.122-4.297a.532.532 0 0 1 .955 0\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'switch'\"\n    ><svg\n      id=\"switch\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M17.597 14.933a.528.528 0 0 0-.533.534v2.666h-6.71l2.294-2.293a.528.528 0 0 0 0-.757.528.528 0 0 0-.758 0l-3.2 3.2a.481.481 0 0 0-.117.181.533.533 0 0 0 0 .405.38.38 0 0 0 .118.171l3.2 3.2a.5.5 0 0 0 .373.16.5.5 0 0 0 .373-.16.528.528 0 0 0 0-.757L10.354 19.2h7.243a.528.528 0 0 0 .534-.533v-3.2a.528.528 0 0 0-.534-.534Z\"\n      />\n      <path\n        d=\"M24.488 12.47a.534.534 0 0 0 0-.406.488.488 0 0 0-.117-.17l-3.2-3.2a.528.528 0 0 0-.758 0 .528.528 0 0 0 0 .757l2.294 2.282h-7.243a.528.528 0 0 0-.533.534v3.2c0 .298.234.533.533.533a.528.528 0 0 0 .533-.533V12.8h6.71l-2.294 2.293a.528.528 0 0 0 0 .758c.107.096.246.149.384.149a.5.5 0 0 0 .374-.16l3.2-3.2a.38.38 0 0 0 .117-.17Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'three-dots'\">\n    <svg\n      id=\"three-dots\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M8.96 16a3.2 3.2 0 1 1-6.4 0 3.2 3.2 0 0 1 6.4 0ZM16 12.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm7.04 3.2a3.2 3.2 0 1 1 6.4 0 3.2 3.2 0 0 1-6.4 0Z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'three-dots-small'\"\n    ><svg\n      id=\"three-dots-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M5 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM13.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM8.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'waiting-approval'\"\n    ><svg\n      id=\"waiting-approval\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g fill-rule=\"evenodd\" clip-path=\"url(#a)\" clip-rule=\"evenodd\">\n        <path\n          d=\"m10.896 16 3.904-2.848V9.6h1.067V8.533H4.134V9.6H5.2v3.552L9.094 16 5.2 18.848V22.4H4.134v1.067h11.733V22.4H14.8v-3.552L10.896 16Zm-4.628-3.392L10 15.338l3.733-2.73V9.6H6.268v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33l-2.666 1.952-2.667-1.952Zm5.333 8.203H7.334v1.066h5.333v-1.066ZM26.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.488-1.335l2.445 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'waiting-decline'\"\n    ><svg\n      id=\"waiting-decline\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g fill-rule=\"evenodd\" clip-path=\"url(#a)\" clip-rule=\"evenodd\">\n        <path\n          d=\"m10.896 16 3.904-2.848V9.6h1.067V8.533H4.134V9.6H5.2v3.552L9.094 16 5.2 18.848V22.4H4.134v1.067h11.733V22.4H14.8v-3.552L10.896 16Zm-4.628-3.392L10 15.338l3.733-2.73V9.6H6.268v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33l-2.666 1.952-2.667-1.952Zm5.333 8.203H7.334v1.066h5.333v-1.066ZM17.293 11.293a1 1 0 0 1 1.414 0l3.793 3.793 3.793-3.793a1 1 0 0 1 1.414 1.414L23.914 16.5l3.793 3.793a1 1 0 0 1-1.414 1.414L22.5 17.914l-3.793 3.793a1 1 0 0 1-1.414-1.414l3.793-3.793-3.793-3.793a1 1 0 0 1 0-1.414Z\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'zoom-in'\"\n    ><svg\n      id=\"zoom-in\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g clip-path=\"url(#a)\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M15.5 23a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 2C21.299 25 26 20.299 26 14.5S21.299 4 15.5 4 5 8.701 5 14.5 9.701 25 15.5 25Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M21.293 21.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path d=\"M15 8h1v13h-1z\" />\n        <path d=\"M9 14h13v1H9z\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'zoom-out'\"\n    ><svg\n      id=\"zoom-out\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g clip-path=\"url(#a)\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M15.5 23a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 2C21.299 25 26 20.299 26 14.5S21.299 4 15.5 4 5 8.701 5 14.5 9.701 25 15.5 25Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M21.293 21.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path d=\"M9 14h12v1H9z\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n</ng-container>\n", styles: [".fudis-icon{box-sizing:border-box;display:inline-flex;align-items:center;transition:all .6s ease}.fudis-icon__rotate__flip-180{transform:rotate(180deg)}.fudis-icon__rotate__cw-90{transform:rotate(90deg)}.fudis-icon__rotate__ccw-90{transform:rotate(-90deg)}.fudis-icon__lg{width:calc(2rem / var(--fudis-rem-multiplier));height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-icon__sm{width:calc(1rem / var(--fudis-rem-multiplier));height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-icon__color__yellow{fill:#f1c40f}.fudis-icon__color__red{fill:#b83c2e}.fudis-icon__color__gray-dark{fill:#484848}.fudis-icon__color__gray-light{fill:#d4d4d4}.fudis-icon__color__primary{fill:var(--fudis-color-primary)}.fudis-icon__color__primary-dark{fill:var(--fudis-color-primary-dark)}.fudis-icon__color__green{fill:#1e874b}.fudis-icon__color__white{fill:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-icon', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container>\n  <ng-container *ngIf=\"icon === 'achievement'\">\n    <svg\n      id=\"achievement\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M24.373 12.384c-.277.894-.664 1.75-1.152 2.55a7.743 7.743 0 0 1-1.067-2.251 29.695 29.695 0 0 1 1.152-3.616 21.15 21.15 0 0 1 1.067 3.317ZM22.209 15.67a8.063 8.063 0 0 1-1.067 2.186 6.729 6.729 0 0 1-1.067-2.133 8.66 8.66 0 0 1 1.067-2.422c.49.722.85 1.523 1.067 2.368Z\"\n      />\n      <path\n        d=\"M24.064 17.888a10.932 10.932 0 0 1-2.9-.47 9.271 9.271 0 0 1 2.132-1.813c.984.023 1.96.177 2.902.459a9.526 9.526 0 0 1-2.134 1.824ZM22.73 20.267a9.804 9.804 0 0 1-2.634 1.066 9.826 9.826 0 0 1-2.496-1.365 9.802 9.802 0 0 1 2.634-1.067c.892.336 1.732.796 2.496 1.366ZM18.826 15.403c.347.778.549 1.613.598 2.464-.181.576-2.027 2.133-2.027 2.133a7.06 7.06 0 0 1-.597-2.475c.192-.608 2.026-2.122 2.026-2.122Z\"\n      />\n      <path\n        d=\"m18.112 19.339 3.307-1.664-2.496 2.282-4.587 2.592.416-1.216 3.36-1.994ZM7.66 12.576c.255.84.613 1.647 1.066 2.4.47-.648.83-1.369 1.067-2.133a29.196 29.196 0 0 0-1.067-3.467 21.546 21.546 0 0 0-1.067 3.2ZM9.792 15.67a8.064 8.064 0 0 0 1.067 2.186 6.73 6.73 0 0 0 1.066-2.133A8.663 8.663 0 0 0 10.86 13.3a7.56 7.56 0 0 0-1.067 2.368Z\"\n      />\n      <path\n        d=\"M7.936 17.888c.984-.025 1.96-.183 2.901-.47a9.27 9.27 0 0 0-2.133-1.813c-.983.023-1.959.177-2.901.459a9.525 9.525 0 0 0 2.133 1.824ZM11.904 21.333a9.825 9.825 0 0 0 2.496-1.365 9.802 9.802 0 0 0-2.635-1.067c-.891.336-1.732.796-2.495 1.366.821.481 1.709.84 2.634 1.066ZM13.174 15.403a7.062 7.062 0 0 0-.598 2.464c.181.576 2.027 2.133 2.027 2.133.347-.782.55-1.62.597-2.475-.192-.608-2.026-2.122-2.026-2.122Z\"\n      />\n      <path d=\"m13.888 19.339-3.307-1.664 2.496 2.282 4.587 2.592-.406-1.216-3.37-1.994Z\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'achievement-small'\"\n    ><svg\n      id=\"achievement-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M14.569 5.603a8.87 8.87 0 0 1-.904 2 6.079 6.079 0 0 1-.837-1.766c.24-.964.543-1.912.904-2.837.35.843.63 1.713.837 2.603ZM12.87 8.18c-.19.61-.473 1.19-.837 1.715a5.282 5.282 0 0 1-.837-1.673c.18-.673.463-1.313.837-1.9.384.566.667 1.195.837 1.858Z\"\n      />\n      <path\n        d=\"M14.327 9.92a8.577 8.577 0 0 1-2.276-.368 7.271 7.271 0 0 1 1.673-1.422 8.636 8.636 0 0 1 2.277.36 7.473 7.473 0 0 1-1.674 1.43ZM13.28 11.787a7.689 7.689 0 0 1-2.067.836 7.708 7.708 0 0 1-1.958-1.07 7.688 7.688 0 0 1 2.067-.838c.7.264 1.359.624 1.958 1.072ZM10.217 7.97c.271.612.43 1.266.468 1.934-.142.452-1.59 1.673-1.59 1.673a5.54 5.54 0 0 1-.468-1.941c.15-.477 1.59-1.665 1.59-1.665Z\"\n      />\n      <path\n        d=\"m9.657 11.059 2.594-1.306-1.958 1.79-3.599 2.034.327-.954 2.636-1.564ZM1.456 5.753c.2.66.481 1.292.837 1.883a5.749 5.749 0 0 0 .837-1.674 22.903 22.903 0 0 0-.837-2.72 16.904 16.904 0 0 0-.837 2.511ZM3.13 8.18c.19.61.473 1.19.837 1.715a5.28 5.28 0 0 0 .837-1.673 6.795 6.795 0 0 0-.837-1.9A5.933 5.933 0 0 0 3.13 8.18Z\"\n      />\n      <path\n        d=\"M1.674 9.92a8.577 8.577 0 0 0 2.276-.368A7.272 7.272 0 0 0 2.276 8.13 8.636 8.636 0 0 0 0 8.49a7.473 7.473 0 0 0 1.674 1.43ZM4.787 12.623a7.708 7.708 0 0 0 1.958-1.07 7.688 7.688 0 0 0-2.067-.838 7.97 7.97 0 0 0-1.958 1.072c.644.377 1.34.66 2.067.836ZM5.782 7.97a5.54 5.54 0 0 0-.469 1.934c.143.452 1.59 1.673 1.59 1.673a5.54 5.54 0 0 0 .47-1.941c-.152-.477-1.59-1.665-1.59-1.665Z\"\n      />\n      <path d=\"M6.343 11.059 3.75 9.753l1.958 1.79 3.599 2.034-.318-.954-2.645-1.564Z\" />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'alert'\"\n    ><svg\n      id=\"alert\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.634 8.5a1 1 0 0 1 1.73 0l7.5 13a1 1 0 0 1-.86 1.5h-15a1 1 0 0 1-.87-1.5l7.5-13Zm8.37 13.5-7.5-13-7.5 13h15Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"16.504\" cy=\"19.75\" r=\".75\" />\n      <path\n        d=\"M16.504 17.75a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 1.5 0v3a.76.76 0 0 1-.75.75Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'alert-fill'\"\n    ><svg\n      id=\"alert-fill\"\n      fill=\"none\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path fill=\"#fff\" fill-rule=\"evenodd\" d=\"m16.5 9.5 8 14h-16l8-14Z\" clip-rule=\"evenodd\" />\n      <path\n        fill=\"#B83C2E\"\n        fill-rule=\"evenodd\"\n        d=\"M15.634 9.5a1 1 0 0 1 1.73 0l7.5 13a1 1 0 0 1-.86 1.5h-15a1 1 0 0 1-.87-1.5l7.5-13Zm8.37 13.5-7.5-13-7.5 13h15Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle fill=\"#B83C2E\" cx=\"16.504\" cy=\"20.75\" r=\".75\" />\n      <path\n        fill=\"#B83C2E\"\n        d=\"M16.504 18.75a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 1.5 0v3a.76.76 0 0 1-.75.75Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'alert-small'\"\n    ><svg\n      id=\"alert-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7.186 1.47a.941.941 0 0 1 1.628 0l7.06 12.237a.942.942 0 0 1-.81 1.412H.945a.941.941 0 0 1-.819-1.412l7.06-12.236Zm7.879 12.708L8.005 1.941.945 14.178h14.12Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"8.005\" cy=\"12.06\" r=\".706\" />\n      <path\n        d=\"M8.005 10.178a.706.706 0 0 1-.706-.706V6.648a.706.706 0 1 1 1.412 0v2.824a.715.715 0 0 1-.706.706Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'archive'\"\n    ><svg\n      id=\"archive\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M25.429 11.83a.533.533 0 0 0-.533.533v10.304a1.6 1.6 0 0 1-1.6 1.6H9.78a1.6 1.6 0 0 1-1.6-1.6V12.363a.533.533 0 1 0-1.067 0v10.304a2.667 2.667 0 0 0 2.667 2.666h13.515a2.677 2.677 0 0 0 2.666-2.666V12.363a.533.533 0 0 0-.533-.534Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M8 6.4h17.066a2.667 2.667 0 0 1 2.667 2.667v1.962h-22.4V9.067A2.667 2.667 0 0 1 8 6.4ZM6.4 9.963h20.266v-.896a1.6 1.6 0 0 0-1.6-1.6H8a1.61 1.61 0 0 0-1.6 1.6v.896ZM20.267 17.248c0 .784-.636 1.419-1.42 1.419H14.23a1.419 1.419 0 0 1-1.43-1.419v-.352c0-.79.64-1.43 1.43-1.43h4.619a1.43 1.43 0 0 1 1.419 1.43v.352Zm-6.4-.352v.352a.363.363 0 0 0 .362.352h4.619a.352.352 0 0 0 .352-.352v-.352a.363.363 0 0 0-.352-.363h-4.62a.363.363 0 0 0-.362.363Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'arrow-big'\"\n    ><svg\n      id=\"arrow-big\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.925 24.534a1.6 1.6 0 0 1-1.6-1.6v-9.93l-3.06 3.064a1.596 1.596 0 0 1-2.259.005 1.598 1.598 0 0 1-.011-2.258l5.792-5.87c.315-.322.75-.495 1.174-.478.39-.016.858.161 1.166.47l5.861 5.87a1.6 1.6 0 1 1-2.264 2.26l-3.2-3.202v10.07a1.6 1.6 0 0 1-1.6 1.6L36.267 16\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'arrow-dashed'\"\n    ><svg\n      id=\"arrow-dashed\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M23.466 17.067H16v-2.134h7.466v2.134Zm-10.666 0H5.333v-2.134H12.8v2.134Z\" />\n      <path d=\"m26.506 16-6.016 4.267v-8.534L26.506 16Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'arrow-solid'\"\n    ><svg\n      id=\"arrow-solid\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M25.868 15.182a1 1 0 0 1 0 1.636l-7.865 5.539a1 1 0 0 1-1.576-.818V10.461a1 1 0 0 1 1.576-.818l7.865 5.54Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.5 16a1 1 0 0 1 1-1H20a1 1 0 1 1 0 2H6.5a1 1 0 0 1-1-1Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'back'\"\n    ><svg\n      id=\"back\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m18.684 14.403-.018-.003h-7.37l3.486-3.411c.2-.197.2-.513 0-.709a.518.518 0 0 0-.723 0l-4.25 4.16a.686.686 0 0 0 0 .986l4.25 4.16c.2.196.524.196.723 0 .2-.194.2-.512 0-.708l-3.486-3.411h7.37v.004c1.49-.037 2.667 1.19 2.667 2.662s-1.178 2.699-2.667 2.663v.004h-1.6a.533.533 0 0 0 0 1.067h1.6a3.737 3.737 0 0 0 3.733-3.734c0-2.057-1.654-3.756-3.715-3.73\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'brochure'\"\n    ><svg\n      id=\"brochure\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M11 8.5a.5.5 0 0 0-.5.5v13.5a.5.5 0 0 0 .5.5h7v-2a1.5 1.5 0 0 1 1.5-1.5h2V9a.5.5 0 0 0-.5-.5H11Zm9.793 12H19.5a.5.5 0 0 0-.5.5v1.293l1.793-1.793ZM9.5 9A1.5 1.5 0 0 1 11 7.5h10A1.5 1.5 0 0 1 22.5 9v11.207L18.707 24H11a1.5 1.5 0 0 1-1.5-1.5V9Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12 12a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'bullets'\"\n    ><svg\n      id=\"bullets\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <circle cx=\"7\" cy=\"11\" r=\"1\" />\n      <rect width=\"16\" height=\"2\" x=\"10\" y=\"10\" rx=\"1\" />\n      <circle cx=\"7\" cy=\"16\" r=\"1\" />\n      <rect width=\"16\" height=\"2\" x=\"10\" y=\"15\" rx=\"1\" />\n      <circle cx=\"7\" cy=\"21\" r=\"1\" />\n      <rect width=\"16\" height=\"2\" x=\"10\" y=\"20\" rx=\"1\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'calendar'\"\n    ><svg\n      id=\"calendar\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.394 24.533c.552 0 1.073-.813 1.073-1.365v-12.8c0-.553-.52-.768-1.073-.768H19.2V8.533h-1.066V9.6h-4.267V8.533H12.8V9.6H9.594c-.518 0-1.06.244-1.06.768v12.8c0 .553.507 1.365 1.06 1.365h12.8ZM9.6 10.667h3.2v1.066h1.067v-1.066h4.267v1.066H19.2v-1.066h3.2V12.8H9.6v-2.133Zm0 3.2h12.8v8.868c0 .276-.163.732-.44.732h-12c-.275 0-.36-.456-.36-.732v-8.868Zm4.267 5.333h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Zm3.2 3.2h-2.134v2.133h2.133V19.2Zm0-3.2h-2.134v2.133h2.133V16Zm3.2 3.2h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'change-log'\"\n    ><svg\n      id=\"change-log\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.5 15.717V11.2h-1v5.083l2.91 1.746.514-.858-2.424-1.454Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M9.066 16a6.934 6.934 0 1 1 3.736 6.152l.494-.95A5.862 5.862 0 1 0 10.138 16H9.066Z\"\n      />\n      <path d=\"M7.467 16h4.266L9.6 18.667 7.467 16Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'check'\"\n    ><svg\n      id=\"check\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.726 9.437a1.5 1.5 0 0 1 .371 2.088l-7.448 10.667a1.5 1.5 0 0 1-2.347.143l-4.285-4.779a1.5 1.5 0 0 1 2.234-2.003l3.022 3.37 6.364-9.115a1.5 1.5 0 0 1 2.089-.371Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'check-indeterminate-small'\"\n    ><svg\n      id=\"check-indeterminate-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <rect width=\"12\" height=\"3\" x=\"2\" y=\"7\" rx=\"1.5\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'check-small'\"\n    ><svg\n      id=\"check-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.572 3.18a1 1 0 0 1 .248 1.392l-5.713 8.182a1 1 0 0 1-1.564.095L3.256 9.184a1 1 0 1 1 1.489-1.335l2.444 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'checkmark-circle'\"\n    ><svg\n      id=\"checkmark-circle\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M21.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.489-1.335l2.444 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'chevron'\"\n    ><svg\n      id=\"chevron\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'chevron-ring'\"\n    ><svg\n      id=\"chevron-ring\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g fill-rule=\"evenodd\" clip-path=\"url(#a)\" clip-rule=\"evenodd\">\n        <path\n          d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        />\n        <path\n          d=\"M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18Z\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'chevron-ring-fill'\"\n    ><svg\n      id=\"chevron-ring-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#484848\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill=\"#484848\"\n        fill-rule=\"evenodd\"\n        d=\"M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'clock'\"\n    ><svg\n      id=\"clock\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.066 16a6.933 6.933 0 1 1 13.867 0 6.933 6.933 0 0 1-13.867 0Zm12.8 0A5.867 5.867 0 0 0 16 10.133 5.877 5.877 0 0 0 10.133 16a5.867 5.867 0 0 0 11.733 0Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.5 15.71V11.2h-1v5.09l2.908 1.659.496-.869-2.404-1.37Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M11.2 15.467h1.067v1.067H11.2zM19.733 15.467H20.8v1.067h-1.067zM15.467 19.733h1.067V20.8h-1.067z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'close'\"\n    ><svg\n      id=\"close\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z\"\n      />\n      <path\n        d=\"M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'close-big'\"\n    ><svg\n      id=\"close-big\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M25.566 6.403a.75.75 0 0 1 0 1.06L7.464 25.567a.75.75 0 0 1-1.06-1.061L24.504 6.403a.75.75 0 0 1 1.06 0Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M6.403 6.403a.75.75 0 0 1 1.06 0l18.103 18.102a.75.75 0 0 1-1.06 1.06L6.402 7.465a.75.75 0 0 1 0-1.061Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'code'\"\n    ><svg\n      id=\"code\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"m7.563 16.277 3.755 2.464c.15.107.256.203.32.299a.609.609 0 0 1 .096.341.66.66 0 0 1-.086.352.304.304 0 0 1-.256.128.524.524 0 0 1-.16-.032c-.053-.032-.138-.074-.245-.149l-4.064-2.71c-.01 0-.032-.01-.053-.031-.31-.203-.47-.427-.47-.662 0-.234.15-.458.46-.661.031-.021.052-.032.063-.043l4.064-2.666c.096-.054.17-.107.235-.128.064-.022.117-.043.17-.043.107 0 .192.043.246.128a.53.53 0 0 1 .096.33.645.645 0 0 1-.096.353.971.971 0 0 1-.32.298l-3.755 2.432ZM14.508 20.235c-.107.245-.214.416-.31.501a.484.484 0 0 1-.341.128.484.484 0 0 1-.352-.15.468.468 0 0 1-.15-.362c0-.043.011-.085.022-.139.01-.053.032-.106.053-.16l4.555-7.669c.117-.256.224-.427.32-.512a.488.488 0 0 1 .33-.139c.15 0 .267.054.374.15.107.096.15.213.15.352 0 .042-.011.085-.022.128a.537.537 0 0 1-.053.138l-4.576 7.734ZM24.875 16.277l-3.744-2.432a1.164 1.164 0 0 1-.33-.298.609.609 0 0 1-.097-.342c0-.138.032-.256.085-.33a.286.286 0 0 1 .246-.128c.053 0 .106.01.17.042.064.022.14.075.235.139l4.064 2.667c.01.01.032.021.064.042.31.192.459.416.459.662 0 .234-.15.458-.448.661a.608.608 0 0 1-.075.043l-4.064 2.709-.021.01c-.182.107-.31.171-.384.171a.286.286 0 0 1-.246-.128c-.064-.085-.085-.202-.085-.352 0-.128.032-.234.096-.341.064-.096.17-.203.33-.299l3.745-2.496Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'decrease-indent'\"\n    ><svg\n      id=\"decrease-indent\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.066 16.533h9.6v-1.067h-9.6v1.067ZM9.066 14.4h9.6v-1.067h-9.6V14.4ZM9.066 12.267h13.867V11.2H9.066v1.067ZM9.066 18.667h9.6V17.6h-9.6v1.067ZM9.066 20.8h13.867v-1.067H9.066V20.8ZM19.733 16l3.2 2.133v-4.266L19.733 16Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'delete'\"\n    ><svg\n      id=\"delete\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.067 25.067v-16h13.867v16H9.067ZM10.134 24h11.733V10.133H10.134V24Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M15.467 12.267h1.067V20.8h-1.067zM12.267 14.4h1.067v6.4h-1.067zM18.667 14.4h1.067v6.4h-1.067zM6.934 9.067h18.133v1.067H6.934zM13.334 6.933v2.134h1.067V8h3.2v1.067h1.066V6.933h-5.333Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'dot'\"\n    ><svg\n      id=\"dot\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <circle cx=\"16\" cy=\"16\" r=\"4.267\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'edit'\"\n    ><svg\n      id=\"edit\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"m7.797 24.235 4.64-1.248-3.381-3.382-1.26 4.63ZM9.637 19.04l8.794-8.795 3.387 3.386-8.795 8.795-3.386-3.387ZM22.517 12.907l1.494-1.483a.768.768 0 0 0 0-1.067L21.706 8a.757.757 0 0 0-1.066 0l-1.494 1.483 3.371 3.424Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'editor'\"\n    ><svg\n      id=\"editor\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m11.246 16.85 4.258-9.58a.532.532 0 0 1 .713-.29c.133.058.23.165.279.29l4.258 9.58a.533.533 0 0 1-.975.433L18.498 14.4h-4.996l-1.281 2.883a.533.533 0 1 1-.975-.433Zm2.73-3.517h4.048L16 8.78l-2.023 4.553ZM13.679 24a1.004 1.004 0 1 1-2.008 0 1.004 1.004 0 0 1 2.008 0Zm5.521-1.004a1.004 1.004 0 1 0 0 2.008 1.004 1.004 0 0 0 0-2.008ZM14.934 24a1.004 1.004 0 1 1 2.008 0 1.004 1.004 0 0 1-2.008 0Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'exclamation-mark-circle'\"\n    ><svg\n      id=\"exclamation-mark-circle\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'exclamation-mark-circle-fill'\"\n    ><svg\n      id=\"exclamation-mark-circle-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <circle cx=\"16\" cy=\"15\" r=\"10\" fill=\"#B83C2E\" />\n      <path\n        fill=\"#fff\"\n        d=\"M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'exclamation-mark-circle-small'\"\n    ><svg\n      id=\"exclamation-mark-circle-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M8 10.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1M8 9c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1\"\n      />\n      <path d=\"M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m1 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'eye'\"\n    ><svg\n      id=\"eye\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.75 10.23c1.451-.01 2.894.21 4.274.654l.14.045.094.114a5.737 5.737 0 1 1-8.87 0l.387.317-.151-.476a13.863 13.863 0 0 1 4.127-.653Zm-3.68 1.562a4.737 4.737 0 1 0 7.505-.001 12.596 12.596 0 0 0-3.817-.56h-.001c-1.25.007-2.492.196-3.686.56Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path d=\"M15.807 12.01a2.667 2.667 0 1 0 2.667 2.667 2.656 2.656 0 0 0-2.667-2.666Z\" />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M6.307 15.915Zm.143-.235a7.3 7.3 0 0 1 .34-.478 9.683 9.683 0 0 1 1.62-1.638c1.49-1.19 3.854-2.397 7.344-2.397s5.854 1.206 7.344 2.397a9.686 9.686 0 0 1 1.62 1.638c.148.192.26.356.34.478a7.37 7.37 0 0 1-.341.478 9.715 9.715 0 0 1-1.623 1.638c-1.491 1.191-3.856 2.397-7.34 2.397-3.485 0-5.849-1.206-7.34-2.397a9.717 9.717 0 0 1-1.623-1.638 7.327 7.327 0 0 1-.34-.478Zm19.192 0c.442-.234.442-.234.441-.235v-.002l-.003-.005-.008-.014a3.061 3.061 0 0 0-.136-.227 8.103 8.103 0 0 0-.426-.605 10.678 10.678 0 0 0-1.788-1.81c-1.646-1.315-4.226-2.615-7.968-2.615s-6.322 1.3-7.968 2.616a10.678 10.678 0 0 0-1.788 1.809 8.111 8.111 0 0 0-.533.781 3.033 3.033 0 0 0-.029.05l-.008.015-.002.005-.001.002.44.235-.44-.234-.125.235.124.234.442-.235-.442.235.001.001.001.002.003.004.008.015a3.798 3.798 0 0 0 .135.226c.095.15.236.358.428.606.383.496.969 1.153 1.79 1.808 1.647 1.316 4.227 2.616 7.964 2.616s6.316-1.3 7.964-2.616a10.719 10.719 0 0 0 1.79-1.808 8.113 8.113 0 0 0 .535-.782l.028-.05.008-.015.003-.004v-.002s.001-.001-.44-.236Zm0 0 .441.235.125-.234-.125-.236-.441.235Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'eye-blind'\"\n    ><svg\n      id=\"eye-blind\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M15.8 11.2c-2.1 0-3.8.4-5.1 1-.9 1.8-.7 4 .4 5.7l.7-.7c-1-1.6-1-3.8.3-5.4 1.2-.4 2.4-.6 3.7-.6 0 .1.1.1.1.1.6 0 1.2 0 1.8.1l.1-.1c-.7-.1-1.4-.1-2-.1ZM20.5 12l-.5.5c1 1.9.6 4.2-1 5.7-.9.9-2.1 1.3-3.2 1.3-.8 0-1.5-.2-2.2-.5l-.7.7c.3.2.6.3.9.4.6.1 1.2.1 1.9.1.8 0 1.5-.1 2.2-.2.7-.3 1.3-.6 1.8-1.2 1.8-1.7 2.3-4.4 1.3-6.6-.1 0-.3-.1-.5-.2Z\"\n      />\n      <path\n        d=\"M15.8 12c-1.5 0-2.7 1.2-2.7 2.7 0 .4.1.7.2 1l3.5-3.5c-.3-.1-.6-.2-1-.2ZM18.4 14.1l-3.2 3.2c.2 0 .4.1.6.1 1.5 0 2.7-1.2 2.7-2.7 0-.2 0-.4-.1-.6Z\"\n      />\n      <path\n        d=\"M15.8 10.2c-3.7 0-6.3 1.3-8 2.6-.8.6-1.4 1.3-1.8 1.8-.2.2-.3.5-.4.6l-.1.2v.1l.4.2-.4.2v.1l.1.2c.1.1.2.4.4.6.4.5 1 1.2 1.8 1.8.5.4 1 .7 1.6 1.1l.7-.7c-.7-.3-1.2-.7-1.7-1.1-.7-.6-1.3-1.2-1.6-1.6-.1-.2-.3-.4-.3-.5.1-.1.2-.3.3-.5.3-.4.9-1 1.6-1.6.6-.5 1.3-1 2.2-1.4 1.3-.6 3-1 5.1-1 .7 0 1.3 0 1.9.1l.9-.9c-.8-.2-1.7-.3-2.7-.3ZM26.1 15.4l-.4.2.4.2.1-.2-.1-.2Zm-4.9-4.1-.7.7c.2.1.4.2.6.2.8.4 1.5.8 2.1 1.3.7.6 1.3 1.2 1.6 1.6.1.2.3.4.3.5-.1.1-.2.3-.3.5-.3.4-.9 1-1.6 1.6-1.2.9-2.8 1.9-5.2 2.2-.7.1-1.4.2-2.2.2-.7 0-1.3 0-1.9-.1-.4-.1-.8-.1-1.2-.2l-.8.8c1.1.3 2.4.5 3.9.5 3.7 0 6.3-1.3 8-2.6.8-.7 1.4-1.3 1.8-1.8.2-.2.3-.5.4-.6v-.2l-.4-.2.4-.2v-.1l-.1-.2c-.1-.1-.2-.4-.4-.6-.4-.5-1-1.2-1.8-1.8-.6-.6-1.5-1.1-2.5-1.5Z\"\n      />\n      <path d=\"m5.9 15.7-.4-.2-.1.2.1.2.4-.2Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'fail'\"\n    ><svg\n      id=\"fail\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.11 9.934a1.545 1.545 0 1 0-2.184 2.168l10.06 10.053c.284.289.67.454 1.075.461h.033c.4-.01.783-.171 1.07-.451l.007-.007.007-.007c.586-.6.586-1.557 0-2.157L12.11 9.934Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M20.093 9.724a1.553 1.553 0 0 1 2.194 2.17l-.028.035L12.02 22.162c-.289.282-.673.444-1.077.454h-.033a1.553 1.553 0 0 1-1.084-2.637l.006-.006L20.061 9.75l.032-.026Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'hourglass'\"\n    ><svg\n      id=\"hourglass\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m16.896 16 3.904-2.848V9.6h1.067V8.533H10.134V9.6H11.2v3.552L15.095 16 11.2 18.848V22.4h-1.067v1.067h11.733V22.4H20.8v-3.552L16.896 16Zm-4.628-3.392L16 15.338l3.733-2.73V9.6h-7.466v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33L16 14.016l-2.666-1.952Zm5.333 8.203h-5.333v1.066h5.333v-1.066Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'increase-indent'\"\n    ><svg\n      id=\"increase-indent\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.333 16.533h9.6v-1.067h-9.6v1.067ZM13.333 18.667h9.6V17.6h-9.6v1.067ZM9.066 20.8h13.867v-1.067H9.066V20.8ZM13.333 14.4h9.6v-1.067h-9.6V14.4ZM9.066 12.267h13.867V11.2H9.066v1.067ZM9.066 18.133l3.2-2.133-3.2-2.133v4.266Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info'\"\n    ><svg\n      id=\"info\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" />\n      <path d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info-circle'\"\n    ><svg\n      id=\"info-circle\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" />\n      <path d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info-circle-fill'\"\n    ><svg\n      id=\"info-circle-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path\n        fill=\"#fff\"\n        d=\"M26 16c0 5.523-4.477 10-10 10S6 21.523 6 16 10.477 6 16 6s10 4.477 10 10Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z\"\n        clip-rule=\"evenodd\"\n      />\n      <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" fill=\"#1076DB\" />\n      <path fill=\"#1076DB\" d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'info-circle-small'\"\n    ><svg\n      id=\"info-circle-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path d=\"M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0m1 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0\" />\n      <path d=\"M8 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M9 12V7H6v1h1v4H6v1h4v-1z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'junction'\"\n    ><svg\n      id=\"junction\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M19.2 8.565h-8.533L6.4 11.232l4.267 2.667H19.2V8.565ZM22.294 14.965h-8.533V20.3h8.533l4.267-2.667-4.267-2.667ZM16.427 21.365a.528.528 0 0 0-.533.534v3.2c0 .298.234.533.533.533a.528.528 0 0 0 .533-.533v-3.2a.528.528 0 0 0-.533-.534ZM16.427 7.477a.528.528 0 0 0 .533-.533V5.867a.528.528 0 0 0-.533-.534.528.528 0 0 0-.533.534v1.077c0 .299.234.533.533.533Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'link'\"\n    ><svg\n      id=\"link\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M20.707 11.121a1 1 0 0 0-1.414 0l-.354.354a1 1 0 0 1-1.414-1.414l.354-.354a3 3 0 0 1 4.242 0l.707.707a3 3 0 0 1 0 4.243l-4.242 4.242a2.5 2.5 0 0 1-3.536 0 1 1 0 1 1 1.415-1.414.5.5 0 0 0 .707 0l4.242-4.242a1 1 0 0 0 0-1.415l-.707-.707Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M11.868 21.374a1 1 0 0 0 1.414 0l.354-.353a1 1 0 0 1 1.414 1.414l-.354.354a3 3 0 0 1-4.242 0l-.707-.708a3 3 0 0 1 0-4.242l3.889-3.89a3 3 0 0 1 4.242 0l.354.354a1 1 0 1 1-1.414 1.414l-.354-.353a1 1 0 0 0-1.414 0l-3.889 3.89a1 1 0 0 0 0 1.413l.707.707Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'list-add'\"\n    ><svg\n      id=\"list-add\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.5 6.5a.5.5 0 0 1 .5.5v2h2.5V7a.5.5 0 0 1 1 0v2H19V7a.5.5 0 0 1 1 0v2h1a1 1 0 0 1 1 1v1a4.978 4.978 0 0 0-3 1h-6.5a.5.5 0 0 0 0 1H18a4.977 4.977 0 0 0-.9 2h-4.6a.5.5 0 0 0 0 1H17a5 5 0 0 0 5 5v1a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h1V7a.5.5 0 0 1 .5-.5Zm0 11.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22 12.5a.5.5 0 0 1 .5.5v2.5H25a.5.5 0 0 1 0 1h-2.5V19a.5.5 0 0 1-1 0v-2.5H19a.5.5 0 0 1 0-1h2.5V13a.5.5 0 0 1 .5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'list-minus'\"\n    ><svg\n      id=\"list-minus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.5 6.5a.5.5 0 0 1 .5.5v2h2.5V7a.5.5 0 0 1 1 0v2H19V7a.5.5 0 0 1 1 0v2h1a1 1 0 0 1 1 1v1a4.978 4.978 0 0 0-3 1h-6.5a.5.5 0 0 0 0 1H18a4.977 4.977 0 0 0-.9 2h-4.6a.5.5 0 0 0 0 1H17a5 5 0 0 0 5 5v1a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h1V7a.5.5 0 0 1 .5-.5Zm0 11.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M18.5 16a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'lock'\"\n    ><svg\n      id=\"lock\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M20.8 13.43h-1.066v-.534a3.733 3.733 0 1 0-7.467 0v.533h-1.066c-.59 0-1.067.478-1.067 1.067v6.933a1.6 1.6 0 0 0 1.6 1.6h8.533a1.6 1.6 0 0 0 1.6-1.6v-6.933c0-.59-.477-1.067-1.067-1.067Zm-7.466-.534a2.667 2.667 0 1 1 5.333 0v.533h-5.333v-.533Zm6.933 9.067a.533.533 0 0 0 .533-.534v-6.933h-9.6v6.933a.544.544 0 0 0 .534.534h8.533Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M17.6 17.163a1.6 1.6 0 1 0-2.4 1.376v1.557a.8.8 0 1 0 1.6 0v-1.557a1.59 1.59 0 0 0 .8-1.376Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'lock-open'\"\n    ><svg\n      id=\"lock-open\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.267 12.279v-.06 3.344H20.8c.59 0 1.067.477 1.067 1.066v6.934a1.6 1.6 0 0 1-1.6 1.6h-8.533a1.6 1.6 0 0 1-1.6-1.6v-6.934c0-.589.477-1.066 1.066-1.066h1.067v-3.284Zm8 11.817a.533.533 0 0 0 .533-.533v-6.934h-9.6v6.934a.544.544 0 0 0 .534.533h8.533Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M17.6 19.296a1.6 1.6 0 1 0-2.4 1.376v1.557a.8.8 0 1 0 1.6 0v-1.557a1.59 1.59 0 0 0 .8-1.376Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.268 16.106V11.66C12.268 9.708 13.976 8 16 8c2.025 0 3.733 1.708 3.733 3.66v.073h-1.067v-.073c0-1.363-1.23-2.593-2.666-2.593s-2.667 1.23-2.667 2.593v4.446h-1.066Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'magic-wand'\"\n    ><svg\n      id=\"magic-wand\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m14.264 16.686-7.643 7.717a.722.722 0 0 0 0 1.04c.147.148.294.148.588.148s.44 0 .588-.149l7.643-7.717a.722.722 0 0 0 0-1.039c-.294-.296-.882-.296-1.176 0\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M19.703 13.125c.147 0 .441 0 .588-.149l2.94-2.968a.722.722 0 0 0 0-1.039.706.706 0 0 0-1.03 0l-2.939 2.968c-.294.149-.294.594-.147.89.147.15.441.298.588.298M20.29 16.686a.706.706 0 0 0-1.028 0 .722.722 0 0 0 0 1.04l2.94 2.967c.146.149.293.149.587.149s.441 0 .588-.149a.722.722 0 0 0 0-1.039l-3.087-2.968ZM12.5 8.82a.706.706 0 0 0-1.028 0 .722.722 0 0 0 0 1.04l2.94 2.968c.146.148.293.148.587.148s.441 0 .588-.148a.722.722 0 0 0 0-1.039L12.5 8.821ZM17.351 17.577c-.44 0-.735.296-.735.742v4.007c0 .445.294.742.735.742s.735-.297.735-.742v-4.007c0-.445-.44-.742-.735-.742\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M17.351 6.446c-.44 0-.735.297-.735.742v4.007c0 .445.294.742.735.742s.735-.296.735-.742V7.188c0-.445-.44-.742-.735-.742\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.854 15.5h3.969c.44 0 .735-.298.735-.743s-.441-.742-.735-.742H9.854c-.44 0-.735.297-.735.742s.294.742.735.742\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M24.847 14.015h-3.969c-.44 0-.734.297-.734.742s.294.742.735.742h3.968c.441 0 .735-.297.735-.742s-.441-.742-.735-.742\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'mail'\"\n    ><svg\n      id=\"mail\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M24 10H8l8 7 8-7Z\" />\n      <path d=\"m16 18.5-8-7V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9.5l-8 7Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'menu'\"\n    ><svg\n      id=\"menu\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M28.8 9.067H3.2V5.333h25.6v3.734Zm0 4.8H3.2V17.6h25.6v-3.733Zm0 8.533H3.2v3.733h25.6V22.4Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'message'\"\n    ><svg\n      id=\"message\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M11 25.5V22h3.5L11 25.5Z\" />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7 11a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-9Zm3 5.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm.75-4.75a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5h-10.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'minus'\"\n    ><svg\n      id=\"minus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M10 15h12v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'minus-ring-fill'\"\n    ><svg\n      id=\"minus-ring-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path fill=\"#1076DB\" d=\"M10 15h12v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'new-tab'\"\n    ><svg\n      id=\"new-tab\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M17.571 8H23.464c.296 0 .536.24.536.536V14.429h-1.071v-4.6l-7.657 7.657-.38.379-.757-.758.38-.379 7.656-7.657h-4.6V8ZM9 10.143h7.5v1.071h-6.429V21.93h10.715V15.5h1.071V23H9V10.143Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'notebook'\"\n    ><svg\n      id=\"notebook\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13 7a.5.5 0 0 0-1 0v2h-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1h-1V7a.5.5 0 0 0-1 0v2h-2.5V7a.5.5 0 0 0-1 0v2H13V7Zm-1 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm.5-3.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7Zm-.5-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'notification'\"\n    ><svg\n      id=\"notification\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 24a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0 1a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z\"\n        clip-rule=\"evenodd\"\n      />\n      <g clip-path=\"url(#a)\">\n        <circle cx=\"16\" cy=\"11.5\" r=\"1.5\" />\n        <path d=\"M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M8 8h16v16H8z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'numbering'\"\n    ><svg\n      id=\"numbering\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M8.897 8v4.732H7.812V9.078l-1.015.623-.483-.735L7.91 8h.987ZM7.705 13.902c.34 0 .632.06.875.182.247.121.434.285.56.49.13.205.196.432.196.679 0 .252-.051.492-.154.721-.103.229-.285.492-.546.791-.261.294-.642.667-1.14 1.12h1.938l-.112.847h-3.08v-.784c.574-.565.992-.99 1.253-1.274.261-.29.443-.53.546-.721.107-.191.161-.387.161-.588 0-.191-.056-.34-.168-.448a.582.582 0 0 0-.441-.168.845.845 0 0 0-.448.119 1.61 1.61 0 0 0-.413.371l-.65-.518a2.15 2.15 0 0 1 .699-.602c.275-.145.583-.217.924-.217ZM7.701 19.902c.331 0 .614.054.847.161.238.107.418.252.539.434.126.182.189.385.189.609 0 .285-.082.523-.245.714-.159.191-.385.329-.679.413.317.033.576.147.777.343.2.191.301.464.301.819 0 .266-.07.511-.21.735-.14.22-.348.394-.623.525-.27.13-.595.196-.973.196-.69 0-1.232-.238-1.624-.714l.595-.581c.159.159.313.275.462.35.154.07.322.105.504.105.22 0 .397-.06.532-.182.135-.121.203-.29.203-.504 0-.243-.065-.415-.196-.518-.126-.107-.317-.161-.574-.161h-.392l.119-.763h.273c.21 0 .376-.054.497-.161.121-.107.182-.259.182-.455a.49.49 0 0 0-.168-.399c-.112-.098-.266-.147-.462-.147-.331 0-.64.138-.924.413l-.546-.595a2.24 2.24 0 0 1 1.596-.637Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M12.347 10.232a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5ZM12.347 16.732a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5ZM12.347 22.732a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'pdf'\"\n    ><svg\n      id=\"pdf\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7.69 12.363c1.857 0 2.987.757 2.987 2.346 0 1.696-1.226 2.454-2.89 2.454h-.864v2.57H5.515v-7.37H7.69Zm-.01 3.744c.939 0 1.525-.32 1.525-1.398 0-.928-.565-1.312-1.525-1.312h-.757v2.71h.757Zm5.952-3.744c1.941 0 3.776.597 3.776 3.648 0 2.986-1.824 3.722-3.584 3.722h-2.006v-7.37h1.814Zm-.405 1.056v5.258h.693c1.099 0 2.005-.49 2.005-2.666 0-2.219-.96-2.592-2.048-2.592h-.65Zm9.525-.011h-2.613v2.208h2.272v1.045h-2.272v3.072H18.73v-7.37h4.17l-.149 1.045Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M7.5 6A1.5 1.5 0 0 1 9 4.5h15A1.5 1.5 0 0 1 25.5 6v16.207L20.707 27H9a1.5 1.5 0 0 1-1.5-1.5V21h1v4.5a.5.5 0 0 0 .5.5h11v-3a1.5 1.5 0 0 1 1.5-1.5h3V6a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v5h-1V6Zm16.293 16.5H21.5a.5.5 0 0 0-.5.5v2.293l2.793-2.793Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'paperclip'\"\n    ><svg\n      id=\"paperclip\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M11 8.594a3.594 3.594 0 1 1 7.188 0V21.53a2.156 2.156 0 0 1-4.313 0V11.47a.719.719 0 1 1 1.438 0V21.53a.719.719 0 1 0 1.437 0V8.594a2.157 2.157 0 0 0-4.312 0V21.53a3.593 3.593 0 1 0 7.187 0V11.47a.719.719 0 1 1 1.438 0V21.53a5.032 5.032 0 0 1-10.063 0z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'people'\"\n    ><svg\n      id=\"people\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"34\"\n      height=\"33\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M25 17.197a6 6 0 1 0-6.367-10.164A6 6 0 0 1 21 18.197V19h2a4 4 0 0 1 4 4v1h4v-2a4 4 0 0 0-4-4h-2v-.803ZM14.353 19H15v-.465c-.231.134-.448.29-.646.465Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22 14c0 2.22-1.207 4.16-3 5.197V20h2a4 4 0 0 1 4 4v2H7v-2a4 4 0 0 1 4-4h2v-.803A6 6 0 1 1 22 14Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'person'\"\n    ><svg\n      id=\"person\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22 13c0 2.22-1.207 4.16-3 5.197V19h2a4 4 0 0 1 4 4v2H7v-2a4 4 0 0 1 4-4h2v-.803A6 6 0 1 1 22 13Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'person-small'\"\n    ><svg\n      id=\"person-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13 6a4.993 4.993 0 0 1-2 4v1h1a4 4 0 0 1 4 4v1H0v-1a4 4 0 0 1 4-4h1v-1a5 5 0 1 1 8-4Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'picker'\"\n    ><svg\n      id=\"picker\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.794 14.851a3.396 3.396 0 0 1 3.392-3.392 3.395 3.395 0 0 1 3.393 3.392 3.396 3.396 0 0 1-3.393 3.392 3.396 3.396 0 0 1-3.392-3.392m10.408 6.512-3.01-3.122a5.22 5.22 0 0 0 1.247-3.39A5.258 5.258 0 0 0 20.186 9.6a5.257 5.257 0 0 0-5.252 5.251 5.258 5.258 0 0 0 5.252 5.25c.932 0 1.807-.246 2.565-.673l3.093 3.208c.361.372.96.383 1.334.023a.915.915 0 0 0 .024-1.296\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M3.2 17.067h8.533V16H3.2v1.067ZM3.2 12.8h9.6v-1.067H3.2V12.8ZM3.2 8.533h10.667V7.467H3.2v1.066ZM3.2 21.333h9.6v-1.066H3.2v1.066ZM3.2 25.6h8.533v-1.067H3.2V25.6Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'pin-small'\"\n    ><svg\n      id=\"pin-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M8.34 4C6.5 4 5 5.52 5 7.39c0 .6.16 1.23.43 1.67l.02.04c.07.12.38.52.8 1 .86.99 2.11 2.33 2.11 2.33s1.24-1.36 2.09-2.34c.4-.47.7-.86.77-.97l.04-.07c.28-.44.43-1.07.43-1.67 0-1.86-1.5-3.38-3.35-3.38Zm0 5.24c-1.04 0-1.89-.85-1.89-1.89s.85-1.9 1.89-1.9 1.9.85 1.9 1.89-.85 1.9-1.9 1.9Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'place'\"\n    ><svg\n      id=\"place\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M21.867 8.533c0 .295-.219.534-.489.534H10.623c-.27 0-.49-.24-.49-.534 0-.294.22-.533.49-.533h10.755c.27 0 .49.239.49.533M15.623 11.89l-5.333 5.333a.534.534 0 0 0 .754.754l4.423-4.422v9.912a.533.533 0 1 0 1.067 0v-9.912l4.422 4.422a.534.534 0 0 0 .755-.754l-5.334-5.333a.534.534 0 0 0-.754 0\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'place-ring-fill'\"\n    ><svg\n      id=\"place-ring-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M23.467 21.733c-.294 0-.533-.219-.533-.489V10.49c0-.27.238-.489.533-.489.294 0 .533.219.533.489v10.755c0 .27-.239.49-.533.49ZM20.11 15.49l-5.333-5.334a.534.534 0 0 0-.754.754l4.422 4.424H8.532a.533.533 0 1 0 0 1.066h9.913l-4.422 4.423a.534.534 0 0 0 .754.754l5.333-5.334a.534.534 0 0 0 0-.754Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'plus'\"\n    ><svg\n      id=\"plus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path d=\"M16 9h1v13h-1z\" />\n      <path d=\"M10 15h13v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'print'\"\n    ><svg\n      id=\"print\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <mask\n        id=\"a\"\n        width=\"20\"\n        height=\"20\"\n        x=\"6\"\n        y=\"6\"\n        maskUnits=\"userSpaceOnUse\"\n        style=\"mask-type: luminance\"\n      >\n        <path fill-rule=\"evenodd\" d=\"M6.4 6.933h19.2v18.134H6.4V6.933Z\" clip-rule=\"evenodd\" />\n      </mask>\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m21.654 24-11.414.107v-6.4c0-.214.107-.32.214-.32H21.44c.107 0 .214.106.214.32V24ZM10.24 8h11.414v1.813H10.24V8Zm12.587 16.107V22.08c.107 0 .213.107.32.107h1.173c.747 0 1.28-.64 1.28-1.387v-8.32c0-1.387-1.066-2.56-2.346-2.56h-.427V7.893c0-.533-.533-.96-1.067-.96H10.24c-.64 0-1.066.427-1.066.96V9.92h-.427c-1.28 0-2.347 1.173-2.347 2.56v8.213c0 .747.64 1.387 1.28 1.387h1.387v2.027c0 .533.533.96 1.067.96h11.413c.747 0 1.28-.427 1.28-.96Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path d=\"M11.84 20.053h8.32v-1.066h-8.32v1.066ZM11.84 22.827h8.32V21.76h-8.32v1.067Z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'question-mark'\"\n    ><svg\n      id=\"question-mark\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M15.992 7c.96 0 1.784.176 2.472.528.704.336 1.232.792 1.584 1.368.352.576.528 1.192.528 1.848 0 .624-.112 1.16-.336 1.608a3.336 3.336 0 0 1-.768 1.056c-.304.272-.712.592-1.224.96-.672.464-1.176.896-1.512 1.296-.336.384-.504.904-.504 1.56v1.08h-2.184v-1.2c0-.688.112-1.272.336-1.752.24-.48.52-.864.84-1.152.32-.288.744-.616 1.272-.984.608-.4 1.056-.76 1.344-1.08.288-.32.432-.736.432-1.248 0-.656-.216-1.16-.648-1.512-.432-.368-1.024-.552-1.776-.552-1.28 0-2.392.576-3.336 1.728L11 9.376C12.344 7.792 14.008 7 15.992 7ZM15.2 20.776c.48 0 .88.16 1.2.48.32.32.48.712.48 1.176 0 .464-.16.864-.48 1.2-.32.32-.72.48-1.2.48a1.6 1.6 0 0 1-1.176-.48 1.68 1.68 0 0 1-.48-1.2c0-.464.16-.856.48-1.176a1.6 1.6 0 0 1 1.176-.48Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'question-mark-small'\"\n    ><svg\n      id=\"question-mark-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M8.094 3c.616 0 1.139.103 1.568.308.439.205.77.48.994.826.224.345.336.723.336 1.134 0 .373-.065.695-.196.966-.13.261-.29.476-.476.644-.187.168-.43.355-.728.56-.383.252-.667.485-.854.7-.187.215-.28.5-.28.854v.476H6.792v-.546c0-.42.065-.775.196-1.064.14-.299.303-.532.49-.7.187-.177.43-.369.728-.574.317-.215.546-.401.686-.56a.862.862 0 0 0 .224-.616c0-.308-.107-.546-.322-.714-.205-.177-.49-.266-.854-.266-.663 0-1.255.308-1.778.924L5 4.442C5.812 3.481 6.843 3 8.094 3Zm-.448 7.826c.317 0 .588.112.812.336.224.215.336.48.336.798 0 .308-.112.574-.336.798a1.106 1.106 0 0 1-.812.336 1.09 1.09 0 0 1-.798-.336 1.114 1.114 0 0 1-.322-.798c0-.317.107-.583.322-.798a1.06 1.06 0 0 1 .798-.336Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'required'\"\n    ><svg\n      id=\"required\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.745 9a.75.75 0 0 1 .75.75v4.676l3.87-2.32a.75.75 0 0 1 .77 1.287l-3.931 2.357 3.932 2.357a.75.75 0 1 1-.771 1.286l-3.87-2.319v4.676a.75.75 0 0 1-1.5 0v-4.675l-3.859 2.318a.75.75 0 0 1-.772-1.286l3.925-2.357-3.925-2.357a.75.75 0 0 1 .772-1.286l3.86 2.318V9.75a.75.75 0 0 1 .75-.75Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-close'\"\n    ><svg\n      id=\"ring-close\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        d=\"M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z\"\n      />\n      <path\n        d=\"M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-close-fill'\"\n    ><svg\n      id=\"ring-close-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path\n        fill=\"#fff\"\n        d=\"M29 16C29 23.1797 23.1797 29 16 29C8.8203 29 3 23.1797 3 16C3 8.8203 8.8203 3 16 3C23.1797 3 29 8.8203 29 16Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28ZM16 29C23.1797 29 29 23.1797 29 16C29 8.8203 23.1797 3 16 3C8.8203 3 3 8.8203 3 16C3 23.1797 8.8203 29 16 29Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        d=\"M20.2545 20.9324C20.0775 20.9294 19.9088 20.8565 19.7852 20.7298L11.2518 12.1964C11.05 12.0347 10.9589 11.7714 11.0176 11.5195C11.0763 11.2676 11.2744 11.0717 11.5269 11.0159C11.7795 10.96 12.0417 11.0541 12.2012 11.2578L20.7345 19.7911C20.9892 20.0522 20.9892 20.4687 20.7345 20.7298C20.6057 20.8553 20.4343 20.9277 20.2545 20.9324Z\"\n      />\n      <path\n        fill=\"#1076DB\"\n        d=\"M11.721 20.9324C11.9008 20.9277 12.0723 20.8553 12.201 20.7298L20.7344 12.1964C20.9447 11.9278 20.9203 11.5442 20.6777 11.3044C20.4351 11.0645 20.0513 11.0445 19.785 11.2578L11.2517 19.7911C11.0643 19.9831 11.009 20.268 11.1111 20.5161C11.2131 20.7642 11.4528 20.9279 11.721 20.9324V20.9324Z\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-plus-fill'\"\n    ><svg\n      id=\"ring-plus-fill\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      fill=\"none\"\n    >\n      <path fill=\"#fff\" d=\"M29 16c0 7.18-5.82 13-13 13S3 23.18 3 16 8.82 3 16 3s13 5.82 13 13Z\" />\n      <path\n        fill=\"#1076DB\"\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path fill=\"#1076DB\" d=\"M16 9h1v13h-1z\" />\n      <path fill=\"#1076DB\" d=\"M10 15h13v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'ring-plus'\"\n    ><svg\n      id=\"ring-plus\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path d=\"M16 9h1v13h-1z\" />\n      <path d=\"M10 15h13v1H10z\" /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'rosette'\"\n    ><svg\n      id=\"rosette\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.439 20.144a5.925 5.925 0 0 1-5.92-5.919 5.925 5.925 0 0 1 5.92-5.919 5.926 5.926 0 0 1 5.92 5.92 5.926 5.926 0 0 1-5.92 5.918Zm9.385-5.862a.754.754 0 0 0 .532-.305.655.655 0 0 0 .112-.53l-.61-2.758a.656.656 0 0 0-.327-.432.746.746 0 0 0-.61-.05l-2.295.786c-.158-.3-.339-.586-.537-.86l1.73-1.705a.755.755 0 0 0 .227-.572.655.655 0 0 0-.242-.483L21.61 5.596a.65.65 0 0 0-.524-.136.753.753 0 0 0-.51.34L19.27 7.845a6.993 6.993 0 0 0-1.017-.357l.273-2.41a.756.756 0 0 0-.182-.586.654.654 0 0 0-.493-.224h-2.824a.654.654 0 0 0-.492.224.752.752 0 0 0-.183.585l.273 2.411c-.349.094-.687.21-1.01.354l-1.304-2.04a.751.751 0 0 0-.512-.34.65.65 0 0 0-.523.135L9.082 7.373a.655.655 0 0 0-.242.483c-.011.211.071.42.226.572l1.727 1.7c-.199.274-.381.561-.541.863l-2.287-.785a.748.748 0 0 0-.611.051.657.657 0 0 0-.327.432l-.61 2.759a.65.65 0 0 0 .112.529c.123.17.318.281.533.305l2.407.255c.013.28.04.554.085.824l-2.304.748a.747.747 0 0 0-.457.41.65.65 0 0 0 0 .54l1.169 2.571c.077.17.227.299.41.356a.754.754 0 0 0 .606-.078l2.074-1.24c.234.283.493.54.767.784l-3.375 5.905 3.83-.958.996 2.987 3.047-5.338 3.046 5.338.998-2.987 3.83.958-3.293-5.76c.338-.28.65-.592.93-.931l2.078 1.241a.752.752 0 0 0 .607.08.666.666 0 0 0 .41-.357l1.17-2.572a.65.65 0 0 0 0-.538.75.75 0 0 0-.459-.411l-2.309-.75a7.17 7.17 0 0 0 .084-.821l2.415-.256Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'rule'\"\n    ><svg\n      id=\"rule\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M15.467 8.533v7.574a2.666 2.666 0 0 0 0 5.226v2.134h1.067V21.28a2.666 2.666 0 0 0 0-5.227v-7.52h-1.067Zm-4.265 14.934v-6.454a2.666 2.666 0 0 0 0-5.226V9.6h-1.067v2.24a2.666 2.666 0 0 0 0 5.227v6.4h1.067ZM9.069 14.4a1.6 1.6 0 1 1 3.2 0 1.6 1.6 0 0 1-3.2 0Zm12.263-1.6a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Zm-.534 10.667h1.067v-6.454a2.666 2.666 0 0 0 0-5.226V9.6h-1.067v2.24a2.666 2.666 0 0 0 0 5.227v6.4ZM16 20.267a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'search'\"\n    ><svg\n      id=\"search\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m19.114 18.485 3.083 3.2a.917.917 0 0 1 0 1.227.981.981 0 0 1-1.366 0l-3.2-3.2a5.472 5.472 0 0 1-2.634.683 5.397 5.397 0 1 1 5.397-5.333 5.227 5.227 0 0 1-1.28 3.423Zm-5.473-6.65a3.488 3.488 0 0 0-2.11 3.27 3.467 3.467 0 0 0 3.476 3.423 3.488 3.488 0 1 0-1.366-6.693Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'seats'\"\n    ><svg\n      id=\"seats\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M9.602 8.001c-.882 0-1.6.717-1.6 1.599s.718 1.6 1.599 1.6c.882 0 1.601-.717 1.601-1.599s-.718-1.6-1.6-1.6m0 4.267A2.67 2.67 0 0 1 6.935 9.6a2.67 2.67 0 0 1 2.666-2.667 2.67 2.67 0 0 1 2.667 2.668A2.67 2.67 0 0 1 9.6 12.268M16.002 8.002c-.882 0-1.6.717-1.6 1.6a1.6 1.6 0 0 0 1.6 1.599c.427 0 .83-.166 1.132-.468a1.602 1.602 0 0 0-1.132-2.73m0 4.266a2.67 2.67 0 0 1-2.666-2.667 2.67 2.67 0 0 1 2.667-2.668 2.671 2.671 0 0 1 2.666 2.668 2.65 2.65 0 0 1-.78 1.886 2.65 2.65 0 0 1-1.886.78M9.601 14.401a1.601 1.601 0 0 0-.001 3.2c.882 0 1.601-.718 1.601-1.6 0-.882-.718-1.6-1.6-1.6m0 4.267A2.671 2.671 0 0 1 6.934 16 2.67 2.67 0 0 1 9.6 13.333a2.67 2.67 0 0 1 2.667 2.668A2.67 2.67 0 0 1 9.6 18.668M18.135 16.002A2.134 2.134 0 1 1 13.866 16a2.134 2.134 0 0 1 4.269.002\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.001 14.402a1.601 1.601 0 0 0 0 3.2c.881 0 1.6-.718 1.6-1.6 0-.882-.717-1.6-1.6-1.6m0 4.267A2.671 2.671 0 0 1 13.335 16a2.67 2.67 0 0 1 2.667-2.667 2.67 2.67 0 0 1 2.666 2.668 2.67 2.67 0 0 1-2.667 2.667\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.402 8.003c-.882 0-1.6.717-1.6 1.6a1.6 1.6 0 0 0 1.599 1.599c.427 0 .83-.166 1.133-.468a1.602 1.602 0 0 0-1.132-2.73m0 4.266h-.001a2.67 2.67 0 0 1-2.666-2.667 2.67 2.67 0 0 1 2.667-2.668 2.671 2.671 0 0 1 2.667 2.668c0 .713-.278 1.383-.781 1.887a2.657 2.657 0 0 1-1.886.78\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M24.534 16.003a2.134 2.134 0 1 1-4.268-.002 2.134 2.134 0 0 1 4.268.002\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.4 14.403a1.601 1.601 0 0 0 0 3.2c.882 0 1.6-.718 1.6-1.6 0-.882-.717-1.6-1.6-1.6m0 4.267a2.671 2.671 0 0 1-2.666-2.668 2.669 2.669 0 0 1 2.667-2.667 2.671 2.671 0 0 1 2.667 2.668A2.67 2.67 0 0 1 22.4 18.67M11.733 22.401a2.133 2.133 0 1 1-4.267 0 2.133 2.133 0 0 1 4.268 0\"\n        clip-rule=\"evenodd\"\n      />\n      <mask\n        id=\"b\"\n        width=\"7\"\n        height=\"7\"\n        x=\"6\"\n        y=\"19\"\n        maskUnits=\"userSpaceOnUse\"\n        style=\"mask-type: luminance\"\n      >\n        <path fill-rule=\"evenodd\" d=\"M6.934 19.734h5.333v5.334H6.934v-5.334Z\" clip-rule=\"evenodd\" />\n      </mask>\n      <g mask=\"url(#b)\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M9.599 20.8A1.595 1.595 0 0 0 8 22.4c0 .882.717 1.6 1.599 1.6s1.6-.717 1.601-1.6c0-.881-.718-1.6-1.6-1.6h-.001Zm0 4.268a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.884-.78H9.6a2.669 2.669 0 0 1 2.667 2.667 2.671 2.671 0 0 1-2.668 2.667Z\"\n          clip-rule=\"evenodd\"\n        />\n      </g>\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M18.134 22.402a2.133 2.133 0 1 1-4.267 0 2.133 2.133 0 0 1 4.267 0\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16 20.802a1.595 1.595 0 0 0-1.6 1.599c0 .882.717 1.6 1.6 1.601.881 0 1.6-.718 1.6-1.6 0-.882-.718-1.6-1.6-1.6Zm0 4.267a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.883-.78h.003a2.669 2.669 0 0 1 2.666 2.667A2.671 2.671 0 0 1 16 25.069ZM24.533 22.403a2.133 2.133 0 1 1-4.267 0 2.133 2.133 0 0 1 4.267 0\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.399 20.803a1.595 1.595 0 0 0-1.6 1.599c0 .882.718 1.6 1.6 1.601.882 0 1.6-.718 1.6-1.6 0-.882-.717-1.6-1.6-1.6Zm0 4.267a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.884-.78h.002a2.669 2.669 0 0 1 2.667 2.667 2.671 2.671 0 0 1-2.668 2.667Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'settings'\"\n    ><svg\n      id=\"settings\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M23.819 16.768v-1.344a1.067 1.067 0 0 0-.864-1.067l-1.259-.181a6.1 6.1 0 0 0-.352-.864l.758-1.013c.32-.425.28-1.021-.096-1.398l-.95-.949a1.067 1.067 0 0 0-1.397-.107l-1.067.768a5.509 5.509 0 0 0-.853-.352l-.181-1.258a1.067 1.067 0 0 0-1.067-.918h-1.344a1.067 1.067 0 0 0-1.067.918L13.9 10.26c-.294.094-.58.211-.853.352l-1.067-.768a1.067 1.067 0 0 0-1.397.107l-.95.95a1.067 1.067 0 0 0-.096 1.397l.758 1.013c-.14.279-.257.567-.352.864l-1.259.181c-.53.075-.923.532-.917 1.067v1.344c-.006.535.387.992.917 1.067l1.259.181c.095.293.213.578.352.853l-.758 1.067a1.067 1.067 0 0 0 .096 1.387l.95.96c.376.376.973.417 1.397.096l1.067-.768c.271.149.557.27.853.362l.181 1.259c.075.53.532.923 1.067.917h1.29c.536.006.992-.387 1.067-.917l.182-1.259c.296-.092.581-.213.853-.362l1.067.768c.424.32 1.02.28 1.397-.096l.95-.96c.37-.375.41-.965.095-1.387l-.757-1.067c.14-.275.257-.56.352-.853l1.259-.181c.53-.075.922-.532.917-1.067Zm-7.2 4.181-.267 1.867h-.981l-.267-1.867-.757-.245a5.093 5.093 0 0 1-.672-.288l-.715-.352-1.504 1.13-.693-.693 1.13-1.514-.362-.704a5.236 5.236 0 0 1-.277-.672l-.246-.758-1.866-.266v-.982l1.866-.266.246-.758c.074-.23.167-.456.277-.672l.363-.714-1.131-1.504.693-.694 1.504 1.131.715-.363c.215-.113.44-.206.672-.277l.757-.245.267-1.867h.981l.267 1.867.757.245c.233.07.458.162.672.277l.715.363 1.504-1.13.693.693-1.13 1.504.362.714c.11.216.204.441.278.672l.245.758 1.867.266v.982l-1.867.266-.245.758a5.25 5.25 0 0 1-.278.672l-.362.704 1.13 1.514-.693.694-1.504-1.131-.715.352c-.216.114-.44.21-.672.288l-.757.245Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.152 16.096a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Zm4 0a1.333 1.333 0 1 0-2.667 0 1.333 1.333 0 0 0 2.667 0Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'shopping-cart'\"\n    ><svg\n      id=\"shopping-cart\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M22.524 9.674a1 1 0 0 1 .868 1.117L22.216 20.2H9.784l-1.027-8.194a.387.387 0 0 0-.384-.34h-3.04a1 1 0 1 1 0-2h3.04a2.387 2.387 0 0 1 2.368 2.093l.808 6.441h8.901l.957-7.657a1 1 0 0 1 1.117-.869ZM11.733 25.6a2.133 2.133 0 1 0 0-4.267 2.133 2.133 0 0 0 0 4.267ZM20.267 25.6a2.133 2.133 0 1 0 0-4.267 2.133 2.133 0 0 0 0 4.267Z\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M22.4 12.233H9.6v-1h12.8v1ZM21.334 15.967H10.667v-1h10.667v1Z\"\n        clip-rule=\"evenodd\"\n      />\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M13.366 18.667v-6.934h1v6.934h-1ZM17.634 18.667v-6.934h1v6.934h-1Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'sorter'\"\n    ><svg\n      id=\"sorter\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.146 10.646a.5.5 0 0 1 .708 0l4.5 4.5a.5.5 0 0 1-.708.708L17 12.207V20.5a.5.5 0 0 1-1 0v-8.293l-3.646 3.647a.5.5 0 0 1-.708-.708l4.5-4.5Z\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'star'\"\n    ><svg\n      id=\"star\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"m16.811 8.83 2.121 4.298 4.745.69a.533.533 0 0 1 .294.91l-3.432 3.345.81 4.724a.533.533 0 0 1-.773.562l-4.242-2.23-4.244 2.23a.532.532 0 0 1-.772-.562l.809-4.724-3.43-3.346a.533.533 0 0 1 .294-.91l4.743-.689 2.122-4.297a.532.532 0 0 1 .955 0\"\n        clip-rule=\"evenodd\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'switch'\"\n    ><svg\n      id=\"switch\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        d=\"M17.597 14.933a.528.528 0 0 0-.533.534v2.666h-6.71l2.294-2.293a.528.528 0 0 0 0-.757.528.528 0 0 0-.758 0l-3.2 3.2a.481.481 0 0 0-.117.181.533.533 0 0 0 0 .405.38.38 0 0 0 .118.171l3.2 3.2a.5.5 0 0 0 .373.16.5.5 0 0 0 .373-.16.528.528 0 0 0 0-.757L10.354 19.2h7.243a.528.528 0 0 0 .534-.533v-3.2a.528.528 0 0 0-.534-.534Z\"\n      />\n      <path\n        d=\"M24.488 12.47a.534.534 0 0 0 0-.406.488.488 0 0 0-.117-.17l-3.2-3.2a.528.528 0 0 0-.758 0 .528.528 0 0 0 0 .757l2.294 2.282h-7.243a.528.528 0 0 0-.533.534v3.2c0 .298.234.533.533.533a.528.528 0 0 0 .533-.533V12.8h6.71l-2.294 2.293a.528.528 0 0 0 0 .758c.107.096.246.149.384.149a.5.5 0 0 0 .374-.16l3.2-3.2a.38.38 0 0 0 .117-.17Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'three-dots'\">\n    <svg\n      id=\"three-dots\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M8.96 16a3.2 3.2 0 1 1-6.4 0 3.2 3.2 0 0 1 6.4 0ZM16 12.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm7.04 3.2a3.2 3.2 0 1 1 6.4 0 3.2 3.2 0 0 1-6.4 0Z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </ng-container>\n\n  <ng-container *ngIf=\"icon === 'three-dots-small'\"\n    ><svg\n      id=\"three-dots-small\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n    >\n      <path\n        d=\"M5 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM13.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM8.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z\"\n      /></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'waiting-approval'\"\n    ><svg\n      id=\"waiting-approval\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g fill-rule=\"evenodd\" clip-path=\"url(#a)\" clip-rule=\"evenodd\">\n        <path\n          d=\"m10.896 16 3.904-2.848V9.6h1.067V8.533H4.134V9.6H5.2v3.552L9.094 16 5.2 18.848V22.4H4.134v1.067h11.733V22.4H14.8v-3.552L10.896 16Zm-4.628-3.392L10 15.338l3.733-2.73V9.6H6.268v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33l-2.666 1.952-2.667-1.952Zm5.333 8.203H7.334v1.066h5.333v-1.066ZM26.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.488-1.335l2.445 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'waiting-decline'\"\n    ><svg\n      id=\"waiting-decline\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g fill-rule=\"evenodd\" clip-path=\"url(#a)\" clip-rule=\"evenodd\">\n        <path\n          d=\"m10.896 16 3.904-2.848V9.6h1.067V8.533H4.134V9.6H5.2v3.552L9.094 16 5.2 18.848V22.4H4.134v1.067h11.733V22.4H14.8v-3.552L10.896 16Zm-4.628-3.392L10 15.338l3.733-2.73V9.6H6.268v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33l-2.666 1.952-2.667-1.952Zm5.333 8.203H7.334v1.066h5.333v-1.066ZM17.293 11.293a1 1 0 0 1 1.414 0l3.793 3.793 3.793-3.793a1 1 0 0 1 1.414 1.414L23.914 16.5l3.793 3.793a1 1 0 0 1-1.414 1.414L22.5 17.914l-3.793 3.793a1 1 0 0 1-1.414-1.414l3.793-3.793-3.793-3.793a1 1 0 0 1 0-1.414Z\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'zoom-in'\"\n    ><svg\n      id=\"zoom-in\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g clip-path=\"url(#a)\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M15.5 23a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 2C21.299 25 26 20.299 26 14.5S21.299 4 15.5 4 5 8.701 5 14.5 9.701 25 15.5 25Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M21.293 21.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path d=\"M15 8h1v13h-1z\" />\n        <path d=\"M9 14h13v1H9z\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n\n  <ng-container *ngIf=\"icon === 'zoom-out'\"\n    ><svg\n      id=\"zoom-out\"\n      [class]=\"_classList | async\"\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n    >\n      <g clip-path=\"url(#a)\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M15.5 23a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 2C21.299 25 26 20.299 26 14.5S21.299 4 15.5 4 5 8.701 5 14.5 9.701 25 15.5 25Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M21.293 21.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414Z\"\n          clip-rule=\"evenodd\"\n        />\n        <path d=\"M9 14h12v1H9z\" />\n      </g>\n      <defs>\n        <clipPath id=\"a\"><path d=\"M0 0h32v32H0z\" /></clipPath>\n      </defs></svg\n  ></ng-container>\n</ng-container>\n", styles: [".fudis-icon{box-sizing:border-box;display:inline-flex;align-items:center;transition:all .6s ease}.fudis-icon__rotate__flip-180{transform:rotate(180deg)}.fudis-icon__rotate__cw-90{transform:rotate(90deg)}.fudis-icon__rotate__ccw-90{transform:rotate(-90deg)}.fudis-icon__lg{width:calc(2rem / var(--fudis-rem-multiplier));height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-icon__sm{width:calc(1rem / var(--fudis-rem-multiplier));height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-icon__color__yellow{fill:#f1c40f}.fudis-icon__color__red{fill:#b83c2e}.fudis-icon__color__gray-dark{fill:#484848}.fudis-icon__color__gray-light{fill:#d4d4d4}.fudis-icon__color__primary{fill:var(--fudis-color-primary)}.fudis-icon__color__primary-dark{fill:var(--fudis-color-primary-dark)}.fudis-icon__color__green{fill:#1e874b}.fudis-icon__color__white{fill:#fff}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { _classes: [{
                type: HostBinding,
                args: ['class']
            }], icon: [{
                type: Input,
                args: [{ required: true }]
            }], color: [{
                type: Input
            }], rotate: [{
                type: Input
            }] } });

class BreadcrumbsItemComponent {
    constructor(_idService, _breadCrumbs) {
        this._idService = _idService;
        this._breadCrumbs = _breadCrumbs;
        /**
         * Binding host CSS class to component wrapper
         */
        this._classes = 'fudis-breadcrumbs-item-host';
        this._id = this._idService.getNewChildId('breadcrumbs', this._breadCrumbs.id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbsItemComponent, deps: [{ token: FudisIdService }, { token: BreadcrumbsComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbsItemComponent, isStandalone: false, selector: "fudis-breadcrumbs-item", host: { properties: { "class": "this._classes" } }, ngImport: i0, template: "<li class=\"fudis-breadcrumbs-item\" [attr.id]=\"_id\">\n  <ng-content select=\"a\" />\n  <span class=\"fudis-breadcrumbs-item__icon\">\n    <fudis-icon [icon]=\"'chevron'\" />\n  </span>\n  <ng-content select=\"fudis-body-text\" />\n</li>\n", styles: [".fudis-breadcrumbs-item{display:flex;align-items:center;min-height:calc(2rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbsItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-breadcrumbs-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<li class=\"fudis-breadcrumbs-item\" [attr.id]=\"_id\">\n  <ng-content select=\"a\" />\n  <span class=\"fudis-breadcrumbs-item__icon\">\n    <fudis-icon [icon]=\"'chevron'\" />\n  </span>\n  <ng-content select=\"fudis-body-text\" />\n</li>\n", styles: [".fudis-breadcrumbs-item{display:flex;align-items:center;min-height:calc(2rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: BreadcrumbsComponent, decorators: [{
                    type: Host
                }] }], propDecorators: { _classes: [{
                type: HostBinding,
                args: ['class']
            }] } });

class BodyTextComponent {
    constructor(_breadcrumbsItem, _idService) {
        this._breadcrumbsItem = _breadcrumbsItem;
        this._idService = _idService;
        /**
         * Class for the parent wrapper element
         */
        this._classes = 'fudis-body-text-host';
        /**
         * Variant for the paragraph
         */
        this.variant = 'md-regular';
        /**
         * Text alignment
         */
        this.align = 'left';
        /**
         * To add default CSS class if app hasn't provided any variant
         */
        this._defaultClass = new BehaviorSubject(true);
        this._id = _idService.getNewId('body-text');
    }
    ngOnChanges(changes) {
        if (changes.variant?.currentValue !== changes.variant?.previousValue) {
            if (!changes.variant?.currentValue) {
                this._defaultClass.next(true);
            }
            else {
                this._defaultClass.next(false);
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BodyTextComponent, deps: [{ token: BreadcrumbsItemComponent, host: true, optional: true }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BodyTextComponent, isStandalone: false, selector: "fudis-body-text", inputs: { variant: "variant", align: "align", lang: "lang" }, host: { properties: { "class": "this._classes" } }, usesOnChanges: true, ngImport: i0, template: "<p\n  [id]=\"_id\"\n  [class.fudis-body-text__default]=\"_defaultClass | async\"\n  [attr.aria-current]=\"_breadcrumbsItem ? 'page' : null\"\n  [attr.lang]=\"lang\"\n  class=\"fudis-body-text fudis-body-text__{{ variant }} fudis-body-text__{{ align }}\"\n  ><ng-content\n/></p>\n", dependencies: [{ kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BodyTextComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-body-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<p\n  [id]=\"_id\"\n  [class.fudis-body-text__default]=\"_defaultClass | async\"\n  [attr.aria-current]=\"_breadcrumbsItem ? 'page' : null\"\n  [attr.lang]=\"lang\"\n  class=\"fudis-body-text fudis-body-text__{{ variant }} fudis-body-text__{{ align }}\"\n  ><ng-content\n/></p>\n" }]
        }], ctorParameters: () => [{ type: BreadcrumbsItemComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: FudisIdService }], propDecorators: { _classes: [{
                type: HostBinding,
                args: ['class']
            }], variant: [{
                type: Input
            }], align: [{
                type: Input
            }], lang: [{
                type: Input
            }] } });

class AlertComponent {
    constructor(_document, _translateService, _alertService, _focusService, _dialogService) {
        this._document = _document;
        this._translateService = _translateService;
        this._alertService = _alertService;
        this._focusService = _focusService;
        this._dialogService = _dialogService;
        /**
         * Variant of Alert. Same names and colors as in Notification Component.
         */
        this.variant = 'info';
        /**
         * Output for close button click
         */
        this.handleClose = new EventEmitter();
    }
    /**
     * Handler for close button. Dismisses alert from service and sets focus to last alert in the list
     * or to previously focused element stored with _handleFocus().
     */
    _handleCloseClick(event) {
        this._alertService.dismissAlertFromButton(this.buttonId);
        const alerts = this._alertService.alerts.getValue();
        if (alerts.length !== 0) {
            const targetId = alerts[alerts.length - 1].buttonId;
            this._document.getElementById(targetId)?.focus();
        }
        else {
            const target = this._focusService.getFocusTarget();
            target?.focus();
        }
        this.handleClose.emit(event);
    }
    /**
     * Focus handler for close Button inside alert. Saves the element focus originated from, to
     * restore focus there when there are no alerts left.
     */
    _handleFocus(focusEvent) {
        const relatedTarget = focusEvent?.relatedTarget;
        const isDialogOpen = this._dialogService.getDialogOpenStatus().value;
        /**
         * First if: when keyboard tabbing through ngMaterial dialog, focus goes through its hidden
         * focus-trap helper element which focuses on either first alert on the list or dialog close. So
         * we store the dialog close as focus target. Else if: Store source of focus event unless it
         * originated inside Alert
         */
        if (isDialogOpen &&
            relatedTarget &&
            relatedTarget.classList?.contains('cdk-focus-trap-anchor')) {
            const dialogCloseButton = this._document.querySelector('.cdk-focus-trap-anchor + mat-dialog-container .fudis-dialog__close .fudis-button');
            if (dialogCloseButton) {
                this._focusService.setFocusTarget(dialogCloseButton);
            }
        }
        else if (relatedTarget && !relatedTarget.closest('.fudis-alert')) {
            this._focusService.setFocusTarget(relatedTarget);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, deps: [{ token: DOCUMENT }, { token: FudisTranslationService }, { token: FudisAlertService }, { token: FudisFocusService }, { token: FudisDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlertComponent, isStandalone: false, selector: "fudis-alert", inputs: { message: "message", htmlId: "htmlId", buttonId: "buttonId", variant: "variant" }, outputs: { handleClose: "handleClose" }, ngImport: i0, template: "<div class=\"fudis-alert fudis-alert__{{ variant }}\" [id]=\"htmlId\">\n  <fudis-body-text\n    [attr.role]=\"variant === 'danger' || variant === 'warning' ? 'alert' : 'status'\"\n    [classList]=\"'fudis-alert__text'\"\n    [align]=\"'center'\"\n    [variant]=\"'lg-regular'\"\n  >\n    {{ message | async }}\n  </fudis-body-text>\n\n  <button\n    [attr.aria-label]=\"\n      (message | async) + ', ' + _translateService.getTranslations()().DIALOG.CLOSE\n    \"\n    [id]=\"buttonId\"\n    (click)=\"_handleCloseClick($event)\"\n    (focus)=\"_handleFocus($event)\"\n    class=\"fudis-alert__close fudis-alert__close__{{ variant }}\"\n  >\n    <fudis-icon [icon]=\"'close'\" [color]=\"variant !== 'warning' ? 'white' : 'gray-dark'\" />\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: BodyTextComponent, selector: "fudis-body-text", inputs: ["variant", "align", "lang"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-alert', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"fudis-alert fudis-alert__{{ variant }}\" [id]=\"htmlId\">\n  <fudis-body-text\n    [attr.role]=\"variant === 'danger' || variant === 'warning' ? 'alert' : 'status'\"\n    [classList]=\"'fudis-alert__text'\"\n    [align]=\"'center'\"\n    [variant]=\"'lg-regular'\"\n  >\n    {{ message | async }}\n  </fudis-body-text>\n\n  <button\n    [attr.aria-label]=\"\n      (message | async) + ', ' + _translateService.getTranslations()().DIALOG.CLOSE\n    \"\n    [id]=\"buttonId\"\n    (click)=\"_handleCloseClick($event)\"\n    (focus)=\"_handleFocus($event)\"\n    class=\"fudis-alert__close fudis-alert__close__{{ variant }}\"\n  >\n    <fudis-icon [icon]=\"'close'\" [color]=\"variant !== 'warning' ? 'white' : 'gray-dark'\" />\n  </button>\n</div>\n" }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: FudisTranslationService }, { type: FudisAlertService }, { type: FudisFocusService }, { type: FudisDialogService }], propDecorators: { message: [{
                type: Input,
                args: [{ required: true }]
            }], htmlId: [{
                type: Input,
                args: [{ required: true }]
            }], buttonId: [{
                type: Input,
                args: [{ required: true }]
            }], variant: [{
                type: Input
            }], handleClose: [{
                type: Output
            }] } });

class AlertGroupComponent {
    constructor(_alertService, _translationService, _dialogService) {
        this._alertService = _alertService;
        this._translationService = _translationService;
        this._dialogService = _dialogService;
        /**
         * CSS position of alerts
         */
        this.position = 'fixed';
        /**
         * List of Alerts fetched from Alert Service
         */
        this._alertList = new BehaviorSubject([]);
        /**
         * Label for section element containing alerts
         */
        this._alertGroupLabel = new BehaviorSubject('');
        /**
         * Boolean to determine if Alert group is visible
         */
        this._visible = new BehaviorSubject(false);
        this._dialogService
            .getDialogOpenStatus()
            .pipe(takeUntilDestroyed())
            .subscribe((value) => {
            this._setVisibility(value);
        });
        effect(() => {
            this._alertGroupLabel.next(this._translationService.getTranslations()().ALERT.HEADING_LABEL);
        });
    }
    ngOnChanges(changes) {
        if (changes.insideDialog?.currentValue !== changes.insideDialog?.previousValue) {
            this._setVisibility(this._dialogService.getDialogOpenStatus().value);
        }
    }
    /**
     * Get Alert Group's visible status
     */
    getVisibleStatus() {
        return this._visible.value;
    }
    /**
     * Set visibility when Fudis Dialog is opened and closed
     */
    _setVisibility(dialogStatus) {
        if ((dialogStatus && this.insideDialog) || (!dialogStatus && !this.insideDialog)) {
            this._visible.next(true);
        }
        else {
            this._visible.next(false);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertGroupComponent, deps: [{ token: FudisAlertService }, { token: FudisTranslationService }, { token: FudisDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AlertGroupComponent, isStandalone: false, selector: "fudis-alert-group", inputs: { position: "position", insideDialog: "insideDialog" }, usesOnChanges: true, ngImport: i0, template: "<section\n  *ngIf=\"(_visible | async) && (_alertService.alerts | async) as alerts\"\n  class=\"fudis-alert-group fudis-alert-group__{{ position }}\"\n  [attr.aria-label]=\"alerts.length > 0 ? (_alertGroupLabel | async) + ': ' + alerts.length : null\"\n>\n  <ng-container *ngFor=\"let alert of alerts\">\n    <fudis-alert\n      [variant]=\"alert.type\"\n      [message]=\"alert.message\"\n      [id]=\"alert.id\"\n      [htmlId]=\"alert.htmlId\"\n      [buttonId]=\"alert.buttonId\"\n    />\n  </ng-container>\n</section>\n", styles: [".fudis-alert-group{z-index:300;top:0;left:0;width:100%}.fudis-alert-group__absolute{position:absolute}.fudis-alert-group__fixed{position:fixed}.fudis-alert-group__static{position:static}@media (orientation: landscape){.fudis-alert-group{width:100%}}@media (orientation: portrait){.fudis-alert-group{width:100vw}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlertComponent, selector: "fudis-alert", inputs: ["message", "htmlId", "buttonId", "variant"], outputs: ["handleClose"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-alert-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<section\n  *ngIf=\"(_visible | async) && (_alertService.alerts | async) as alerts\"\n  class=\"fudis-alert-group fudis-alert-group__{{ position }}\"\n  [attr.aria-label]=\"alerts.length > 0 ? (_alertGroupLabel | async) + ': ' + alerts.length : null\"\n>\n  <ng-container *ngFor=\"let alert of alerts\">\n    <fudis-alert\n      [variant]=\"alert.type\"\n      [message]=\"alert.message\"\n      [id]=\"alert.id\"\n      [htmlId]=\"alert.htmlId\"\n      [buttonId]=\"alert.buttonId\"\n    />\n  </ng-container>\n</section>\n", styles: [".fudis-alert-group{z-index:300;top:0;left:0;width:100%}.fudis-alert-group__absolute{position:absolute}.fudis-alert-group__fixed{position:fixed}.fudis-alert-group__static{position:static}@media (orientation: landscape){.fudis-alert-group{width:100%}}@media (orientation: portrait){.fudis-alert-group{width:100vw}}\n"] }]
        }], ctorParameters: () => [{ type: FudisAlertService }, { type: FudisTranslationService }, { type: FudisDialogService }], propDecorators: { position: [{
                type: Input
            }], insideDialog: [{
                type: Input
            }] } });

class BadgeComponent {
    constructor() {
        /**
         * Badge variant
         */
        this.variant = 'primary';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BadgeComponent, isStandalone: false, selector: "fudis-badge", inputs: { variant: "variant", content: "content" }, ngImport: i0, template: "<span class=\"fudis-badge fudis-badge__{{ variant }}\">{{ content }}<ng-content></ng-content> </span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span class=\"fudis-badge fudis-badge__{{ variant }}\">{{ content }}<ng-content></ng-content> </span>\n" }]
        }], propDecorators: { variant: [{
                type: Input
            }], content: [{
                type: Input
            }] } });

class PopoverApiDirective {
    constructor() {
        /**
         * Position of the popover on the parent element
         */
        this.popoverPosition = 'below';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverApiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: PopoverApiDirective, isStandalone: false, selector: "[fudisPopoverApi]", inputs: { popoverText: "popoverText", popoverPosition: "popoverPosition", popoverTriggerLabel: "popoverTriggerLabel" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverApiDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisPopoverApi]',
                    standalone: false,
                }]
        }], propDecorators: { popoverText: [{
                type: Input
            }], popoverPosition: [{
                type: Input
            }], popoverTriggerLabel: [{
                type: Input
            }] } });

/**
 * Dropdown event service shared between Button and DropdownMenu components.
 *
 * Dropdown menu element's width calculation must be triggered from host Button click, and it should
 * ensure that the dropdown is always fully visible.
 */
class DropdownEventService {
    constructor() {
        this._triggerCalculationSubject = new Subject();
        this.triggerCalculation = this._triggerCalculationSubject.asObservable();
    }
    triggerWidthCalculation() {
        this._triggerCalculationSubject.next();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownEventService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownEventService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

class PopoverComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PopoverComponent, isStandalone: true, selector: "fudis-popover", inputs: { id: "id", popoverText: "popoverText" }, ngImport: i0, template: "<div [id]=\"id\" aria-live=\"polite\" class=\"fudis-popover\">{{ popoverText }}</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [id]=\"id\" aria-live=\"polite\" class=\"fudis-popover\">{{ popoverText }}</div>\n" }]
        }], propDecorators: { id: [{
                type: Input
            }], popoverText: [{
                type: Input
            }] } });

class PopoverDirective extends PopoverApiDirective {
    constructor(_fudisIdService, _boundElement, _overlay) {
        super();
        this._fudisIdService = _fudisIdService;
        this._boundElement = _boundElement;
        this._overlay = _overlay;
        this._destroyRef = inject(DestroyRef);
        this._offset = 8;
        this._overlayRef = null;
        this._isPopoverOpen = false;
        this._positions = {
            above: {
                originX: 'center',
                originY: 'top',
                overlayX: 'center',
                overlayY: 'bottom',
                offsetY: -this._offset,
            },
            left: {
                originX: 'start',
                originY: 'center',
                overlayX: 'end',
                overlayY: 'center',
                offsetX: -this._offset,
            },
            right: {
                originX: 'end',
                originY: 'center',
                overlayX: 'start',
                overlayY: 'center',
                offsetX: this._offset,
            },
            below: {
                originX: 'center',
                originY: 'bottom',
                overlayX: 'center',
                overlayY: 'top',
                offsetY: this._offset,
            },
        };
    }
    ngOnInit() {
        this._popoverElementId = this._fudisIdService.getNewId('popover');
        this._boundElement?.nativeElement?.setAttribute('aria-controls', this._popoverElementId);
    }
    ngAfterViewInit() {
        this._boundElement?.nativeElement?.addEventListener('click', this._clickHandler.bind(this));
        this._boundElement?.nativeElement?.addEventListener('keydown', this._onEscPress.bind(this));
        this._setAriaForBoundedElement('false');
    }
    _clickHandler() {
        if (!this._isPopoverOpen) {
            this._openPopover();
        }
        else {
            this._closePopover();
        }
    }
    _onEscPress(event) {
        if (event.key === 'Escape')
            this._closePopover();
    }
    _openPopover() {
        const positionStrategy = this._overlay
            .position()
            .flexibleConnectedTo(this._boundElement)
            .withPositions(this._getPositionStrategy())
            .withPush(false)
            .withScrollableContainers([]);
        this._overlayRef = this._overlay.create({
            positionStrategy,
            scrollStrategy: this._overlay.scrollStrategies.close(),
        });
        this.clickSubscription = fromEvent(document, 'click')
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((event) => this._focusOutHandler(event));
        this.keydownSubscription = fromEvent(document, 'keyup')
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((event) => this._focusOutHandler(event));
        this.scrollSubscription = fromEvent(document, 'scroll', { capture: true })
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe(() => this._scrollHandler());
        const popoverPortal = new ComponentPortal(PopoverComponent);
        const componentRef = this._overlayRef.attach(popoverPortal);
        componentRef.instance.popoverText = this.popoverText;
        componentRef.instance.id = this._popoverElementId;
        this._isPopoverOpen = true;
        this._setAriaForBoundedElement('true');
    }
    _focusOutHandler(event) {
        if (this._overlayRef &&
            !this._boundElement?.nativeElement?.contains(event?.target) &&
            !document.getElementById(this._popoverElementId)?.contains(event?.target)) {
            this._closePopover();
        }
    }
    _scrollHandler() {
        this._closePopover();
    }
    _closePopover() {
        if (this._overlayRef) {
            this._overlayRef.dispose();
            this._overlayRef = null;
        }
        this.keydownSubscription?.unsubscribe();
        this.clickSubscription?.unsubscribe();
        this.scrollSubscription?.unsubscribe();
        this._isPopoverOpen = false;
        this._setAriaForBoundedElement('false');
    }
    _getPositionStrategy() {
        const positions = [];
        positions.push(this._positions[this.popoverPosition]);
        for (const positionsKey in this._positions) {
            if (positionsKey !== this.popoverPosition)
                positions.push(this._positions[positionsKey]);
        }
        return positions;
    }
    _setAriaForBoundedElement(expanded) {
        this._boundElement?.nativeElement?.setAttribute('aria-expanded', expanded);
        if (expanded === 'true') {
            this._boundElement.nativeElement.setAttribute('aria-describedby', this._popoverElementId);
        }
        else {
            this._boundElement.nativeElement.removeAttribute('aria-describedby');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverDirective, deps: [{ token: FudisIdService }, { token: i0.ElementRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: PopoverDirective, isStandalone: true, selector: "[fudisPopover]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PopoverDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisPopover]',
                }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: i0.ElementRef }, { type: i2.Overlay }] });

class ButtonComponent extends PopoverApiDirective {
    constructor(_idService, _dropdownEventService) {
        super();
        this._idService = _idService;
        this._dropdownEventService = _dropdownEventService;
        /**
         * Binding host CSS class to component wrapper
         */
        this._classes = 'fudis-button-host';
        /**
         * Button variant options
         */
        this.variant = 'primary';
        /**
         * Button size options
         */
        this.size = 'medium';
        /**
         * Button type options
         */
        this.type = 'button';
        /**
         * Hide visible label text for icon-only buttons.
         */
        this.labelHidden = false;
        /**
         * Disables the button, keeping it focusable
         */
        this.disabled = false;
        /**
         * Icon for button if needed
         */
        this.icon = undefined;
        /**
         * Icon rotation option
         */
        this.iconRotate = 'none';
        /**
         * Assign button as menu button with dropdown
         */
        this.asMenuButton = false;
        /**
         * Click handler
         */
        this.handleClick = new EventEmitter();
        /**
         * Focus handler
         */
        this.handleFocus = new EventEmitter();
        /**
         * Blur handler
         */
        this.handleBlur = new EventEmitter();
        /**
         * OnDestroy handler emit
         */
        this.handleDestroy = new EventEmitter();
        /**
         * Toggle dropdown menu button
         */
        this.dropdownOpen = new BehaviorSubject(false);
        /**
         * Automatically sets icon color based on button variant
         */
        this._iconColor = new BehaviorSubject('white');
        /**
         * Button CSS class list
         */
        this._classList = new BehaviorSubject([]);
        /**
         * Aria-label for icon-only buttons
         */
        this._ariaLabel = new BehaviorSubject('');
        /**
         * Is button focused or not
         */
        this._focused = false;
    }
    ngOnInit() {
        if (this.id) {
            this._idService.addNewId('button', this.id);
        }
        else {
            this.id = this._idService.getNewId('button');
        }
        if (this._classList.value.length === 0) {
            this._classList.next(this._getClasses());
        }
    }
    ngOnChanges(changes) {
        const variant = changes.variant?.currentValue !== changes.variant?.previousValue;
        const disabled = changes.disabled?.currentValue !== changes.disabled?.previousValue;
        const size = changes.size?.currentValue !== changes.size?.previousValue;
        const label = changes.label?.currentValue !== changes.label?.previousValue;
        const labelHidden = changes.labelHidden?.currentValue !== changes.labelHidden?.previousValue;
        const ariaLabel = changes.ariaLabel?.currentValue !== changes.ariaLabel?.previousValue;
        if (variant || disabled || size || labelHidden) {
            this._classList.next(this._getClasses());
        }
        if (size || labelHidden || label || ariaLabel) {
            this._ariaLabel.next(this._getAriaLabel());
        }
    }
    ngOnDestroy() {
        this.handleDestroy.emit();
    }
    /**
     * Button click event
     */
    buttonClick(event) {
        if (this.asMenuButton) {
            this.toggleMenu();
        }
        this.handleClick.emit(event);
    }
    /**
     * Toggling when Button is used as Menu Button
     */
    toggleMenu() {
        const newState = !this.dropdownOpen.value;
        this.dropdownOpen.next(newState);
        this._dropdownEventService.triggerWidthCalculation();
    }
    /**
     * Close dropdown when Button is used as Menu Button
     */
    closeMenu(focusToButton = true) {
        this.dropdownOpen.next(false);
        if (!this._focused && focusToButton) {
            this.buttonEl.nativeElement.focus();
        }
        this._dropdownEventService.triggerWidthCalculation();
    }
    /**
     * Handle Escape key down for Menu Button
     */
    _handleMenuButtonKeyDown(event) {
        if (event.key === 'Escape') {
            event.preventDefault();
            event.stopPropagation();
            this.closeMenu();
        }
    }
    /**
     * Handler for blurring out and closing Menu Button's dropdown
     */
    _handleButtonBlur(event) {
        this._focused = false;
        const targetIsDropdownMenuOption = event.relatedTarget?.classList?.contains('fudis-dropdown-menu-item');
        if (this.asMenuButton && !targetIsDropdownMenuOption) {
            this.dropdownOpen.next(false);
        }
        this.handleBlur.emit(event);
    }
    /**
     * Handle button focus
     */
    _handleButtonFocus(event) {
        this._focused = true;
        this.handleFocus.emit(event);
    }
    /**
     * Add aria-label for buttons without visible label
     */
    _getAriaLabel() {
        if (this.labelHidden || this.size === 'icon-only') {
            return this.ariaLabel ? `${this.label}, ${this.ariaLabel}` : this.label;
        }
        return this.ariaLabel;
    }
    /**
     * Determine icon color based on button variant. Return CSS classes with size and variant
     */
    _getClasses() {
        if (this.disabled) {
            this._iconColor.next('gray-dark');
        }
        else if (this.variant === 'primary') {
            this._iconColor.next('white');
        }
        else if (this.variant === 'secondary' || this.variant === 'tertiary') {
            this._iconColor.next('primary');
        }
        if (this.labelHidden || this.size === 'icon-only') {
            return [
                'fudis-button',
                `fudis-button__size__${this.size}`,
                `fudis-button__${this.variant}`,
                `fudis-button__label--hidden`,
            ];
        }
        else {
            return ['fudis-button', `fudis-button__size__${this.size}`, `fudis-button__${this.variant}`];
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: FudisIdService }, { token: DropdownEventService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ButtonComponent, isStandalone: false, selector: "fudis-button", inputs: { label: "label", variant: "variant", size: "size", type: "type", labelHidden: "labelHidden", ariaLabel: "ariaLabel", disabled: "disabled", icon: "icon", iconRotate: "iconRotate", id: "id", asMenuButton: "asMenuButton" }, outputs: { handleClick: "handleClick", handleFocus: "handleFocus", handleBlur: "handleBlur", handleDestroy: "handleDestroy" }, host: { properties: { "class": "this._classes" } }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonElement"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"popoverText\">\n  <button\n    fudisPopover\n    #buttonElement\n    [class]=\"_classList | async\"\n    [type]=\"type\"\n    (click)=\"!disabled && buttonClick($event)\"\n    (blur)=\"!disabled && _handleButtonBlur($event)\"\n    (focus)=\"!disabled && _handleButtonFocus($event)\"\n    (keydown)=\"!disabled && _handleMenuButtonKeyDown($event)\"\n    [attr.tabIndex]=\"disabled ? -1 : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-label]=\"_ariaLabel | async\"\n    [attr.id]=\"id\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverText]=\"popoverText\"\n  >\n    <ng-container *ngIf=\"icon\">\n      <div class=\"fudis-button__icon\">\n        <fudis-icon\n          *ngIf=\"_iconColor | async as iconColor\"\n          class=\"fudis-button__icon__component\"\n          [color]=\"iconColor\"\n          [icon]=\"icon\"\n          [rotate]=\"iconRotate\"\n        ></fudis-icon>\n      </div> </ng-container\n    >{{ labelHidden || (size === \"icon-only\" && icon) ? \"\" : label }}\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!popoverText\">\n  <button\n    #buttonElement\n    [class]=\"_classList | async\"\n    [type]=\"type\"\n    (click)=\"!disabled && buttonClick($event)\"\n    (blur)=\"!disabled && _handleButtonBlur($event)\"\n    (focus)=\"!disabled && _handleButtonFocus($event)\"\n    (keydown)=\"!disabled && _handleMenuButtonKeyDown($event)\"\n    [attr.tabIndex]=\"disabled ? -1 : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-label]=\"_ariaLabel | async\"\n    [attr.id]=\"id\"\n    [attr.aria-expanded]=\"!asMenuButton ? null : (dropdownOpen | async)\"\n    [attr.aria-controls]=\"asMenuButton && dropdownMenuId ? dropdownMenuId : null\"\n    [attr.aria-haspopup]=\"!asMenuButton ? null : 'menu'\"\n  >\n    <ng-container *ngIf=\"icon\">\n      <div class=\"fudis-button__icon\">\n        <fudis-icon\n          *ngIf=\"_iconColor | async as iconColor\"\n          class=\"fudis-button__icon__component\"\n          [color]=\"iconColor\"\n          [icon]=\"icon\"\n          [rotate]=\"iconRotate\"\n        ></fudis-icon>\n      </div> </ng-container\n    >{{ labelHidden || (size === \"icon-only\" && icon) ? \"\" : label }}</button\n  >\n</ng-container>\n\n<ng-container *ngIf=\"asMenuButton && (dropdownOpen | async)\">\n  <ng-content></ng-content>\n</ng-container>\n", styles: [".fudis-button-host{display:inline-block;position:relative}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PopoverDirective, selector: "[fudisPopover]" }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"popoverText\">\n  <button\n    fudisPopover\n    #buttonElement\n    [class]=\"_classList | async\"\n    [type]=\"type\"\n    (click)=\"!disabled && buttonClick($event)\"\n    (blur)=\"!disabled && _handleButtonBlur($event)\"\n    (focus)=\"!disabled && _handleButtonFocus($event)\"\n    (keydown)=\"!disabled && _handleMenuButtonKeyDown($event)\"\n    [attr.tabIndex]=\"disabled ? -1 : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-label]=\"_ariaLabel | async\"\n    [attr.id]=\"id\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverText]=\"popoverText\"\n  >\n    <ng-container *ngIf=\"icon\">\n      <div class=\"fudis-button__icon\">\n        <fudis-icon\n          *ngIf=\"_iconColor | async as iconColor\"\n          class=\"fudis-button__icon__component\"\n          [color]=\"iconColor\"\n          [icon]=\"icon\"\n          [rotate]=\"iconRotate\"\n        ></fudis-icon>\n      </div> </ng-container\n    >{{ labelHidden || (size === \"icon-only\" && icon) ? \"\" : label }}\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"!popoverText\">\n  <button\n    #buttonElement\n    [class]=\"_classList | async\"\n    [type]=\"type\"\n    (click)=\"!disabled && buttonClick($event)\"\n    (blur)=\"!disabled && _handleButtonBlur($event)\"\n    (focus)=\"!disabled && _handleButtonFocus($event)\"\n    (keydown)=\"!disabled && _handleMenuButtonKeyDown($event)\"\n    [attr.tabIndex]=\"disabled ? -1 : null\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [attr.aria-label]=\"_ariaLabel | async\"\n    [attr.id]=\"id\"\n    [attr.aria-expanded]=\"!asMenuButton ? null : (dropdownOpen | async)\"\n    [attr.aria-controls]=\"asMenuButton && dropdownMenuId ? dropdownMenuId : null\"\n    [attr.aria-haspopup]=\"!asMenuButton ? null : 'menu'\"\n  >\n    <ng-container *ngIf=\"icon\">\n      <div class=\"fudis-button__icon\">\n        <fudis-icon\n          *ngIf=\"_iconColor | async as iconColor\"\n          class=\"fudis-button__icon__component\"\n          [color]=\"iconColor\"\n          [icon]=\"icon\"\n          [rotate]=\"iconRotate\"\n        ></fudis-icon>\n      </div> </ng-container\n    >{{ labelHidden || (size === \"icon-only\" && icon) ? \"\" : label }}</button\n  >\n</ng-container>\n\n<ng-container *ngIf=\"asMenuButton && (dropdownOpen | async)\">\n  <ng-content></ng-content>\n</ng-container>\n", styles: [".fudis-button-host{display:inline-block;position:relative}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: DropdownEventService }], propDecorators: { _classes: [{
                type: HostBinding,
                args: ['class']
            }], buttonEl: [{
                type: ViewChild,
                args: ['buttonElement']
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], variant: [{
                type: Input
            }], size: [{
                type: Input
            }], type: [{
                type: Input
            }], labelHidden: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], disabled: [{
                type: Input
            }], icon: [{
                type: Input
            }], iconRotate: [{
                type: Input
            }], id: [{
                type: Input
            }], asMenuButton: [{
                type: Input
            }], handleClick: [{
                type: Output
            }], handleFocus: [{
                type: Output
            }], handleBlur: [{
                type: Output
            }], handleDestroy: [{
                type: Output
            }] } });

/**
 * All of these functions are used to check if component's control has different validators. The
 * return value of these functions is usually assigned for internal variable to sort out wanted
 * logic.
 */
const FudisValidatorUtilities = {
    required: required$1,
    oneRequiredOrMin,
    maxLength: maxLength$1,
    minLength: minLength$1,
    max: max$2,
    min: min$2,
    minDate,
    maxDate,
};
/**
 * @param control
 * @returns If provided FormControl has 'required' validator
 */
function required$1(control) {
    const nativeRequired = control.hasValidator(Validators.required);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const fudisRequired = !!control.validator?.('');
    if (nativeRequired || fudisRequired) {
        return true;
    }
    return false;
}
/**
 * @param group FormGroup
 * @returns If provided FormGroup has oneRequired or min validator
 */
function oneRequiredOrMin(group) {
    const validatorFn = group.validator;
    if (validatorFn === null) {
        return false;
    }
    const errors = validatorFn(new FormGroup({
        controlAsNull: new FormControl(null),
        controlAsFalse: new FormControl(false),
        controlAsEmptyString: new FormControl(''),
    }));
    const hasProperErrors = !!(errors?.['oneRequired'] || errors?.['min'].value > 0);
    return hasProperErrors;
}
/**
 * @param control
 * @returns If provided FormControl has max length value binded to its validators
 */
function maxLength$1(control) {
    const validatorFn = control.validator;
    if (validatorFn === null) {
        return null;
    }
    const errors = validatorFn(new FormControl({ length: Infinity }));
    return errors?.['maxlength']?.requiredLength;
}
/**
 * @param control
 * @returns If provided FormControl has min length value binded to its validators
 */
function minLength$1(control) {
    const validatorFn = control.validator;
    if (validatorFn === null) {
        return null;
    }
    const errors = validatorFn(new FormControl({ length: -Infinity }));
    return errors?.['minlength']?.requiredLength;
}
/**
 * @param control
 * @returns If provided FormControl has max value binded to its validators
 */
function max$2(control) {
    const validatorFn = control.validator;
    if (validatorFn === null) {
        return null;
    }
    const errors = validatorFn(new FormControl(Infinity)) ?? {};
    return errors?.['max']?.max;
}
/**
 * @param control
 * @returns If provided FormControl has min value binded to its validators
 */
function min$2(control) {
    const validatorFn = control.validator;
    if (validatorFn === null) {
        return null;
    }
    const errors = validatorFn(new FormControl(-Infinity)) ?? {};
    return errors?.['min']?.min;
}
/**
 * @param control
 * @returns If provided FormControl has datepickerMin value binded to its validators
 */
function minDate(control) {
    const validatorFn = control.validator;
    if (validatorFn === null) {
        return undefined;
    }
    const errors = validatorFn(new FormControl(new Date(1337, 0, 1)));
    const value = errors?.['datepickerMin']?.value;
    if (value) {
        const timezone = value.getTimezoneOffset() * 60000;
        const returnValue = new Date(value.getTime() - timezone);
        return returnValue;
    }
    return undefined;
}
/**
 * @param control
 * @returns If provided FormControl has datepickerMax value binded to its validators
 */
function maxDate(control) {
    const validatorFn = control.validator;
    if (validatorFn === null) {
        return undefined;
    }
    const errors = validatorFn(new FormControl(new Date(4242, 0, 1)));
    const value = errors?.['datepickerMax']?.value;
    if (value) {
        const timezone = value.getTimezoneOffset() * 60000;
        const returnValue = new Date(value.getTime() - timezone);
        return returnValue;
    }
    return undefined;
}

class CheckboxComponent {
    constructor(_idService, _translationService) {
        this._idService = _idService;
        this._translationService = _translationService;
        /**
         * Emits Checkbox change
         */
        this.handleChange = new EventEmitter();
        /**
         * Trigger update when control validator is changed
         */
        this._updateValueAndValidityTrigger = new Subject();
        /**
         * Set requiredText based on this boolean value
         */
        this._required = new BehaviorSubject(false);
        this._destroyRef = inject(DestroyRef);
        /**
         * If Checkbox has focus
         */
        this._focused = false;
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.control) {
                this._required.next(FudisValidatorUtilities.required(this.control));
            }
        });
    }
    /**
     * When Checkbox is focused
     */
    _onFocus() {
        this._focused = true;
    }
    /**
     * When Checkbox is blurred
     */
    _onBlur() {
        this._focused = false;
    }
    /**
     * Manual toggle for checkbox checked state
     */
    _onChange(event) {
        const input = event.target;
        const newValue = input.checked ? true : null;
        this.control.setValue(newValue);
        this.control.markAsTouched();
        this.control.updateValueAndValidity();
        const optionToEmit = {
            id: this.id,
            label: this.label,
            value: newValue,
        };
        // Emit after control updates
        this.handleChange.emit({ checkbox: optionToEmit, control: this.control });
    }
    ngOnInit() {
        if (this.id) {
            this._idService.addNewId('checkbox', this.id);
        }
        else {
            this.id = this._idService.getNewId('checkbox');
        }
        this._updateValueAndValidityTrigger.next();
    }
    /**
     * Add value and validity check when control value changes
     */
    ngOnChanges(changes) {
        if (changes.control?.currentValue !== changes.control?.previousValue) {
            this._subscription?.unsubscribe();
            this._subscription = this.control.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(() => this._updateValueAndValidityTrigger.next());
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, deps: [{ token: FudisIdService }, { token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CheckboxComponent, isStandalone: false, selector: "fudis-checkbox", inputs: { control: "control", id: "id", label: "label", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy" }, outputs: { handleChange: "handleChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fudis-checkbox\">\n  <label\n    [attr.for]=\"id\"\n    class=\"fudis-checkbox__label\"\n    [class.fudis-checkbox__label--disabled]=\"control.disabled\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"fudis-checkbox__input\"\n      [id]=\"id\"\n      [formControl]=\"control\"\n      [checked]=\"control.value\"\n      [attr.aria-disabled]=\"control.disabled\"\n      [attr.aria-required]=\"_required | async\"\n      [attr.aria-describedby]=\"ariaDescribedBy\"\n      [attr.aria-labelledby]=\"ariaLabelledBy\"\n      [attr.tabindex]=\"control.disabled ? -1 : null\"\n      [attr.aria-disabled]=\"control.disabled\"\n      [attr.aria-invalid]=\"(control.touched && control.invalid) || null\"\n      (focus)=\"_onFocus()\"\n      (blur)=\"_onBlur()\"\n      (change)=\"_onChange($event)\"\n    />\n    <div\n      class=\"fudis-checkbox__content\"\n      [class.fudis-checkbox__content__disabled]=\"control.disabled\"\n    >\n      <div class=\"fudis-checkbox__content-wrapper\">\n        <span\n          class=\"fudis-checkbox__content__box\"\n          [class.fudis-checkbox__content__box--focused]=\"_focused\"\n          [class.fudis-checkbox__content__box--invalid]=\"\n            (control.touched && control.invalid) || null\n          \"\n          [class.fudis-checkbox__content__box--disabled]=\"control.disabled\"\n        >\n          <fudis-icon\n            *ngIf=\"control.value\"\n            [icon]=\"'check'\"\n            class=\"fudis-checkbox__content__box__icon\"\n          />\n        </span>\n      </div>\n    </div>\n    <span *ngIf=\"label\" class=\"fudis-checkbox__label__text\">{{ label }}</span>\n  </label>\n  <ng-content></ng-content>\n  <span class=\"fudis-checkbox__required\" *ngIf=\"this._required | async\"\n    >({{ _translationService.getTranslations()().REQUIRED }})</span\n  >\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-checkbox', standalone: false, template: "<div class=\"fudis-checkbox\">\n  <label\n    [attr.for]=\"id\"\n    class=\"fudis-checkbox__label\"\n    [class.fudis-checkbox__label--disabled]=\"control.disabled\"\n  >\n    <input\n      type=\"checkbox\"\n      class=\"fudis-checkbox__input\"\n      [id]=\"id\"\n      [formControl]=\"control\"\n      [checked]=\"control.value\"\n      [attr.aria-disabled]=\"control.disabled\"\n      [attr.aria-required]=\"_required | async\"\n      [attr.aria-describedby]=\"ariaDescribedBy\"\n      [attr.aria-labelledby]=\"ariaLabelledBy\"\n      [attr.tabindex]=\"control.disabled ? -1 : null\"\n      [attr.aria-disabled]=\"control.disabled\"\n      [attr.aria-invalid]=\"(control.touched && control.invalid) || null\"\n      (focus)=\"_onFocus()\"\n      (blur)=\"_onBlur()\"\n      (change)=\"_onChange($event)\"\n    />\n    <div\n      class=\"fudis-checkbox__content\"\n      [class.fudis-checkbox__content__disabled]=\"control.disabled\"\n    >\n      <div class=\"fudis-checkbox__content-wrapper\">\n        <span\n          class=\"fudis-checkbox__content__box\"\n          [class.fudis-checkbox__content__box--focused]=\"_focused\"\n          [class.fudis-checkbox__content__box--invalid]=\"\n            (control.touched && control.invalid) || null\n          \"\n          [class.fudis-checkbox__content__box--disabled]=\"control.disabled\"\n        >\n          <fudis-icon\n            *ngIf=\"control.value\"\n            [icon]=\"'check'\"\n            class=\"fudis-checkbox__content__box__icon\"\n          />\n        </span>\n      </div>\n    </div>\n    <span *ngIf=\"label\" class=\"fudis-checkbox__label__text\">{{ label }}</span>\n  </label>\n  <ng-content></ng-content>\n  <span class=\"fudis-checkbox__required\" *ngIf=\"this._required | async\"\n    >({{ _translationService.getTranslations()().REQUIRED }})</span\n  >\n</div>\n" }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: FudisTranslationService }], propDecorators: { control: [{
                type: Input,
                args: [{ required: true }]
            }], id: [{
                type: Input
            }], label: [{
                type: Input
            }], ariaLabelledBy: [{
                type: Input
            }], ariaDescribedBy: [{
                type: Input
            }], handleChange: [{
                type: Output
            }] } });

class FormCommonApiDirective extends PopoverApiDirective {
    constructor(_idService, _focusService) {
        super();
        this._idService = _idService;
        this._focusService = _focusService;
        /**
         * If component is a child of Form component, Form's Error Summary is visible, this component's
         * control has errors and when this component is loaded for the first time, it will by default
         * call Error Summary to reload itself again and mark control as touched. This is because if
         * component is lazy loaded to the DOM after the initial reload errors call was made, errors of
         * this component might not appear on the list. To disable this feature, set this to false.
         */
        this.errorSummaryReloadOnInit = true;
        /**
         * Set browser focus to the input on the first load.
         */
        this.initialFocus = false;
        /**
         * Preferred way to disable input is to set formControl as disabled. This Input property should be
         * used in edge cases only.
         */
        this.disabled = false;
        /**
         * To listen for component's blur event.
         */
        this.handleBlur = new EventEmitter();
        /**
         * To listen for component's focus event.
         */
        this.handleFocus = new EventEmitter();
        /**
         * To listen for input's key up event.
         */
        this.handleKeyUp = new EventEmitter();
        /**
         * Output emitted when component has finished AfterViewInit lifecycle hook
         */
        this.handleViewInit = new EventEmitter();
        /**
         * Set requiredText based on this boolean value
         */
        this._required = new BehaviorSubject(false);
        this._destroyRef = inject(DestroyRef);
        /**
         * Trigger update when control validator is changed
         */
        this._updateValueAndValidityTrigger = new Subject();
        /**
         * Used prevent checks in HTML DOM before content has been loaded
         */
        this._afterViewInitDone = signal(false);
    }
    /**
     * Generate id for parent component
     */
    _setParentComponentId(parentType) {
        if (this.id) {
            this._idService.addNewParentId(parentType, this.id);
        }
        else {
            this.id = this._idService.getNewParentId(parentType);
        }
    }
    /**
     * Add given id to Id Service or generate unique id
     */
    _setComponentId(componentType) {
        if (this.id) {
            this._idService.addNewId(componentType, this.id);
        }
        else {
            this.id = this._idService.getNewId(componentType);
        }
    }
    _afterViewInitCommon() {
        if (this.initialFocus && !this._focusService.isIgnored(this.id)) {
            this.focusToInput();
        }
        this._afterViewInitDone.set(true);
        this.handleViewInit.emit();
    }
    ngAfterViewInit() {
        this._afterViewInitCommon();
    }
    /**
     * Set focus to the input element
     */
    focusToInput() {
        this._inputRef?.nativeElement?.focus();
    }
    /**
     * Executed when component's input is focused or when child input, e.g. Checkbox is focused
     */
    onFocus(event) {
        this.handleFocus.emit(event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormCommonApiDirective, deps: [{ token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FormCommonApiDirective, isStandalone: false, selector: "[fudisFormCommonApi]", inputs: { label: "label", ariaLabel: "ariaLabel", id: "id", errorSummaryReloadOnInit: "errorSummaryReloadOnInit", helpText: "helpText", initialFocus: "initialFocus", disabled: "disabled", disableGuidance: "disableGuidance" }, outputs: { handleBlur: "handleBlur", handleFocus: "handleFocus", handleKeyUp: "handleKeyUp", handleViewInit: "handleViewInit" }, viewQueries: [{ propertyName: "_inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormCommonApiDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisFormCommonApi]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: FudisFocusService }], propDecorators: { _inputRef: [{
                type: ViewChild,
                args: ['inputRef']
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], ariaLabel: [{
                type: Input
            }], id: [{
                type: Input
            }], errorSummaryReloadOnInit: [{
                type: Input
            }], helpText: [{
                type: Input
            }], initialFocus: [{
                type: Input
            }], disabled: [{
                type: Input
            }], disableGuidance: [{
                type: Input
            }], handleBlur: [{
                type: Output
            }], handleFocus: [{
                type: Output
            }], handleKeyUp: [{
                type: Output
            }], handleViewInit: [{
                type: Output
            }] } });

class GroupComponentBaseDirective extends FormCommonApiDirective {
    constructor(_idService, _focusService) {
        super(_idService, _focusService);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GroupComponentBaseDirective, deps: [{ token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: GroupComponentBaseDirective, isStandalone: false, selector: "[fudisGroupComponentBase]", inputs: { formGroup: "formGroup" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GroupComponentBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisGroupComponentBase]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: FudisFocusService }], propDecorators: { formGroup: [{
                type: Input
            }] } });

class FieldsetActionsDirective {
    constructor() {
        this._hostClass = 'fudis-fieldset-actions fudis-fieldset-actions__align--start';
        /**
         * Alignment of Fieldset Actions container
         */
        this.align = 'start';
    }
    ngOnChanges(changes) {
        if (changes.align?.currentValue !== changes.align?.previousValue) {
            this._hostClass = `fudis-fieldset-actions fudis-fieldset-actions__align--${changes.align?.currentValue}`;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldsetActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FieldsetActionsDirective, isStandalone: false, selector: "fudis-fieldset-actions", inputs: { align: "align" }, host: { properties: { "class": "this._hostClass" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldsetActionsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-fieldset-actions',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }], align: [{
                type: Input
            }] } });
class FieldsetContentDirective {
    constructor() {
        this._hostClass = 'fudis-fieldset-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldsetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FieldsetContentDirective, isStandalone: false, selector: "fudis-fieldset-content", host: { properties: { "class": "this._hostClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldsetContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-fieldset-content',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Internal Error Summary tools not exposed to public
 */
class FudisInternalErrorSummaryService {
    constructor(_translationService) {
        this._translationService = _translationService;
        // --------------------
        //
        // CLASS VARIABLES
        //
        // --------------------
        /**
         * Collection of all registered errors categorised by parent Form id. Used as "temporary" storage
         * and value will be passed to Observable when ReloadErrors is called.
         */
        this._errorsStore = {};
        /**
         * Collection of all registered errors categorised by parent Form id. This Observable is updated
         * with new value only when ReloadErrors is called.
         */
        this._errorsObservable = new BehaviorSubject({});
        this._errorsSignal = {};
        /**
         * Current Form ids with their Error Summary Visibility status
         */
        this._errorSummaryVisibilityStatus = {};
        /**
         * Collection of child Sections, Expandables and Fieldsets of each Form Component
         */
        this._formStructure = {};
        /**
         * Info to Error Summary Component if it should move user focus to updated list or not
         */
        this._focusToFormOnReload = null;
        /**
         * Update strategy of Error Summary
         */
        this._updateStrategy = 'reloadOnly';
        /**
         * Used prevent unnecessary frequent Signal updates
         */
        this._reloadGuard = [];
        toObservable(_translationService.getLanguageSignal())
            .pipe(takeUntilDestroyed())
            .subscribe(() => {
            this.focusToFormOnReload = null;
        });
    }
    // --------------------
    //
    // GETTERS & SETTERS FOR CLASS VARIABLES
    //
    // --------------------
    /**
     * Used in Components to listen to Reload updates
     */
    get errorsObservable() {
        return this._errorsObservable;
    }
    /**
     * For unit testing purposes
     */
    get errors() {
        return this._errorsStore;
    }
    /**
     * For unit testing purposes
     */
    get errorsSignal() {
        return this._errorsSignal;
    }
    /**
     * Observable to store each Form's Error Summary's visibility status. Form component will listen
     * to these changes if visiblity changes elsewhere than the Input() prop
     */
    get errorSummaryVisibilityStatus() {
        return this._errorSummaryVisibilityStatus;
    }
    get updateStrategy() {
        return this._updateStrategy;
    }
    set updateStrategy(value) {
        this._updateStrategy = value;
    }
    get focusToFormOnReload() {
        return this._focusToFormOnReload;
    }
    get formStructure() {
        return this._formStructure;
    }
    set focusToFormOnReload(value) {
        this._focusToFormOnReload = value;
    }
    /**
     * Hide or show Error Summary of spesific Form Component
     *
     * @param formId Form to target
     * @param visible Hide or show Error Summary
     */
    setErrorSummaryVisibility(formId, visible) {
        if (!this._errorSummaryVisibilityStatus[formId]) {
            this._errorSummaryVisibilityStatus[formId] = signal(visible);
        }
        else if (this._errorSummaryVisibilityStatus[formId]() !== visible) {
            this._errorSummaryVisibilityStatus[formId].set(visible);
        }
    }
    // --------------------
    //
    // ADD AND REMOVE ERRORS
    //
    // --------------------
    /**
     * Adds a new error to the list of current errors If new error item has a matching id on the list,
     * new error is tied to that error list object
     *
     * @param newError Form error summary item
     */
    addError(newError) {
        if (!this._errorsStore[newError.formId]) {
            this.registerNewForm(newError.formId);
        }
        const currentErrors = { ...this._errorsStore?.[newError.formId] };
        if (!currentErrors?.[newError.focusId]) {
            currentErrors[newError.focusId] = {};
        }
        const currentMessage = currentErrors[newError.focusId][newError.id];
        const messageChanged = currentMessage && currentMessage !== newError.message;
        const contentChanged = currentErrors?.[newError.focusId] && messageChanged;
        currentErrors[newError.focusId][newError.id] = newError.message;
        this._errorsStore[newError.formId] = currentErrors;
        const reloadErrors = (contentChanged || this._updateStrategy === 'all') &&
            !!this._errorSummaryVisibilityStatus?.[newError.formId]();
        if (reloadErrors) {
            this._focusToFormOnReload = null;
            this.reloadFormErrors(newError.formId, false);
        }
    }
    /**
     * Removes error object from the current errors list if it contains matching error id
     *
     * @param error Error object
     */
    removeError(errorToRemove) {
        const currentErrorsOfForm = { ...this._errorsStore[errorToRemove.formId] };
        if (currentErrorsOfForm[errorToRemove.focusId]?.[errorToRemove.id]) {
            delete currentErrorsOfForm[errorToRemove.focusId][errorToRemove.id];
            const otherErrors = Object.keys(currentErrorsOfForm[errorToRemove.focusId]).length;
            if (otherErrors === 0) {
                delete currentErrorsOfForm[errorToRemove.focusId];
            }
            this._errorsStore[errorToRemove.formId] = currentErrorsOfForm;
            const reloadErrors = (this._updateStrategy === 'onRemove' || this._updateStrategy === 'all') &&
                !!this._errorSummaryVisibilityStatus?.[errorToRemove.formId]();
            if (reloadErrors) {
                this._focusToFormOnReload = null;
                this.reloadFormErrors(errorToRemove.formId);
            }
        }
    }
    // --------------------
    //
    // RELOADING LIST OF ERRORS TO HTML DOM
    //
    // Functions to actually update Components which listen to Error changes. These will update the
    // Observables components are listening to.
    //
    // --------------------
    /**
     * Updates the visible and dynamic lists of all form and errors with the current error list
     */
    reloadAllErrors() {
        Object.keys(this._errorsStore).forEach((key) => {
            if (this._errorSummaryVisibilityStatus[key]()) {
                this.reloadFormErrors(key, false);
            }
        });
    }
    /**
     * @param formId
     * @param focus
     */
    reloadFormErrors(formId, focus) {
        if (focus) {
            this._focusToFormOnReload = formId;
        }
        else {
            this._focusToFormOnReload = null;
        }
        const reloadConditions = !this._reloadGuard.includes(formId) &&
            this._errorsStore[formId] &&
            this._errorsSignal[formId];
        if (reloadConditions) {
            this._reloadGuard.push(formId);
            setTimeout(() => {
                this._errorsSignal[formId]?.set(this._errorsStore[formId]);
                this._errorsObservable.next({ ...this._errorsStore });
                this._reloadGuard.splice(this._reloadGuard.indexOf(formId), 1);
            }, 50);
        }
    }
    // --------------------
    //
    // DOM RELATED FUNCTIONS
    //
    // Usually called by Components when they are initialized and they register themselves to Error
    // Summary Service
    //
    // --------------------
    /**
     * @param element HTMLElement to check, if it has Form Component as ancestor
     * @returns If ancestor found, returns id of that Form and visibility status of Form's Error
     *   Summary
     */
    getFormAncestorId(element) {
        let foundId = null;
        let tryCounter = 0;
        return new Promise((resolve) => {
            const interval = setInterval(() => {
                Object.keys(this._errorSummaryVisibilityStatus).find((id) => {
                    if (element.closest(`#${id}`)) {
                        foundId = id;
                    }
                });
                if (foundId) {
                    clearInterval(interval);
                    resolve(foundId);
                }
                else if (tryCounter < 50) {
                    tryCounter = tryCounter + 1;
                }
                else {
                    clearInterval(interval);
                    resolve(null);
                }
            }, 10);
        });
    }
    /**
     * When new Form Component is initialized, it will register itself for child components and error
     * messages related to it
     *
     * @param formId
     */
    registerNewForm(formId, errorSummaryVisible = false) {
        if (!this._formStructure[formId]) {
            this._formStructure[formId] = {
                sections: {},
                fieldsets: {},
            };
        }
        if (!this._errorSummaryVisibilityStatus[formId]) {
            this._errorSummaryVisibilityStatus[formId] = signal(errorSummaryVisible);
        }
        if (!this._errorsSignal[formId]) {
            this._errorsSignal[formId] = signal({});
        }
        if (!this._errorsStore[formId]) {
            this._errorsStore[formId] = {};
        }
    }
    /**
     * When Form Component is destroyed, it will remove itself from the service
     *
     * @param formId
     */
    removeForm(formId) {
        if (this._errorsStore[formId]) {
            delete this._errorsStore[formId];
        }
        if (this._errorsSignal[formId]) {
            delete this._errorsSignal[formId];
        }
        if (this._formStructure[formId]) {
            delete this._formStructure[formId];
        }
        if (this._errorSummaryVisibilityStatus[formId]) {
            delete this._errorSummaryVisibilityStatus[formId];
        }
    }
    /**
     * Adds new fieldset to the list of current fieldsets If a fieldset with a matching id exists,
     * replace the old fieldset with the new one
     *
     * @param fieldset Form error summary fieldset
     */
    addFieldset(fieldset) {
        if (this._formStructure?.[fieldset.formId]) {
            this._formStructure[fieldset.formId].fieldsets[fieldset.id] = fieldset.title;
        }
    }
    /**
     * Removes the fieldset from the current fieldsets
     *
     * @param fieldset Form error summary fieldset
     */
    removeFieldset(formId, fieldsetId) {
        delete this._formStructure?.[formId]?.fieldsets[fieldsetId];
    }
    /**
     * Adds new section to the list of current sections If a section with a matching id exists,
     * replace the old section with the new one
     *
     * @param section Form error summary section
     */
    addSection(section) {
        if (this._formStructure?.[section.formId]) {
            this._formStructure[section.formId].sections[section.id] = section.title;
        }
    }
    /**
     * Removes the section from the current sections
     *
     * @param section Form error summary section
     */
    removeSection(formId, sectionId) {
        delete this._formStructure?.[formId]?.sections[sectionId];
    }
    // --------------------
    //
    // MISC
    //
    // --------------------
    ngOnDestroy() {
        this._errorsObservable.complete();
    }
    /**
     * Returns an error id including a control name if one is given
     *
     * @param id Id of the form error summary item
     * @param controlName Control name of the form error summary item
     */
    defineErrorId(id, controlName) {
        return controlName ? `${id}_${controlName}` : id;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisInternalErrorSummaryService, deps: [{ token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisInternalErrorSummaryService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisInternalErrorSummaryService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: FudisTranslationService }] });

/**
 * Utility function used with GridDirective. Takes in object of Input() attributes and creates CSS
 * classlist out of those to be passed to Grid element.
 */
const getGridClasses = (values) => {
    const classList = [
        'fudis-grid',
        `fudis-grid__${values.width}`,
        `fudis-grid__align__${values.align}`,
        values.rowGap === 'responsive' ? '' : `fudis-grid__row-gap__${values.rowGap}`,
        values.columnGap === 'responsive' ? '' : `fudis-grid__column-gap__${values.columnGap}`,
    ];
    if (values.classes) {
        classList.push(values.classes);
    }
    return classList
        .filter((item) => {
        return !!item;
    })
        .join(' ');
};
const replaceFormInputWidthsToRem = (value) => {
    const convertMap = {
        inputXs: 'calc(4rem / var(--fudis-rem-multiplier))',
        inputSm: 'calc(10rem / var(--fudis-rem-multiplier))',
        inputMd: 'calc(14rem / var(--fudis-rem-multiplier))',
        inputLg: 'calc(23rem / var(--fudis-rem-multiplier))',
    };
    const valueArray = value.split(' ');
    valueArray.forEach((value, index) => {
        valueArray[index] = convertMap?.[value] ? convertMap[value] : value;
    });
    return valueArray.join(' ');
};
/**
 * Utility function to convert parameters to either Grid CSS value 'grid-column-template' or CSS
 * grid item value 'grid-column'
 */
const getGridCssValue = (value, isGridItem) => {
    if (typeof value === 'number') {
        if (!isGridItem) {
            return `repeat(${value}, 1fr)`;
        }
        return `span ${value}`;
    }
    if (value === 'stretch' && isGridItem) {
        return '1/-1';
    }
    if (value !== 'start' && value !== 'stretch' && value !== 'end' && value !== 'center') {
        return replaceFormInputWidthsToRem(value);
    }
    return value;
};
/**
 * Determine Grid Input Properties based on if Service defaults should be ignored or if application
 * has provided values
 */
const getValuesForCSSClasses = (properties, serviceDefaults) => {
    const { defaultValues, serviceValues, appValues } = properties;
    if (!serviceDefaults) {
        /**
         * Set values from Inputs, if not provided, use default values. Ignore default values from
         * FudisGridService
         */
        return {
            width: appValues.width ?? defaultValues.width,
            align: appValues.align ?? defaultValues.align,
            alignItemsX: appValues.alignItemsX ?? defaultValues.alignItemsX,
            alignItemsY: appValues.alignItemsY ?? defaultValues.alignItemsY,
            rowGap: appValues.rowGap ?? defaultValues.rowGap,
            columnGap: appValues.columnGap ?? defaultValues.columnGap,
            classes: appValues.classes ?? defaultValues.classes,
        };
    }
    else {
        /**
         * Set values from Inputs, if not provided, check if FudisGridService has defaults, if not, use
         * defaults.
         */
        return {
            width: appValues.width ?? serviceValues.width ?? defaultValues.width,
            align: appValues.align ?? serviceValues.align ?? defaultValues.align,
            alignItemsX: appValues.alignItemsX ?? serviceValues.alignItemsX ?? defaultValues.alignItemsX,
            alignItemsY: appValues.alignItemsY ?? serviceValues.alignItemsY ?? defaultValues.alignItemsY,
            rowGap: appValues.rowGap ?? serviceValues.rowGap ?? defaultValues.rowGap,
            columnGap: appValues.columnGap ?? serviceValues.columnGap ?? defaultValues.columnGap,
            classes: appValues.classes ?? serviceValues.classes ?? defaultValues.classes,
        };
    }
};

class GridApiDirective {
    constructor() {
        /**
         * Alignment of Grid component inside its parent. Defines margins for the Grid element
         */
        this.align = 'start';
        /**
         * Horizontal alignment of Grid Items in a row.
         */
        this.alignItemsX = 'stretch';
        /**
         * Vertical alignment of Grid Items in a row.
         */
        this.alignItemsY = 'stretch';
        /**
         * Gutter gap between columns. Using Fudis spacing token values of xxs to xxl, none and
         * responsive.
         */
        this.columnGap = 'responsive';
        /**
         * Setting of columns for the Grid. Input will be converted to native CSS grid
         * grid-template-columns values.
         */
        this.columns = '1fr';
        /**
         * To make Grid ignore default values defined by application and FudisGridService
         */
        this.serviceDefaults = true;
        /**
         * Grid row gap. Using Fudis spacing token values of xxs to xxl and none.
         */
        this.rowGap = 'none';
        /**
         * Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
         */
        this.width = 'xxl';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridApiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: GridApiDirective, isStandalone: false, selector: "[fudisGridApi]", inputs: { align: "align", alignItemsX: "alignItemsX", alignItemsY: "alignItemsY", classes: "classes", columnGap: "columnGap", columns: "columns", serviceDefaults: "serviceDefaults", rowGap: "rowGap", width: "width" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridApiDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisGridApi]',
                    standalone: false,
                }]
        }], propDecorators: { align: [{
                type: Input
            }], alignItemsX: [{
                type: Input
            }], alignItemsY: [{
                type: Input
            }], classes: [{
                type: Input
            }], columnGap: [{
                type: Input
            }], columns: [{
                type: Input
            }], serviceDefaults: [{
                type: Input
            }], rowGap: [{
                type: Input
            }], width: [{
                type: Input
            }] } });

// --------------------
//
// Grid related types
//
// --------------------
/**
 * Default 'columns' value for Grid component
 */
const gridColumnDefault = '1fr';
const gridInputPropertyDefaults = {
    align: 'start',
    alignItemsX: 'stretch',
    alignItemsY: 'stretch',
    classes: undefined,
    columnGap: 'responsive',
    rowGap: 'responsive',
    width: 'xxl',
};
/**
 * Alignment of Grid Items inside a Grid
 */
const fudisGridAlignItemsArray = ['start', 'center', 'end', 'stretch', 'baseline'];
// --------------------
//
// Grid Item related types
//
// --------------------
/**
 * Default value for 'columns' input of Grid Item
 */
const gridItemDefault = 'auto';

/**
 * Utility object used with breakpointsMinWidthToObserve and BreakpointObserver
 */
const fudisBreakpointsMinWidth = {
    xxl: '(min-width: 100em)',
    xl: '(min-width: 75em)',
    lg: '(min-width: 62em)',
    md: '(min-width: 48em)',
    sm: '(min-width: 36em)',
    xs: '(min-width: 0)',
    default: '(min-width: 0)',
};
/*
 * Array of breakpoint rules to observe, which is given to ngMaterial BreakpointObserver
 */
const breakpointsMinWidthToObserve = [
    fudisBreakpointsMinWidth.xxl,
    fudisBreakpointsMinWidth.xl,
    fudisBreakpointsMinWidth.lg,
    fudisBreakpointsMinWidth.md,
    fudisBreakpointsMinWidth.sm,
    fudisBreakpointsMinWidth.xs,
    fudisBreakpointsMinWidth.default,
];

const fudisSpacingArray = ['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
/**
 * Default spacing value if none is given
 */
const defaultSpacingValue = '0';
/**
 * Fudis spacing tokens converted to rem values
 */
const fudisSpacingValues = {
    xxs: 'calc(0.25rem / var(--fudis-rem-multiplier))',
    xs: 'calc(0.5rem / var(--fudis-rem-multiplier))',
    sm: 'calc(1rem / var(--fudis-rem-multiplier))',
    md: 'calc(1.5rem / var(--fudis-rem-multiplier))',
    lg: 'calc(2rem / var(--fudis-rem-multiplier))',
    xl: 'calc(2.5rem / var(--fudis-rem-multiplier))',
    xxl: 'calc(4rem / var(--fudis-rem-multiplier))',
    none: '0',
    default: defaultSpacingValue,
};

/**
 * Returns an array of FudisBreakpointStyleResponsive objects that applies FudisSpacingValues for a
 * given breakpoints. Determines if breakpoint data consists FudisSpacing values, fractions or
 * numbers. If fractions or numbers are used, calls grid utility function that returns native grid
 * CSS layout properties as a value.
 */
const getBreakpointRules = (values, defaultValue, isGridItem) => {
    const valueArray = [];
    /**
     * If application values do not contain default value, assign defaultValue from Grid components
     * gridColumnDefault type.
     */
    if (!values.default) {
        valueArray.push({
            name: 'default',
            value: defaultValue,
            breakpoint: fudisBreakpointsMinWidth.default,
        });
    }
    Object.keys(values).forEach((key) => {
        const value = values[key];
        const spacings = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
        // TODO: This if-else logic could probably be improved/refactored?
        // Check if value includes FudisSpacing tokens...
        if (spacings.includes(value)) {
            valueArray.push({
                name: key,
                value: fudisSpacingValues[value],
                breakpoint: fudisBreakpointsMinWidth[key],
            });
        }
        // ...else call grid utility function.
        // Grid columns can be set by fractions or by plain numbers so the array push should not get mixed up with spacings.
        // Returns e. g. following object:
        // [
        //   {
        //       "name": "default",
        //       "value": "1fr",
        //       "breakpoint": "(min-width: 0)"
        //   },
        //   {
        //       "name": "md",
        //       "value": "1fr 2fr",
        //       "breakpoint": "(min-width: 48em)"
        //   },
        //   {
        //       "name": "xxl",
        //       "value": "repeat(6, 1fr)",
        //       "breakpoint": "(min-width: 100em)"
        //   }
        // ]
        else {
            const valueToForward = getGridCssValue(value, isGridItem);
            valueArray.push({
                name: key,
                value: valueToForward,
                breakpoint: fudisBreakpointsMinWidth[key],
            });
        }
    });
    return valueArray;
};
/**
 * Builds, sorts and validates breakpoint data
 */
const getBreakpointDataArray = (value, defaultValue, isGridItem) => {
    const valueArray = getBreakpointRules(value, defaultValue, isGridItem);
    const sortOrder = ['default', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
    const sortedValueArray = valueArray.sort((a, b) => {
        return sortOrder.indexOf(a.name) - sortOrder.indexOf(b.name);
    });
    return sortedValueArray;
};

class FudisGridService {
    constructor() {
        /**
         * Grid values that can be set from application. By default an empty object.
         */
        this._defaultGridValues = signal({});
    }
    /**
     * To set default values for all Grids application uses from application.
     */
    setDefaultValues(newDefaultValues) {
        let checkedNewValues = {};
        Object.keys(newDefaultValues).forEach((key) => {
            const keyName = key;
            const newValue = newDefaultValues[keyName];
            if (newValue) {
                checkedNewValues = { ...checkedNewValues, [keyName]: newValue };
            }
            else {
                throw new Error(`FudisGridService.setDefaultValues() received on object with key of: '${keyName}' and value of: '${newValue}'. This value was not applied to default values.`);
            }
        });
        this._defaultGridValues.set({ ...this._defaultGridValues(), ...checkedNewValues });
    }
    /**
     * Get application's default values for Grid
     */
    getDefaultValues() {
        return this._defaultGridValues.asReadonly();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisGridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisGridService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisGridService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

class FudisBreakpointService {
    /**
     * Observe breakpoints and when hitting one, save results to Signal.
     */
    constructor(fudisBreakpointObserver) {
        /**
         * Current screen size/breakpoint with true/false state
         */
        this._currentScreenSize = signal(null);
        /**
         * Readonly value for current screen size and state
         */
        this._screenSize = this._currentScreenSize.asReadonly();
        fudisBreakpointObserver
            .observe(breakpointsMinWidthToObserve)
            .pipe(takeUntilDestroyed())
            .subscribe((state) => {
            this._currentScreenSize.set(state);
        });
    }
    /**
     * Get current state of Breakpoints
     */
    getBreakpointState() {
        return this._screenSize();
    }
    /**
     * Function to apply CSS properties
     */
    setStyleAttributes(element, property, value) {
        const elementToModify = element;
        const previousStyles = elementToModify.getAttribute('style');
        if (typeof value === 'string') {
            elementToModify.style.cssText = `
					${previousStyles};
					${property}: ${value === 'none' ? '0' : value};
					`;
        }
        else {
            value?.forEach((item) => {
                if (this._screenSize()?.breakpoints[item.breakpoint]) {
                    elementToModify.style.cssText = `
					${previousStyles};
					${property}: ${item.value === 'none' ? '0' : item.value};
					`;
                }
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisBreakpointService, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisBreakpointService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisBreakpointService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i1$1.BreakpointObserver }] });

class GridDirective extends GridApiDirective {
    constructor(_gridElement, _gridService, _breakpointService) {
        super();
        this._gridElement = _gridElement;
        this._gridService = _gridService;
        this._breakpointService = _breakpointService;
        /**
         * Used to apply grid-template-columns CSS values for the Grid
         */
        this._calculatedColumns = gridColumnDefault;
        /**
         * Object to store various values from defaults, GridService and Inputs from application
         */
        this._gridInputProperties = {
            appValues: {},
            defaultValues: {},
            serviceValues: {},
        };
        this._firstLoadFinished = false;
        this._element = this._gridElement.nativeElement;
        /**
         * Set default values to property collection object
         */
        this._setDefaultValuesToPropertyObject();
        /**
         * When screen is resized, check and apply new rules for Grid columns
         */
        effect(() => {
            _breakpointService.getBreakpointState();
            if (typeof this._calculatedColumns !== 'string' &&
                typeof this._calculatedColumns !== 'number') {
                this._setColumnsForBreakpoints(this._calculatedColumns);
            }
        });
        /**
         * Update columns and CSS classes, if GridService values update
         */
        effect(() => {
            /**
             * Get GridServices values
             */
            this._gridInputProperties.serviceValues = this._gridService.getDefaultValues()();
            /**
             * Re-run Columns and CSS class calculations if GridService's values udpate
             */
            if (this._firstLoadFinished) {
                this._calculateAndSetGridColumnsCss();
                this._setAllProperties();
            }
        });
    }
    ngOnInit() {
        this._firstLoadFinished = true;
        this._calculateAndSetGridColumnsCss();
        this._setAllProperties();
    }
    ngOnChanges(changes) {
        /**
         * From changed values, update property object
         */
        this._setAppInputValuesToPropertyObject(changes);
        if (this._firstLoadFinished) {
            if (changes.columns?.currentValue) {
                this._calculateAndSetGridColumnsCss();
            }
            this._setAllProperties();
        }
    }
    /**
     * Add or update values from application. This does not apply any values for CSS.
     */
    _setAppInputValuesToPropertyObject(changes) {
        const keysToDismiss = ['serviceDefaults', 'ngOnInit', 'ngOnChanges'];
        Object.keys(changes).forEach((key) => {
            if (!keysToDismiss.includes(key)) {
                const keyToUse = key;
                const newValue = changes[keyToUse].currentValue;
                this._gridInputProperties.appValues = {
                    ...this._gridInputProperties.appValues,
                    [keyToUse]: newValue,
                };
            }
        });
    }
    /**
     * Set default values. These are used as back up, if application does not provide any input
     * properties.
     */
    _setDefaultValuesToPropertyObject() {
        this._gridInputProperties.defaultValues = gridInputPropertyDefaults;
    }
    /* ---------------------------------------------
     *
     * Class functions for defining Grid's 'grid-template-columns' CSS value
     *
     * ---------------------------------------------
     */
    /**
     * Set and config Grid's attributes from provided input properties
     */
    _calculateAndSetGridColumnsCss() {
        this._calculatedColumns = this._calculateColumnsCssValue();
        this._setColumnsForBreakpoints(this._calculatedColumns);
    }
    /**
     * Function which converts application's input or service values to CSS values which will applied
     * to Grid element.
     */
    _calculateColumnsCssValue() {
        const columnsToApply = this._gridInputProperties.appValues?.columns;
        const columnsFromService = this.serviceDefaults && this._gridInputProperties.serviceValues?.columns
            ? this._gridInputProperties.serviceValues?.columns
            : undefined;
        if (typeof columnsToApply === 'string') {
            return replaceFormInputWidthsToRem(columnsToApply);
        }
        // If value is number, convert it to grid-template-column value. E. g. number 6 converts to 'repeat(6,1fr)'
        if (typeof columnsToApply === 'number') {
            return getGridCssValue(columnsToApply);
        }
        let combinedValues;
        if (columnsFromService && columnsToApply) {
            combinedValues = { ...columnsFromService, ...columnsToApply };
            return getBreakpointDataArray(combinedValues, gridColumnDefault);
        }
        if (columnsToApply) {
            return getBreakpointDataArray(columnsToApply, gridColumnDefault);
        }
        if (columnsFromService) {
            return getBreakpointDataArray(columnsFromService, gridColumnDefault);
        }
        return gridColumnDefault;
    }
    /**
     * Set CSS grid-template-column attributes for this Grid element
     */
    _setColumnsForBreakpoints(columnsCssValue) {
        this._breakpointService.setStyleAttributes(this._element, 'grid-template-columns', columnsCssValue);
    }
    /* ---------------------------------------------
     *
     * Class functions for defining Grid's other than 'grid-template-columns' CSS values
     *
     * ---------------------------------------------
     */
    _setAllProperties() {
        this._valuesForCssClasses = getValuesForCSSClasses(this._gridInputProperties, this.serviceDefaults);
        this._element.style.justifyItems = this._valuesForCssClasses.alignItemsX;
        this._element.style.alignItems = this._valuesForCssClasses.alignItemsY;
        this._element.classList.value = getGridClasses(this._valuesForCssClasses);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridDirective, deps: [{ token: i0.ElementRef }, { token: FudisGridService }, { token: FudisBreakpointService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: GridDirective, isStandalone: false, selector: "[fudisGrid]", usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisGrid]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FudisGridService }, { type: FudisBreakpointService }] });

class FieldSetComponent extends PopoverApiDirective {
    constructor(_translationService, _element, _errorSummaryService, _focusService, _idService) {
        super();
        this._translationService = _translationService;
        this._element = _element;
        this._errorSummaryService = _errorSummaryService;
        this._focusService = _focusService;
        this._idService = _idService;
        /**
         * Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
         *
         * - Xxl = Default value. Viewports of 1600px and larger
         * - Xl = Viewports smaller than 1600px
         * - Lg = Viewports smaller than 1200px
         * - Md = Viewports smaller than 992px
         * - Sm = Viewports smaller than 768px
         * - Xs = Viewports smaller than 576px
         */
        this.width = 'xxl';
        /**
         * Alignment of Grid component inside its parent
         */
        this.align = 'start';
        /**
         * Set focus to Fieldset when it appears first time
         */
        this.initialFocus = false;
        /**
         * Send information about current Fieldset to Error Summary Service. Error Summary Breadcrumb is
         * the label of the current Fieldset and is visible in the clickable link in Error Summary.
         */
        this.errorSummaryBreadcrumb = true;
        /**
         * Visual size of label legend. Default 'md' and 'sm' is similar to standard input label, used in
         * e. g. RadioButtonGroup.
         */
        this.labelSize = 'md';
        /**
         * Used to vertically align Legend label with similar Label elements with varying heights. By
         * default `false`, but set `true` in Checkbox Group and Radio Button Group
         */
        this.syncLegendHeight = false;
        /**
         * Used to set visible focus on if focus event comes from Error Summary link.
         */
        this._legendFocusVisible = false;
        /**
         * Has Fieldset been added to Error Summary
         */
        this._fieldsetSent = false;
    }
    ngOnInit() {
        this._setFieldsetId();
        this._addToErrorSummary(this.label);
        this._setClasses();
    }
    ngAfterContentInit() {
        this._errorSummaryService
            .getFormAncestorId(this._element.nativeElement)
            .then((parentFormId) => {
            if (parentFormId) {
                this._parentFormId = parentFormId;
                this._addToErrorSummary(this.label);
            }
        });
        this._fieldsetGuidance = this._element.nativeElement.querySelector('fudis-guidance');
    }
    ngAfterViewInit() {
        if (this.initialFocus && !this._focusService.isIgnored(this.id)) {
            this._fieldsetLegend?.nativeElement?.focus();
        }
        const className = this._element.nativeElement.className;
        const selectionGroups = ['fudis-radio-button-group', 'fudis-checkbox-group'];
        if (selectionGroups.includes(className))
            this._hasSelectionGroupParent();
    }
    ngOnChanges(changes) {
        if (changes.label?.currentValue &&
            changes.label?.currentValue !== changes.label?.previousValue) {
            this._addToErrorSummary(changes.label?.currentValue);
        }
        if (changes.inputSize?.currentValue !== changes.inputSize?.previousValue) {
            this._setClasses();
        }
    }
    ngOnDestroy() {
        this._removeFromErrorSummary();
    }
    _handleLegendBlur() {
        this._legendFocusVisible = false;
    }
    _handleFocus(event) {
        if (event.relatedTarget) {
            const elementHasLinkClass = event.relatedTarget.classList.contains('fudis-link');
            if (elementHasLinkClass) {
                this._legendFocusVisible = true;
                this._fieldsetLegend.nativeElement.focus();
            }
        }
    }
    /**
     * Determines if Fieldset has CheckboxGroup or RadioButtonGroup as a parent. If so, adds Guidance
     * helptext as part of the Fieldset legend element and makes it accessible for screen readers.
     */
    _hasSelectionGroupParent() {
        const guidanceHelpText = this._fieldsetGuidance
            ?.querySelector('.fudis-guidance__help-text')
            ?.textContent?.trim();
        if (!guidanceHelpText)
            return;
        const groupHelpText = this._element.nativeElement.querySelector('.fudis-fieldset__legend__main__group-helptext');
        if (!groupHelpText)
            return;
        groupHelpText.removeAttribute('aria-hidden');
        const helptext = document.createElement('span');
        helptext.textContent = guidanceHelpText;
        groupHelpText.appendChild(helptext);
    }
    /**
     * Add Fieldset label to Error Summary
     */
    _addToErrorSummary(label) {
        if (this.errorSummaryBreadcrumb && this._parentFormId) {
            const fieldsetInfo = {
                id: this.id,
                formId: this._parentFormId,
                title: label,
            };
            this._errorSummaryService.addFieldset(fieldsetInfo);
            this._fieldsetSent = true;
        }
    }
    /**
     * Remove Fieldset label from Error Summary
     */
    _removeFromErrorSummary() {
        if (this._fieldsetSent && this._parentFormId) {
            this._errorSummaryService.removeFieldset(this._parentFormId, this.id);
        }
    }
    /**
     * Set CSS classes for native fieldset HTMLelement
     */
    _setClasses() {
        if (this.inputSize) {
            this._classes = ['fudis-fieldset', `fudis-input-size__${this.inputSize}`];
        }
        else {
            this._classes = ['fudis-fieldset'];
        }
    }
    /**
     * Add or generate id with IdService
     */
    _setFieldsetId() {
        if (this.id) {
            this._idService.addNewId('fieldset', this.id);
        }
        else {
            this.id = this._idService.getNewId('fieldset');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldSetComponent, deps: [{ token: FudisTranslationService }, { token: i0.ElementRef }, { token: FudisInternalErrorSummaryService }, { token: FudisFocusService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FieldSetComponent, isStandalone: false, selector: "fudis-fieldset", inputs: { label: "label", width: "width", inputSize: "inputSize", align: "align", initialFocus: "initialFocus", errorSummaryBreadcrumb: "errorSummaryBreadcrumb", required: "required", labelSize: "labelSize", id: "id", helpText: "helpText", syncLegendHeight: "syncLegendHeight" }, viewQueries: [{ propertyName: "_fieldsetLegend", first: true, predicate: ["fieldsetLegend"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  fudisGrid\n  [align]=\"align\"\n  [width]=\"inputSize ? 'initial' : width\"\n  [serviceDefaults]=\"false\"\n  [rowGap]=\"'none'\"\n>\n  <fieldset [attr.id]=\"id\" [tabIndex]=\"-1\" [ngClass]=\"_classes\">\n    <legend class=\"fudis-fieldset__legend\">\n      <div\n        #fieldsetLegend\n        class=\"fudis-fieldset__legend__main fudis-fieldset__legend__{{ labelSize }}\"\n        [class.fudis-fieldset__legend--focused]=\"_legendFocusVisible\"\n        [attr.id]=\"id + '-legend'\"\n        [tabIndex]=\"-1\"\n        (focus)=\"_handleFocus($event)\"\n        (blur)=\"_handleLegendBlur()\"\n      >\n        <div class=\"fudis-fieldset__legend__main__text-content\">\n          <span class=\"fudis-fieldset__legend__main__text\"\n            >{{ label }}<span *ngIf=\"required\" class=\"fudis-fieldset__legend__main__space\"></span\n            ><span *ngIf=\"required\" class=\"fudis-fieldset__legend__main__required\"\n              >({{ _translationService.getTranslations()().REQUIRED }})</span\n            >\n          </span>\n          <div\n            aria-hidden=\"true\"\n            class=\"fudis-fieldset__legend__main__group-helptext fudis-visually-hidden\"\n          ></div>\n        </div>\n        <fudis-button\n          *ngIf=\"popoverText && popoverTriggerLabel\"\n          class=\"fudis-fieldset__legend__main__popover-button\"\n          [size]=\"'icon-only'\"\n          [variant]=\"'tertiary'\"\n          [icon]=\"'info-circle'\"\n          [labelHidden]=\"true\"\n          [popoverText]=\"popoverText\"\n          [popoverPosition]=\"popoverPosition\"\n          [label]=\"popoverTriggerLabel\"\n        />\n      </div>\n    </legend>\n    <fudis-body-text *ngIf=\"helpText\" class=\"fudis-fieldset__help-text\" [variant]=\"'sm-regular'\">{{\n      helpText\n    }}</fudis-body-text>\n    <ng-content select=\"fudis-fieldset-actions\"></ng-content>\n    <ng-content select=\"fudis-fieldset-content\"></ng-content>\n  </fieldset>\n</div>\n", styles: ["@media screen and (min-width: 36em){.fudis-fieldset__legend:has(~.fudis-fieldset-actions__align--start) .fudis-fieldset__legend__main,.fudis-fieldset__legend:has(~.fudis-fieldset-actions__align--end) .fudis-fieldset__legend__main{margin-right:calc(calc(2.5rem / var(--fudis-rem-multiplier)) / var(--fudis-rem-multiplier))}}.fudis-fieldset .fudis-notification{margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-fieldset-actions{display:flex;flex-wrap:wrap;gap:calc(.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));align-items:center;align-self:center;justify-content:flex-start}@media screen and (min-width: 36em){.fudis-fieldset-actions__align--end{justify-content:flex-end;margin-top:0}}.fudis-fieldset-actions__align--start,.fudis-fieldset-actions__align--end{margin-top:calc(.5rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-fieldset-actions__align--start,.fudis-fieldset-actions__align--end{grid-row:1/3;grid-column:2/2;margin-top:0}}@media screen and (min-width: 36em){.fudis-fieldset:has(.fudis-fieldset-actions__align--start),.fudis-fieldset:has(.fudis-fieldset-actions__align--end){grid-template-columns:auto 1fr}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BodyTextComponent, selector: "fudis-body-text", inputs: ["variant", "align", "lang"] }, { kind: "component", type: ButtonComponent, selector: "fudis-button", inputs: ["label", "variant", "size", "type", "labelHidden", "ariaLabel", "disabled", "icon", "iconRotate", "id", "asMenuButton"], outputs: ["handleClick", "handleFocus", "handleBlur", "handleDestroy"] }, { kind: "directive", type: GridDirective, selector: "[fudisGrid]" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldSetComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-fieldset', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  fudisGrid\n  [align]=\"align\"\n  [width]=\"inputSize ? 'initial' : width\"\n  [serviceDefaults]=\"false\"\n  [rowGap]=\"'none'\"\n>\n  <fieldset [attr.id]=\"id\" [tabIndex]=\"-1\" [ngClass]=\"_classes\">\n    <legend class=\"fudis-fieldset__legend\">\n      <div\n        #fieldsetLegend\n        class=\"fudis-fieldset__legend__main fudis-fieldset__legend__{{ labelSize }}\"\n        [class.fudis-fieldset__legend--focused]=\"_legendFocusVisible\"\n        [attr.id]=\"id + '-legend'\"\n        [tabIndex]=\"-1\"\n        (focus)=\"_handleFocus($event)\"\n        (blur)=\"_handleLegendBlur()\"\n      >\n        <div class=\"fudis-fieldset__legend__main__text-content\">\n          <span class=\"fudis-fieldset__legend__main__text\"\n            >{{ label }}<span *ngIf=\"required\" class=\"fudis-fieldset__legend__main__space\"></span\n            ><span *ngIf=\"required\" class=\"fudis-fieldset__legend__main__required\"\n              >({{ _translationService.getTranslations()().REQUIRED }})</span\n            >\n          </span>\n          <div\n            aria-hidden=\"true\"\n            class=\"fudis-fieldset__legend__main__group-helptext fudis-visually-hidden\"\n          ></div>\n        </div>\n        <fudis-button\n          *ngIf=\"popoverText && popoverTriggerLabel\"\n          class=\"fudis-fieldset__legend__main__popover-button\"\n          [size]=\"'icon-only'\"\n          [variant]=\"'tertiary'\"\n          [icon]=\"'info-circle'\"\n          [labelHidden]=\"true\"\n          [popoverText]=\"popoverText\"\n          [popoverPosition]=\"popoverPosition\"\n          [label]=\"popoverTriggerLabel\"\n        />\n      </div>\n    </legend>\n    <fudis-body-text *ngIf=\"helpText\" class=\"fudis-fieldset__help-text\" [variant]=\"'sm-regular'\">{{\n      helpText\n    }}</fudis-body-text>\n    <ng-content select=\"fudis-fieldset-actions\"></ng-content>\n    <ng-content select=\"fudis-fieldset-content\"></ng-content>\n  </fieldset>\n</div>\n", styles: ["@media screen and (min-width: 36em){.fudis-fieldset__legend:has(~.fudis-fieldset-actions__align--start) .fudis-fieldset__legend__main,.fudis-fieldset__legend:has(~.fudis-fieldset-actions__align--end) .fudis-fieldset__legend__main{margin-right:calc(calc(2.5rem / var(--fudis-rem-multiplier)) / var(--fudis-rem-multiplier))}}.fudis-fieldset .fudis-notification{margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-fieldset-actions{display:flex;flex-wrap:wrap;gap:calc(.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));align-items:center;align-self:center;justify-content:flex-start}@media screen and (min-width: 36em){.fudis-fieldset-actions__align--end{justify-content:flex-end;margin-top:0}}.fudis-fieldset-actions__align--start,.fudis-fieldset-actions__align--end{margin-top:calc(.5rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-fieldset-actions__align--start,.fudis-fieldset-actions__align--end{grid-row:1/3;grid-column:2/2;margin-top:0}}@media screen and (min-width: 36em){.fudis-fieldset:has(.fudis-fieldset-actions__align--start),.fudis-fieldset:has(.fudis-fieldset-actions__align--end){grid-template-columns:auto 1fr}}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: i0.ElementRef }, { type: FudisInternalErrorSummaryService }, { type: FudisFocusService }, { type: FudisIdService }], propDecorators: { _fieldsetLegend: [{
                type: ViewChild,
                args: ['fieldsetLegend']
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], width: [{
                type: Input
            }], inputSize: [{
                type: Input
            }], align: [{
                type: Input
            }], initialFocus: [{
                type: Input
            }], errorSummaryBreadcrumb: [{
                type: Input
            }], required: [{
                type: Input
            }], labelSize: [{
                type: Input
            }], id: [{
                type: Input
            }], helpText: [{
                type: Input
            }], syncLegendHeight: [{
                type: Input
            }] } });

class ValidatorErrorMessageComponent {
    constructor(_errorSummaryService, _idService) {
        this._errorSummaryService = _errorSummaryService;
        this._idService = _idService;
        /**
         * Is error visible or not
         */
        this.visible = false;
        /**
         * Name of control this error is related to.
         */
        this.controlName = undefined;
        /**
         * Visual variant of error message
         */
        this.variant = 'form-error';
        /**
         * Output for handling a state when error is sent to Error Summary
         */
        this.handleCreateError = new EventEmitter();
        /**
         * Output for handling a state when error is removed from Error Summary
         */
        this.handleRemoveError = new EventEmitter();
        /**
         * Error message to include in error summary item
         */
        this._currentMessage = new BehaviorSubject('');
        /**
         * Has error been created and sent forward
         */
        this._errorSent = false;
        this._id = _idService.getNewId('validator-error-message');
    }
    _subscribeToMessage(message) {
        this._messageSubscribtion = message.subscribe((value) => {
            if (this._currentMessage.value !== value) {
                this._currentMessage.next(value);
                this._createError();
            }
        });
    }
    ngAfterViewInit() {
        setTimeout(() => {
            if (typeof this.message !== 'string' && !this.message) {
                this.throwError();
            }
        }, 1000);
    }
    ngOnChanges(changes) {
        if (changes.message?.currentValue !== changes.message?.previousValue ||
            changes.label?.currentValue !== changes.label?.previousValue ||
            changes.formId?.currentValue !== changes.formId?.previousValue) {
            const newMessage = changes.message?.currentValue;
            const newLabel = changes.label?.currentValue;
            const newFormId = changes.formId?.currentValue;
            if (newMessage) {
                if (typeof newMessage === 'string') {
                    this._currentMessage.next(newMessage);
                    this._createError();
                }
                else {
                    this._subscribeToMessage(newMessage);
                }
            }
            if (newLabel) {
                this._createError();
            }
            if (newFormId) {
                this._createError();
            }
        }
    }
    ngOnDestroy() {
        this._removeError();
        if (this._messageSubscribtion) {
            this._messageSubscribtion.unsubscribe();
        }
    }
    throwError() {
        if (this.controlName) {
            console.warn(`Fudis component with id of '${this.focusId}' and control name of '${this.controlName}' is missing error message for error type of: '${this.type}'`);
        }
        else {
            console.warn(`Fudis component with id of '${this.focusId}' is missing error message for error type of: '${this.type}'`);
        }
    }
    /**
     * Create new error to be sent to Error Summary
     */
    _createError() {
        if (this.formId && this.focusId && this._currentMessage.value) {
            const newError = {
                focusId: this.focusId,
                formId: this.formId,
                message: `${this.label}: ${this._currentMessage.value}`,
                id: this.controlName ? `${this.type}_${this.controlName}` : this.type,
            };
            this._errorSummaryService.addError(newError);
            this._errorSent = true;
            this.handleCreateError.emit(newError);
        }
    }
    /**
     * Remove existing error from Error Summary
     */
    _removeError() {
        if (this._errorSent && this.formId) {
            const errorToRemove = {
                focusId: this.focusId,
                formId: this.formId,
                id: this.controlName ? `${this.type}_${this.controlName}` : this.type,
            };
            this._errorSummaryService.removeError(errorToRemove);
            this.handleRemoveError.emit(errorToRemove);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ValidatorErrorMessageComponent, deps: [{ token: FudisInternalErrorSummaryService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ValidatorErrorMessageComponent, isStandalone: false, selector: "fudis-validator-error-message", inputs: { focusId: "focusId", label: "label", type: "type", message: "message", visible: "visible", controlName: "controlName", variant: "variant", formId: "formId" }, outputs: { handleCreateError: "handleCreateError", handleRemoveError: "handleRemoveError" }, usesOnChanges: true, ngImport: i0, template: "<p\n  [id]=\"_id\"\n  class=\"fudis-error-message fudis-error-message__{{ variant }}\"\n  *ngIf=\"visible && (_currentMessage | async) as message\"\n  >{{ message }}</p\n>\n", styles: [".fudis-error-message{margin-top:calc(.5rem / var(--fudis-rem-multiplier));margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-error-message__body-text{text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400}.fudis-error-message__form-error{color:#b83c2e;text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ValidatorErrorMessageComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-validator-error-message', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<p\n  [id]=\"_id\"\n  class=\"fudis-error-message fudis-error-message__{{ variant }}\"\n  *ngIf=\"visible && (_currentMessage | async) as message\"\n  >{{ message }}</p\n>\n", styles: [".fudis-error-message{margin-top:calc(.5rem / var(--fudis-rem-multiplier));margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-error-message__body-text{text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400}.fudis-error-message__form-error{color:#b83c2e;text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400}\n"] }]
        }], ctorParameters: () => [{ type: FudisInternalErrorSummaryService }, { type: FudisIdService }], propDecorators: { focusId: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input,
                args: [{ required: true }]
            }], message: [{
                type: Input,
                args: [{ required: true }]
            }], visible: [{
                type: Input
            }], controlName: [{
                type: Input
            }], variant: [{
                type: Input
            }], formId: [{
                type: Input
            }], handleCreateError: [{
                type: Output
            }], handleRemoveError: [{
                type: Output
            }] } });

class GuidanceComponent {
    constructor(_translationService, _idService, _errorSummaryService, _elementRef) {
        this._translationService = _translationService;
        this._idService = _idService;
        this._errorSummaryService = _errorSummaryService;
        this._elementRef = _elementRef;
        /**
         * If there is no Fudis FieldSet and Error Summary associated with this input and its Guidance,
         * 'polite' can be considered so that screen reader will get notified if there are new errors
         * related to the input.
         */
        this.ariaLive = 'off';
        /**
         * When set displays also a character count indicator.
         */
        this.maxLength = null;
        /**
         * Used with together with Checkbox Group component, to display errors only when focus has moved
         * outside of whole Checkbox Group.
         */
        this.groupBlurredOut = true;
        /**
         * Hide visible helptext from screen readers when group components E.g. Radio Button Group and
         * Checkbox Group components are used.
         */
        this.groupHelpTextHidden = false;
        /**
         * Assistive text of max character count for screen readers. E. g. "5/20 characters used" where
         * "characters used" is "maxLengthText".
         */
        this._maxLengthText = new BehaviorSubject('');
        /**
         * Collection of validation errors
         */
        this._lazyLoadedErrors = [];
        this._parentFormId = signal(null);
        /**
         * Used prevent checks in HTML DOM before content has been loaded
         */
        this._afterViewInitDone = signal(false);
        /**
         * To prevent Error Summary reloading after lazy load check
         */
        this._reloadGuard = false;
        this._injector = inject(Injector);
        this._id = _idService.getNewId('guidance');
        effect(() => {
            this._maxLengthText.next(_translationService.getTranslations()().TEXTINPUT.MAX_LENGTH);
        });
    }
    ngOnInit() {
        this._setCharacterLimitIndicatorValues();
    }
    ngOnChanges(changes) {
        if (changes.maxLength?.currentValue !== changes.maxLength?.previousValue) {
            this._setCharacterLimitIndicatorValues();
        }
    }
    ngAfterContentInit() {
        this._errorSummaryService
            .getFormAncestorId(this._elementRef.nativeElement)
            .then((formParentId) => {
            if (formParentId) {
                this._parentFormId.set(formParentId);
                this._subscribeToErrors(formParentId);
            }
            else {
                this._parentFormId.set(null);
            }
        });
    }
    ngAfterViewInit() {
        this._afterViewInitDone.set(true);
        setTimeout(() => {
            this._reloadGuard = true;
        }, 100);
    }
    _subscribeToErrors(formId) {
        /**
         * If there's a function call of errorSummaryService.reloadFormErrors('id-of-this-form'), and
         * this Guidance's parent Form id is that 'id-for-this-form', this effect() check will trigger
         * and set this Guidance's control / group as touched, so possible errors are set as visible.
         */
        toObservable(this._errorSummaryService.errorsSignal[formId], {
            injector: this._injector,
        }).subscribe((errors) => {
            let errorsFound = !!errors?.[this.for];
            // With FormGroups errors are defined differently, so this checks if FormGroups control has errors
            if (this.formGroup && !errorsFound) {
                errorsFound = Object.keys(this.formGroup.controls).some((controlName) => {
                    const errorId = this._errorSummaryService.defineErrorId(this.for, controlName);
                    return !!errors?.[errorId];
                });
            }
            if (errorsFound) {
                if (this.control?.invalid) {
                    this.control.markAsTouched();
                }
                else if (this.formGroup?.invalid) {
                    this.formGroup.markAllAsTouched();
                }
            }
        });
    }
    _setCharacterLimitIndicatorValues() {
        if (this.maxLength) {
            this._maxLengthWidth = this.maxLength >= 100 ? 'lg' : this.maxLength >= 10 ? 'md' : 'sm';
            this._maxLengthAlertThreshold = this.maxLength - 5;
        }
    }
    /**
     * This function is triggered, if this component is loaded to the DOM after Error Summary has been
     * loaded and there are new validation errors which didn't exist at the time original reload
     * errors call was made. It should only trigger reload one time, when all errors of this Guidance
     * are registered.
     */
    _reloadErrorSummaryOnLazyLoad(error) {
        if (this._parentFormId() &&
            this._errorSummaryService.errorSummaryVisibilityStatus[this._parentFormId()]() &&
            !this._lazyLoadedErrors.includes(error.id)) {
            this._lazyLoadedErrors.push(error.id);
            this._errorSummaryService.focusToFormOnReload = null;
            let numberOfErrors = 0;
            if (this.control?.errors) {
                numberOfErrors = numberOfErrors + Object.keys(this.control.errors).length;
            }
            if (this.formGroup) {
                if (this.formGroup.errors) {
                    numberOfErrors = numberOfErrors + Object.keys(this.formGroup.errors).length;
                }
                Object.keys(this.formGroup.controls).forEach((control) => {
                    const controlErrors = this.formGroup.controls[control]?.errors;
                    if (controlErrors) {
                        numberOfErrors = numberOfErrors + Object.keys(controlErrors).length;
                    }
                });
            }
            if (numberOfErrors === this._lazyLoadedErrors.length && !this._reloadGuard) {
                /**
                 * TODO: This needs to be though again. Currently this function happens before
                 * _subscribeToErrors, so the on push components are not reacting to the changes to the
                 * controls when they are marked as touched. This is a quick fix to that, but a ticket shall
                 * be made.
                 */
                if (this.formGroup)
                    this.formGroup.markAllAsTouched();
                if (this.control)
                    this.control.markAsTouched();
                this._errorSummaryService.reloadFormErrors(this._parentFormId(), false);
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuidanceComponent, deps: [{ token: FudisTranslationService }, { token: FudisIdService }, { token: FudisInternalErrorSummaryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GuidanceComponent, isStandalone: false, selector: "fudis-guidance", inputs: { for: "for", inputLabel: "inputLabel", control: "control", formGroup: "formGroup", helpText: "helpText", ariaLive: "ariaLive", maxLength: "maxLength", selectedOption: "selectedOption", groupBlurredOut: "groupBlurredOut", groupHelpTextHidden: "groupHelpTextHidden" }, usesOnChanges: true, ngImport: i0, template: "@let parentFormId = _parentFormId();\n\n<div class=\"fudis-guidance\" [id]=\"_id\">\n  <div [id]=\"for + '_guidance'\">\n    <div\n      [id]=\"_id + '-errors'\"\n      [class.fudis-guidance__errors]=\"\n        _afterViewInitDone() &&\n        ((control && control.touched) || (formGroup && formGroup.touched && groupBlurredOut))\n      \"\n    >\n      <fudis-icon\n        [icon]=\"'alert-fill'\"\n        *ngIf=\"\n          (control?.invalid && control?.touched) ||\n          (formGroup?.invalid && formGroup?.touched && groupBlurredOut)\n        \"\n      />\n      <div [attr.ariaLive]=\"ariaLive\" class=\"fudis-guidance__errors__list\">\n        <!--\n            Check errors for each control FormGroup e. g. english, finnish, swedish\n          -->\n        <ng-container *ngIf=\"formGroup?.controls && !control && !formGroup?.errors\">\n          <ng-container *ngFor=\"let singleControl of formGroup?.controls | keyvalue\">\n            <ng-container *ngIf=\"singleControl.value.errors\">\n              <ng-container *ngFor=\"let error of singleControl.value.errors | keyvalue\">\n                <fudis-validator-error-message\n                  *ngIf=\"error.value.message\"\n                  (handleCreateError)=\"_reloadErrorSummaryOnLazyLoad($event)\"\n                  [formId]=\"parentFormId\"\n                  [focusId]=\"for\"\n                  [visible]=\"\n                    !!((singleControl.value.touched || formGroup.touched) && groupBlurredOut)\n                  \"\n                  [type]=\"error.key\"\n                  [controlName]=\"singleControl.key\"\n                  [label]=\"inputLabel\"\n                  [message]=\"error.value.message\"\n                />\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!--\n            Check parent level errors of FormGroup e. g. oneRequired\n          -->\n        <ng-container *ngIf=\"formGroup?.errors && formGroup?.invalid\">\n          <ng-container *ngFor=\"let error of formGroup?.errors | keyvalue\">\n            <fudis-validator-error-message\n              *ngIf=\"error.value?.message\"\n              (handleCreateError)=\"_reloadErrorSummaryOnLazyLoad($event)\"\n              [formId]=\"parentFormId\"\n              [visible]=\"!!(formGroup.touched && groupBlurredOut)\"\n              [focusId]=\"for\"\n              [type]=\"error.key\"\n              [label]=\"inputLabel\"\n              [message]=\"error.value?.message\"\n            />\n          </ng-container>\n        </ng-container>\n\n        <!--\n            Check errors for single FormControl e. g. single text-input with maxlength error\n          -->\n        <ng-container *ngIf=\"control?.errors && !formGroup\">\n          <ng-container *ngFor=\"let error of control.errors | keyvalue\">\n            <fudis-validator-error-message\n              *ngIf=\"error.value?.message\"\n              (handleCreateError)=\"_reloadErrorSummaryOnLazyLoad($event)\"\n              [formId]=\"parentFormId\"\n              [visible]=\"control.touched\"\n              [focusId]=\"for\"\n              [type]=\"error.key\"\n              [label]=\"inputLabel\"\n              [message]=\"error.value?.message\"\n            />\n          </ng-container>\n        </ng-container>\n        <ng-content />\n      </div>\n    </div>\n\n    <p\n      *ngIf=\"helpText || (control && maxLength)\"\n      [attr.aria-hidden]=\"groupHelpTextHidden\"\n      class=\"fudis-guidance__help-text\"\n    >\n      <ng-container *ngIf=\"helpText\">{{ helpText }}</ng-container>\n    </p>\n  </div>\n  <ng-container *ngIf=\"maxLength && control\">\n    <small\n      class=\"fudis-guidance__character-limit-indicator fudis-guidance__character-limit-indicator__{{\n        _maxLengthWidth\n      }}\"\n      [class.fudis-guidance__character-limit-indicator__float-right]=\"!helpText\"\n    >\n      {{ control.value?.length || 0 }}/{{ maxLength }}\n      <span class=\"fudis-visually-hidden\">{{ _maxLengthText | async }}</span>\n    </small>\n  </ng-container>\n  <ng-container *ngIf=\"formGroup?.controls && !control && maxLength\">\n    <ng-container *ngFor=\"let singleControl of formGroup?.controls | keyvalue\">\n      <small\n        *ngIf=\"singleControl.key === selectedOption\"\n        class=\"fudis-guidance__character-limit-indicator fudis-guidance__character-limit-indicator__{{\n          _maxLengthWidth\n        }}\"\n        [class.fudis-guidance__character-limit-indicator__float-right]=\"!helpText\"\n      >\n        {{ singleControl.value.value?.length || 0 }}/{{ maxLength }}\n        <span class=\"fudis-visually-hidden\">{{ _maxLengthText | async }}</span>\n      </small>\n      <ng-container\n        *ngIf=\"\n          singleControl.value.value?.length === _maxLengthAlertThreshold ||\n          singleControl.value.value?.length === maxLength\n        \"\n      >\n        <p\n          class=\"fudis-guidance__character-limit-indicator__alert fudis-visually-hidden\"\n          role=\"alert\"\n        >\n          {{ singleControl.value.value?.length || 0 }}/{{ maxLength }}\n          {{ _maxLengthText | async }}</p\n        >\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n<ng-container\n  *ngIf=\"\n    control &&\n    maxLength &&\n    (control.value?.length === _maxLengthAlertThreshold || control.value?.length === maxLength)\n  \"\n>\n  <p class=\"fudis-guidance__character-limit-indicator__alert fudis-visually-hidden\" role=\"alert\"\n    >{{ control.value?.length || 0 }}/{{ maxLength }} {{ _maxLengthText | async }}</p\n  >\n</ng-container>\n", styles: [".fudis-guidance__errors--visible{display:flex;transform:translate(calc(-1 * .5rem / var(--fudis-rem-multiplier)));opacity:1;height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }, { kind: "component", type: ValidatorErrorMessageComponent, selector: "fudis-validator-error-message", inputs: ["focusId", "label", "type", "message", "visible", "controlName", "variant", "formId"], outputs: ["handleCreateError", "handleRemoveError"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GuidanceComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-guidance', standalone: false, template: "@let parentFormId = _parentFormId();\n\n<div class=\"fudis-guidance\" [id]=\"_id\">\n  <div [id]=\"for + '_guidance'\">\n    <div\n      [id]=\"_id + '-errors'\"\n      [class.fudis-guidance__errors]=\"\n        _afterViewInitDone() &&\n        ((control && control.touched) || (formGroup && formGroup.touched && groupBlurredOut))\n      \"\n    >\n      <fudis-icon\n        [icon]=\"'alert-fill'\"\n        *ngIf=\"\n          (control?.invalid && control?.touched) ||\n          (formGroup?.invalid && formGroup?.touched && groupBlurredOut)\n        \"\n      />\n      <div [attr.ariaLive]=\"ariaLive\" class=\"fudis-guidance__errors__list\">\n        <!--\n            Check errors for each control FormGroup e. g. english, finnish, swedish\n          -->\n        <ng-container *ngIf=\"formGroup?.controls && !control && !formGroup?.errors\">\n          <ng-container *ngFor=\"let singleControl of formGroup?.controls | keyvalue\">\n            <ng-container *ngIf=\"singleControl.value.errors\">\n              <ng-container *ngFor=\"let error of singleControl.value.errors | keyvalue\">\n                <fudis-validator-error-message\n                  *ngIf=\"error.value.message\"\n                  (handleCreateError)=\"_reloadErrorSummaryOnLazyLoad($event)\"\n                  [formId]=\"parentFormId\"\n                  [focusId]=\"for\"\n                  [visible]=\"\n                    !!((singleControl.value.touched || formGroup.touched) && groupBlurredOut)\n                  \"\n                  [type]=\"error.key\"\n                  [controlName]=\"singleControl.key\"\n                  [label]=\"inputLabel\"\n                  [message]=\"error.value.message\"\n                />\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!--\n            Check parent level errors of FormGroup e. g. oneRequired\n          -->\n        <ng-container *ngIf=\"formGroup?.errors && formGroup?.invalid\">\n          <ng-container *ngFor=\"let error of formGroup?.errors | keyvalue\">\n            <fudis-validator-error-message\n              *ngIf=\"error.value?.message\"\n              (handleCreateError)=\"_reloadErrorSummaryOnLazyLoad($event)\"\n              [formId]=\"parentFormId\"\n              [visible]=\"!!(formGroup.touched && groupBlurredOut)\"\n              [focusId]=\"for\"\n              [type]=\"error.key\"\n              [label]=\"inputLabel\"\n              [message]=\"error.value?.message\"\n            />\n          </ng-container>\n        </ng-container>\n\n        <!--\n            Check errors for single FormControl e. g. single text-input with maxlength error\n          -->\n        <ng-container *ngIf=\"control?.errors && !formGroup\">\n          <ng-container *ngFor=\"let error of control.errors | keyvalue\">\n            <fudis-validator-error-message\n              *ngIf=\"error.value?.message\"\n              (handleCreateError)=\"_reloadErrorSummaryOnLazyLoad($event)\"\n              [formId]=\"parentFormId\"\n              [visible]=\"control.touched\"\n              [focusId]=\"for\"\n              [type]=\"error.key\"\n              [label]=\"inputLabel\"\n              [message]=\"error.value?.message\"\n            />\n          </ng-container>\n        </ng-container>\n        <ng-content />\n      </div>\n    </div>\n\n    <p\n      *ngIf=\"helpText || (control && maxLength)\"\n      [attr.aria-hidden]=\"groupHelpTextHidden\"\n      class=\"fudis-guidance__help-text\"\n    >\n      <ng-container *ngIf=\"helpText\">{{ helpText }}</ng-container>\n    </p>\n  </div>\n  <ng-container *ngIf=\"maxLength && control\">\n    <small\n      class=\"fudis-guidance__character-limit-indicator fudis-guidance__character-limit-indicator__{{\n        _maxLengthWidth\n      }}\"\n      [class.fudis-guidance__character-limit-indicator__float-right]=\"!helpText\"\n    >\n      {{ control.value?.length || 0 }}/{{ maxLength }}\n      <span class=\"fudis-visually-hidden\">{{ _maxLengthText | async }}</span>\n    </small>\n  </ng-container>\n  <ng-container *ngIf=\"formGroup?.controls && !control && maxLength\">\n    <ng-container *ngFor=\"let singleControl of formGroup?.controls | keyvalue\">\n      <small\n        *ngIf=\"singleControl.key === selectedOption\"\n        class=\"fudis-guidance__character-limit-indicator fudis-guidance__character-limit-indicator__{{\n          _maxLengthWidth\n        }}\"\n        [class.fudis-guidance__character-limit-indicator__float-right]=\"!helpText\"\n      >\n        {{ singleControl.value.value?.length || 0 }}/{{ maxLength }}\n        <span class=\"fudis-visually-hidden\">{{ _maxLengthText | async }}</span>\n      </small>\n      <ng-container\n        *ngIf=\"\n          singleControl.value.value?.length === _maxLengthAlertThreshold ||\n          singleControl.value.value?.length === maxLength\n        \"\n      >\n        <p\n          class=\"fudis-guidance__character-limit-indicator__alert fudis-visually-hidden\"\n          role=\"alert\"\n        >\n          {{ singleControl.value.value?.length || 0 }}/{{ maxLength }}\n          {{ _maxLengthText | async }}</p\n        >\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n<ng-container\n  *ngIf=\"\n    control &&\n    maxLength &&\n    (control.value?.length === _maxLengthAlertThreshold || control.value?.length === maxLength)\n  \"\n>\n  <p class=\"fudis-guidance__character-limit-indicator__alert fudis-visually-hidden\" role=\"alert\"\n    >{{ control.value?.length || 0 }}/{{ maxLength }} {{ _maxLengthText | async }}</p\n  >\n</ng-container>\n", styles: [".fudis-guidance__errors--visible{display:flex;transform:translate(calc(-1 * .5rem / var(--fudis-rem-multiplier)));opacity:1;height:auto}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: FudisIdService }, { type: FudisInternalErrorSummaryService }, { type: i0.ElementRef }], propDecorators: { for: [{
                type: Input,
                args: [{ required: true }]
            }], inputLabel: [{
                type: Input,
                args: [{ required: true }]
            }], control: [{
                type: Input
            }], formGroup: [{
                type: Input
            }], helpText: [{
                type: Input
            }], ariaLive: [{
                type: Input
            }], maxLength: [{
                type: Input
            }], selectedOption: [{
                type: Input
            }], groupBlurredOut: [{
                type: Input
            }], groupHelpTextHidden: [{
                type: Input
            }] } });

class CheckboxGroupComponent extends GroupComponentBaseDirective {
    constructor(_document, _idService, _focusService) {
        super(_idService, _focusService);
        this._document = _document;
        /**
         * Width size of the group.
         */
        this.size = 'lg';
        /**
         * Emit changed control's name and whole FormGroup when one Checkbox is clicked.
         */
        this.handleChange = new EventEmitter();
        /**
         * To determine if focus has been moved out from the whole checkbox group, so possible errors will
         * not show before that.
         */
        this._groupBlurredOut = false;
        /**
         * Boolean to sync parent Checkbox Group and child Checkboxes if component uses internally created
         * FormGroup or one provided from the App.
         */
        this._internalFormGroup = false;
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.formGroup) {
                this._required.next(FudisValidatorUtilities.oneRequiredOrMin(this.formGroup));
            }
        });
    }
    _applyGroupMarkAsTouched() {
        if (this.formGroup.touched) {
            this._groupBlurredOut = true;
        }
        else {
            /**
             * Extend original markAllAsTouched function to change _groupBlurredOut value to 'true', so
             * error messages are loaded when e.g. on Submit touched value is changed programatically.
             */
            const originalMarkAllAsTouched = this.formGroup.markAllAsTouched;
            this.formGroup.markAllAsTouched = () => {
                originalMarkAllAsTouched.apply(this.formGroup);
                this._groupBlurredOut = true;
            };
        }
    }
    /**
     * Getter for _groupBlurredOut boolean.
     */
    get groupBlurredOut() {
        return this._groupBlurredOut;
    }
    /**
     * Getter for _internalFormGroup boolean
     */
    get internalFormGroup() {
        return this._internalFormGroup;
    }
    ngOnInit() {
        this._setParentComponentId('checkbox-group');
        /**
         * If there's no FormGroup provided when component is initialised, create one internally.
         */
        if (!this.formGroup) {
            this._internalFormGroup = true;
            this.formGroup = new FormGroup({});
        }
        else {
            /**
             * Validation check can be currently be done only for App provided formGroup
             */
            this._required.next(FudisValidatorUtilities.oneRequiredOrMin(this.formGroup));
        }
        this.formGroup.valueChanges
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe(() => this._updateValueAndValidityTrigger.next());
        this._applyGroupMarkAsTouched();
    }
    ngAfterViewInit() {
        super.ngAfterViewInit();
        /**
         * For Screen reader users bind guidance text to first checkbox child input
         */
        const checkboxIds = this._idService.getAllChildrenIds('checkbox-group', this.id);
        const firstCheckbox = this._getFirstEnabledCheckbox(checkboxIds);
        const guidanceId = this._guidance?.['_id'];
        if (firstCheckbox && guidanceId) {
            firstCheckbox.setAttribute('aria-describedby', guidanceId);
        }
    }
    /**
     * Return first checkbox child input when it is not disabled
     */
    _getFirstEnabledCheckbox(ids) {
        for (const id of ids) {
            const checkbox = this._document.getElementById(id);
            if (checkbox instanceof HTMLInputElement && !checkbox.disabled) {
                return checkbox;
            }
        }
        return null;
    }
    /**
     * Used to display possible error messages only when focus has moved out from all the group's
     * checkboxes.
     */
    setGroupBlurredOut(value) {
        if (value) {
            this._groupBlurredOut = true;
        }
        else {
            this._groupBlurredOut = false;
        }
    }
    /**
     * When child Checkbox component is clicked, it calls this parent's function, which will then
     * trigger Output emit.
     *
     * @param changedControlName Name of the clicked control
     */
    triggerEmit(changedControlName) {
        this.handleChange.emit({
            changedControlName: changedControlName,
            formGroup: this.formGroup,
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: DOCUMENT }, { token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CheckboxGroupComponent, isStandalone: false, selector: "fudis-checkbox-group", inputs: { formGroup: "formGroup", size: "size" }, outputs: { handleChange: "handleChange" }, viewQueries: [{ propertyName: "_guidance", first: true, predicate: ["checkboxGroupGuidance"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fudis-fieldset\n  class=\"fudis-checkbox-group\"\n  [id]=\"id\"\n  [labelSize]=\"'sm'\"\n  [label]=\"label\"\n  [required]=\"_required | async\"\n  [errorSummaryBreadcrumb]=\"false\"\n  [initialFocus]=\"initialFocus\"\n  [inputSize]=\"size\"\n  [popoverText]=\"popoverText\"\n  [popoverPosition]=\"popoverPosition\"\n  [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  [syncLegendHeight]=\"true\"\n>\n  <fudis-fieldset-content>\n    <ng-content select=\"fudis-checkbox-group-option\" />\n    <fudis-guidance\n      #checkboxGroupGuidance\n      *ngIf=\"formGroup && !disableGuidance\"\n      [inputLabel]=\"label\"\n      [helpText]=\"helpText\"\n      [for]=\"id + '-legend'\"\n      [groupBlurredOut]=\"groupBlurredOut\"\n      [formGroup]=\"formGroup\"\n      [groupHelpTextHidden]=\"true\"\n    >\n      <ng-content select=\"fudis-error-message\" />\n    </fudis-guidance>\n  </fudis-fieldset-content>\n</fudis-fieldset>\n", styles: [".fudis-checkbox-group{box-sizing:border-box;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: FieldsetContentDirective, selector: "fudis-fieldset-content" }, { kind: "component", type: FieldSetComponent, selector: "fudis-fieldset", inputs: ["label", "width", "inputSize", "align", "initialFocus", "errorSummaryBreadcrumb", "required", "labelSize", "id", "helpText", "syncLegendHeight"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-checkbox-group', standalone: false, template: "<fudis-fieldset\n  class=\"fudis-checkbox-group\"\n  [id]=\"id\"\n  [labelSize]=\"'sm'\"\n  [label]=\"label\"\n  [required]=\"_required | async\"\n  [errorSummaryBreadcrumb]=\"false\"\n  [initialFocus]=\"initialFocus\"\n  [inputSize]=\"size\"\n  [popoverText]=\"popoverText\"\n  [popoverPosition]=\"popoverPosition\"\n  [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  [syncLegendHeight]=\"true\"\n>\n  <fudis-fieldset-content>\n    <ng-content select=\"fudis-checkbox-group-option\" />\n    <fudis-guidance\n      #checkboxGroupGuidance\n      *ngIf=\"formGroup && !disableGuidance\"\n      [inputLabel]=\"label\"\n      [helpText]=\"helpText\"\n      [for]=\"id + '-legend'\"\n      [groupBlurredOut]=\"groupBlurredOut\"\n      [formGroup]=\"formGroup\"\n      [groupHelpTextHidden]=\"true\"\n    >\n      <ng-content select=\"fudis-error-message\" />\n    </fudis-guidance>\n  </fudis-fieldset-content>\n</fudis-fieldset>\n", styles: [".fudis-checkbox-group{box-sizing:border-box;margin:0;padding:0}\n"] }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: FudisIdService }, { type: FudisFocusService }], propDecorators: { _guidance: [{
                type: ViewChild,
                args: ['checkboxGroupGuidance']
            }], formGroup: [{
                type: Input
            }], size: [{
                type: Input
            }], handleChange: [{
                type: Output
            }] } });

class CheckboxGroupOptionComponent {
    constructor(_idService, _checkboxGroup) {
        this._idService = _idService;
        this._checkboxGroup = _checkboxGroup;
        /**
         * Emits changed Checkbox and its control.
         */
        this.handleChange = new EventEmitter();
        /**
         * If checkbox has focus
         */
        this._focused = false;
        /**
         * Boolean for syncing, if this Checkbox had 'control' property provided and parent had no
         * 'formGroup' provided.
         */
        this._controlAddedToParent = false;
    }
    ngOnInit() {
        if (this.id) {
            this._idService.addNewChildId('checkbox-group', this._checkboxGroup.id, this.id);
        }
        else {
            this.id = this._idService.getNewChildId('checkbox-group', this._checkboxGroup.id);
        }
        const parentControl = this._checkboxGroup?.formGroup?.controls?.[this.controlName];
        if (!this.control && this.controlName && parentControl) {
            /**
             * Set Checkbox's control to match one in parent FormGroup.
             */
            this.control = parentControl;
        }
        else if (this.control && this._checkboxGroup.internalFormGroup) {
            /**
             * If no name was provided, use id instead.
             */
            if (!this.controlName) {
                this.controlName = this.id;
            }
            /**
             * If parent has no FormGroup provided, add this control to internally created FormGroup.
             */
            this._checkboxGroup.formGroup.addControl(this.controlName, this.control);
            this._controlAddedToParent = true;
        }
    }
    ngOnDestroy() {
        if (this._controlAddedToParent && this.controlName) {
            const parentControl = this._checkboxGroup?.formGroup?.controls?.[this.controlName];
            if (parentControl) {
                this._checkboxGroup.formGroup.removeControl(this.controlName);
            }
        }
    }
    /**
     * For toggling checkbox
     */
    _onChange() {
        const optionToEmit = {
            id: this.id,
            groupName: this._checkboxGroup.id,
            controlName: this.controlName,
            label: this.label,
            value: this._checkboxGroup.formGroup.controls[this.controlName]?.['value'],
        };
        /**
         * This Checkbox's emit
         */
        this.handleChange.emit({ checkbox: optionToEmit, control: this.control });
        /**
         * Call parent's function, which triggers Checkbox Group's emit
         */
        this._checkboxGroup.triggerEmit(this.controlName);
    }
    /**
     * When focusing out from checkbox, determine if next focus target is outside of the same checkbox
     * group. If yes, then tell parent Checkbox Group, that focus has moved outside. --> If there are
     * validation errors, those should become visible.
     */
    _onBlur(event) {
        this._focused = false;
        if (event.relatedTarget?.getAttribute('name') !== this._checkboxGroup.id) {
            setTimeout(() => {
                if (document.activeElement?.getAttribute('name') !== this._checkboxGroup.id) {
                    this._checkboxGroup.handleBlur.emit(event);
                    this._checkboxGroup.setGroupBlurredOut(true);
                }
            }, 150);
        }
    }
    /**
     * When Checkbox is focused
     */
    _onFocus(event) {
        this._focused = true;
        this._checkboxGroup.onFocus(event);
    }
    /**
     * If control is disabled, prevent toggling it.
     */
    _checkboxClick(event) {
        if (this.control.disabled) {
            event.preventDefault();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxGroupOptionComponent, deps: [{ token: FudisIdService }, { token: CheckboxGroupComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CheckboxGroupOptionComponent, isStandalone: false, selector: "fudis-checkbox-group-option", inputs: { controlName: "controlName", control: "control", label: "label", id: "id" }, outputs: { handleChange: "handleChange" }, viewQueries: [{ propertyName: "_inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"control\">\n  <label\n    class=\"fudis-checkbox fudis-checkbox__label\"\n    [attr.for]=\"id\"\n    [id]=\"id + '-label'\"\n    [class.fudis-checkbox--disabled]=\"control.disabled || _checkboxGroup.disabled\"\n  >\n    <input\n      #inputRef\n      (click)=\"_checkboxClick($event)\"\n      type=\"checkbox\"\n      class=\"fudis-checkbox__input\"\n      [id]=\"id\"\n      [formControl]=\"control\"\n      [value]=\"control.value\"\n      [name]=\"_checkboxGroup.id\"\n      [attr.tabindex]=\"control.disabled || _checkboxGroup.disabled ? -1 : null\"\n      [attr.aria-disabled]=\"control.disabled || _checkboxGroup.disabled || null\"\n      [attr.aria-invalid]=\"\n        (_checkboxGroup.formGroup &&\n          _checkboxGroup.formGroup.touched &&\n          _checkboxGroup.formGroup.invalid &&\n          _checkboxGroup.groupBlurredOut) ||\n        null\n      \"\n      (change)=\"_onChange()\"\n      (blur)=\"_onBlur($event)\"\n      (focus)=\"_onFocus($event)\"\n      (keyup)=\"_checkboxGroup.handleKeyUp.emit($event)\"\n    />\n    <div\n      class=\"fudis-checkbox__content\"\n      [class.fudis-checkbox__content--disabled]=\"control.disabled || _checkboxGroup.disabled\"\n    >\n      <div class=\"fudis-checkbox__content-wrapper\">\n        <span\n          class=\"fudis-checkbox__content__box\"\n          [class.fudis-checkbox__content__box--focused]=\"_focused\"\n          [class.fudis-checkbox__content__box--invalid]=\"\n            _checkboxGroup.formGroup &&\n            _checkboxGroup.formGroup.touched &&\n            _checkboxGroup.formGroup.invalid &&\n            _checkboxGroup.groupBlurredOut\n          \"\n          [class.fudis-checkbox__content__box--disabled]=\"\n            control.disabled || _checkboxGroup.disabled\n          \"\n        >\n          <fudis-icon\n            *ngIf=\"control.value\"\n            [icon]=\"'check'\"\n            class=\"fudis-checkbox__content__box__icon\"\n          />\n        </span>\n      </div>\n      <span class=\"fudis-checkbox__content__label\">\n        {{ label }}\n      </span>\n    </div>\n  </label>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxGroupOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-checkbox-group-option', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container *ngIf=\"control\">\n  <label\n    class=\"fudis-checkbox fudis-checkbox__label\"\n    [attr.for]=\"id\"\n    [id]=\"id + '-label'\"\n    [class.fudis-checkbox--disabled]=\"control.disabled || _checkboxGroup.disabled\"\n  >\n    <input\n      #inputRef\n      (click)=\"_checkboxClick($event)\"\n      type=\"checkbox\"\n      class=\"fudis-checkbox__input\"\n      [id]=\"id\"\n      [formControl]=\"control\"\n      [value]=\"control.value\"\n      [name]=\"_checkboxGroup.id\"\n      [attr.tabindex]=\"control.disabled || _checkboxGroup.disabled ? -1 : null\"\n      [attr.aria-disabled]=\"control.disabled || _checkboxGroup.disabled || null\"\n      [attr.aria-invalid]=\"\n        (_checkboxGroup.formGroup &&\n          _checkboxGroup.formGroup.touched &&\n          _checkboxGroup.formGroup.invalid &&\n          _checkboxGroup.groupBlurredOut) ||\n        null\n      \"\n      (change)=\"_onChange()\"\n      (blur)=\"_onBlur($event)\"\n      (focus)=\"_onFocus($event)\"\n      (keyup)=\"_checkboxGroup.handleKeyUp.emit($event)\"\n    />\n    <div\n      class=\"fudis-checkbox__content\"\n      [class.fudis-checkbox__content--disabled]=\"control.disabled || _checkboxGroup.disabled\"\n    >\n      <div class=\"fudis-checkbox__content-wrapper\">\n        <span\n          class=\"fudis-checkbox__content__box\"\n          [class.fudis-checkbox__content__box--focused]=\"_focused\"\n          [class.fudis-checkbox__content__box--invalid]=\"\n            _checkboxGroup.formGroup &&\n            _checkboxGroup.formGroup.touched &&\n            _checkboxGroup.formGroup.invalid &&\n            _checkboxGroup.groupBlurredOut\n          \"\n          [class.fudis-checkbox__content__box--disabled]=\"\n            control.disabled || _checkboxGroup.disabled\n          \"\n        >\n          <fudis-icon\n            *ngIf=\"control.value\"\n            [icon]=\"'check'\"\n            class=\"fudis-checkbox__content__box__icon\"\n          />\n        </span>\n      </div>\n      <span class=\"fudis-checkbox__content__label\">\n        {{ label }}\n      </span>\n    </div>\n  </label>\n</ng-container>\n" }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: CheckboxGroupComponent, decorators: [{
                    type: Host
                }] }], propDecorators: { _inputRef: [{
                type: ViewChild,
                args: ['inputRef']
            }], controlName: [{
                type: Input
            }], control: [{
                type: Input
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], id: [{
                type: Input
            }], handleChange: [{
                type: Output
            }] } });

const fudisInputSizeArray = ['sm', 'md', 'lg'];
const fudisSelectionGroupInputSizeArray = ['sm', 'md', 'lg', 'full-width'];
const FudisDateInputFormat = {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMM YYYY',
};
const FUDIS_DATE_FORMATS = {
    ...MAT_NATIVE_DATE_FORMATS,
    parse: {
        dateInput: 'DD.MM.YYYY',
    },
    display: {
        ...MAT_NATIVE_DATE_FORMATS.display,
        dateInput: FudisDateInputFormat,
    },
};

/**
 * Update locale for Fudis translations in Datepicker
 *
 * @param value Language Signal string value
 * @returns Locale code
 */
const updateLocale = (value) => {
    switch (value) {
        case 'en':
            return 'en-GB';
        case 'fi':
            return 'fi-FI';
        case 'sv':
            return 'sv-SE';
        default:
            return 'en-GB';
    }
};
/**
 * Assign Fudis translation keys for Datepicker
 */
const updateMatDatePickerTranslations = (translations, datepickerIntl) => {
    const matDatePickerIntlToReturn = datepickerIntl;
    matDatePickerIntlToReturn.calendarLabel = translations.DATEPICKER.CALENDAR;
    matDatePickerIntlToReturn.closeCalendarLabel = translations.DATEPICKER.CLOSE;
    matDatePickerIntlToReturn.openCalendarLabel = translations.DATEPICKER.OPEN;
    matDatePickerIntlToReturn.prevMonthLabel = translations.DATEPICKER.PREV_MONTH;
    matDatePickerIntlToReturn.nextMonthLabel = translations.DATEPICKER.NEXT_MONTH;
    matDatePickerIntlToReturn.prevYearLabel = translations.DATEPICKER.PREV_YEAR;
    matDatePickerIntlToReturn.nextYearLabel = translations.DATEPICKER.NEXT_YEAR;
    matDatePickerIntlToReturn.prevMultiYearLabel = translations.DATEPICKER.PREV_MULTIYEAR;
    matDatePickerIntlToReturn.nextMultiYearLabel = translations.DATEPICKER.NEXT_MULTIYEAR;
    matDatePickerIntlToReturn.switchToMonthViewLabel = translations.DATEPICKER.SWITCH_MONTH_VIEW;
    matDatePickerIntlToReturn.switchToMultiYearViewLabel =
        translations.DATEPICKER.SWITCH_MULTIYEAR_VIEW;
    return matDatePickerIntlToReturn;
};
/**
 * Parse date input to number array
 *
 * @returns New Date(year, monthIndex, day) or null
 */
const parseDate = (value) => {
    // Split input value by non number values, e.g. 25/5/1977 or 25.5.1977 --> [25,5,1977]
    const numberArray = value
        ? value
            .split(/[^\d+]+/)
            .filter(Number)
            .map(Number)
        : null;
    // If day, month and year are provided. Year must have 4 digits.
    if (numberArray?.length === 3 && numberArray[2].toString().length === 4) {
        const newDate = new Date(numberArray[2], numberArray[1] - 1, numberArray[0]);
        const dayUnchanged = newDate.getDate() === numberArray[0];
        const monthUnchanged = newDate.getMonth() + 1 === numberArray[1];
        const yearUnChanged = newDate.getFullYear() === numberArray[2];
        if (dayUnchanged && monthUnchanged && yearUnChanged) {
            return newDate;
        }
        else {
            return null;
        }
    }
    // If no year is provided, assume it is current year
    if (numberArray?.length === 2) {
        const currentYear = new Date().getFullYear();
        const newDate = new Date(currentYear, numberArray[1] - 1, numberArray[0]);
        const dayUnchanged = newDate.getDate() === numberArray[0];
        const monthUnchanged = newDate.getMonth() + 1 === numberArray[1];
        if (dayUnchanged && monthUnchanged) {
            return newDate;
        }
        else {
            return null;
        }
    }
    // If input value is not parseable to Date object, return null
    return null;
};

class FudisDateAdapter extends NativeDateAdapter {
    /**
     * Original file:
     * https://github.com/angular/components/blob/main/src/material/core/datetime/native-date-adapter.ts
     */
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    parse(value) {
        return parseDate(value);
    }
    format(date, displayFormat) {
        if (!this.isValid(date)) {
            throw Error('FudisDateAdapter: Cannot format invalid date.');
        }
        const dtf = new Intl.DateTimeFormat(this._selectLanguage(displayFormat), {
            ...displayFormat,
            timeZone: 'utc',
        });
        return this._formatInputToDate(dtf, date);
    }
    /**
     * Change the calendar starting day of the week from default 0 (Sunday) to 1 (Monday)
     */
    getFirstDayOfWeek() {
        return 1;
    }
    /**
     * Determines from displayFormat value if the Date value is coming from the input field or from
     * the datepicker calendar. This ensures, that visible input value is always in Finnish DD.MM.YYYY
     * format, but calendar uses HTML lang in other context.
     */
    _selectLanguage(displayFormat) {
        if (Object.prototype.valueOf.call(displayFormat) === FudisDateInputFormat) {
            return 'fi-FI';
        }
        return this.locale;
    }
    /**
     * @param dtf Intl.DateTimeFormat object, containing the desired string format. It must have
     *   timeZone set to 'utc' to work fine
     * @param date Date from which we want to get the string representation according to dtf
     * @returns A Date object with its UTC representation based on the passed date info
     */
    _formatInputToDate(dtf, date) {
        // Passing the year to the constructor causes year numbers <100 to be converted to 19xx.
        // To work around this we use `setUTCFullYear` and `setUTCHours` instead.
        const d = new Date();
        d.setUTCFullYear(date.getFullYear(), date.getMonth(), date.getDate());
        d.setUTCHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
        return dtf.format(d);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisDateAdapter }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisDateAdapter, decorators: [{
            type: Injectable
        }] });

class ControlComponentBaseDirective extends FormCommonApiDirective {
    constructor(_idService, _focusService) {
        super(_idService, _focusService);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ControlComponentBaseDirective, deps: [{ token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ControlComponentBaseDirective, isStandalone: false, selector: "[fudisControlComponentBase]", inputs: { control: "control" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ControlComponentBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisControlComponentBase]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: FudisFocusService }], propDecorators: { control: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class DateRangeComponent {
    constructor(_idService) {
        this._idService = _idService;
        /**
         * Internal date comparison parse. By setting to false date comparison parsing is not executed and
         * comparison errors are not shown.
         */
        this.dateComparisonParse = true;
        /**
         * Show date comparison errors
         */
        this.showDateComparisonErrors = new BehaviorSubject(false);
    }
    ngOnChanges(changes) {
        const dateComparisonParse = changes.dateComparisonParse?.currentValue;
        const dateComparisonParseChanged = changes.dateComparisonParse?.currentValue !== changes.dateComparisonParse?.previousValue;
        if (dateComparisonParseChanged) {
            if (dateComparisonParse) {
                this.checkDateCrossings();
            }
            else if (dateComparisonParse === false) {
                this.showDateComparisonErrors.next(false);
            }
        }
    }
    /**
     * Check if start date is set to after end date
     */
    checkDateCrossings(value, type) {
        if (value && type === 'start') {
            this._startDateValue = value;
        }
        else if (value && type === 'end') {
            this._endDateValue = value;
        }
        /* Show date comparison errors only if there are both date values and comparison is allowed.
         * Compare only dates, do not take hours into account.
         */
        if (this._startDateValue &&
            this._endDateValue &&
            this._startDateValue.setHours(0, 0, 0, 0) > this._endDateValue.setHours(0, 0, 0, 0) &&
            this.dateComparisonParse) {
            this.showDateComparisonErrors.next(true);
        }
        else if (this.showDateComparisonErrors.value !== false) {
            this.showDateComparisonErrors.next(false);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeComponent, deps: [{ token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeComponent, isStandalone: false, selector: "fudis-date-range", inputs: { dateComparisonParse: "dateComparisonParse" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fudis-date-range\">\n  <ng-content select=\"[fudisDateStart]\"></ng-content>\n  <ng-content select=\"[fudisDateEnd]\"></ng-content>\n</div>\n", styles: [".fudis-date-range{display:flex;gap:calc(1rem / var(--fudis-rem-multiplier));align-items:baseline;opacity:1;max-width:calc(23rem / var(--fudis-rem-multiplier))}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-date-range', standalone: false, template: "<div class=\"fudis-date-range\">\n  <ng-content select=\"[fudisDateStart]\"></ng-content>\n  <ng-content select=\"[fudisDateEnd]\"></ng-content>\n</div>\n", styles: [".fudis-date-range{display:flex;gap:calc(1rem / var(--fudis-rem-multiplier));align-items:baseline;opacity:1;max-width:calc(23rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }], propDecorators: { dateComparisonParse: [{
                type: Input
            }] } });

class LabelComponent extends PopoverApiDirective {
    constructor(_translationService) {
        super();
        this._translationService = _translationService;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, deps: [{ token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LabelComponent, isStandalone: false, selector: "fudis-label", inputs: { id: "id", text: "text", for: "for", required: "required", parentSize: "parentSize" }, usesInheritance: true, ngImport: i0, template: "<label #labelElementRef class=\"fudis-label\" [attr.for]=\"for\" [id]=\"id\">\n  <div class=\"fudis-label__content\"\n    ><span class=\"fudis-label__content__text\"\n      >{{ text }}<span *ngIf=\"required\" class=\"fudis-label__content__space\"></span\n      ><span class=\"fudis-label__content__required\" *ngIf=\"required\"\n        >({{ _translationService.getTranslations()().REQUIRED }})</span\n      ></span\n    >\n  </div>\n  <fudis-button\n    *ngIf=\"popoverText && popoverTriggerLabel\"\n    class=\"fudis-label__content__button\"\n    [size]=\"'icon-only'\"\n    [variant]=\"'tertiary'\"\n    [icon]=\"'info-circle'\"\n    [labelHidden]=\"true\"\n    [label]=\"popoverTriggerLabel\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n  />\n</label>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "fudis-button", inputs: ["label", "variant", "size", "type", "labelHidden", "ariaLabel", "disabled", "icon", "iconRotate", "id", "asMenuButton"], outputs: ["handleClick", "handleFocus", "handleBlur", "handleDestroy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<label #labelElementRef class=\"fudis-label\" [attr.for]=\"for\" [id]=\"id\">\n  <div class=\"fudis-label__content\"\n    ><span class=\"fudis-label__content__text\"\n      >{{ text }}<span *ngIf=\"required\" class=\"fudis-label__content__space\"></span\n      ><span class=\"fudis-label__content__required\" *ngIf=\"required\"\n        >({{ _translationService.getTranslations()().REQUIRED }})</span\n      ></span\n    >\n  </div>\n  <fudis-button\n    *ngIf=\"popoverText && popoverTriggerLabel\"\n    class=\"fudis-label__content__button\"\n    [size]=\"'icon-only'\"\n    [variant]=\"'tertiary'\"\n    [icon]=\"'info-circle'\"\n    [labelHidden]=\"true\"\n    [label]=\"popoverTriggerLabel\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n  />\n</label>\n" }]
        }], ctorParameters: () => [{ type: FudisTranslationService }], propDecorators: { id: [{
                type: Input,
                args: [{ required: true }]
            }], text: [{
                type: Input,
                args: [{ required: true }]
            }], for: [{
                type: Input
            }], required: [{
                type: Input
            }], parentSize: [{
                type: Input
            }] } });

class DatepickerComponent extends ControlComponentBaseDirective {
    constructor(_parentDateRange, _adapter, _datePickerConfigService, _datepickerIntl, _translationService, _idService, _focusService) {
        super(_idService, _focusService);
        this._parentDateRange = _parentDateRange;
        this._adapter = _adapter;
        this._datePickerConfigService = _datePickerConfigService;
        this._datepickerIntl = _datepickerIntl;
        this._translationService = _translationService;
        /**
         * Available sizes for the Datepicker
         */
        this.size = 'md';
        /**
         * Show internal date parsing validator message. By setting to false date parsing is not executed.
         */
        this.dateParse = true;
        /**
         * Type of the Datepicker in Date Range
         */
        this.dateRangeType = null;
        /**
         * Fudis translation for date parse error message
         */
        this._dateParseError = new BehaviorSubject('');
        /**
         * Fudis translation for Datepicker placeholder text
         */
        this._placeholderString = new BehaviorSubject('');
        /**
         * Set and delete errors from Date Range start and end date inputs
         */
        if (_parentDateRange) {
            _parentDateRange?.showDateComparisonErrors.pipe(takeUntilDestroyed()).subscribe((value) => {
                const currentErrors = this.control?.errors;
                if (value) {
                    if (this.dateRangeType === 'start') {
                        this.control?.setErrors({
                            ...currentErrors,
                            datepickerStartDateInvalid: { message: this._startDateInvalidTranslation },
                        });
                    }
                    else if (this.dateRangeType === 'end') {
                        this.control?.setErrors({
                            ...currentErrors,
                            datepickerEndDateInvalid: { message: this._endDateInvalidTranslation },
                        });
                    }
                    this.control?.markAllAsTouched();
                }
                else {
                    if (currentErrors) {
                        delete currentErrors['datepickerStartDateInvalid'];
                        delete currentErrors['datepickerEndDateInvalid'];
                        this.control?.setErrors({ ...currentErrors });
                        this.control?.updateValueAndValidity();
                    }
                }
            });
        }
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.control) {
                this._required.next(FudisValidatorUtilities.required(this.control));
                this._minDate = FudisValidatorUtilities.minDate(this.control);
                this._maxDate = FudisValidatorUtilities.maxDate(this.control);
            }
        });
        effect(() => {
            _adapter.setLocale(updateLocale(_translationService.getLanguageSignal()()));
            const translations = _translationService.getTranslations()();
            this._dateParseError.next(translations.DATEPICKER.VALIDATION.DATE_PARSE);
            _datepickerIntl = updateMatDatePickerTranslations(translations, _datepickerIntl);
            this._startDateInvalidTranslation =
                this._translationService.getTranslations()().DATEPICKER.VALIDATION.START_DATE_INVALID;
            this._endDateInvalidTranslation =
                this._translationService.getTranslations()().DATEPICKER.VALIDATION.END_DATE_INVALID;
            this._placeholderString.next(translations.DATEPICKER.PLACEHOLDER);
        });
    }
    /**
     * Validator reads HTML input field and checks if it can be converted to valid Date object
     */
    _datepickerParseValidatorFn() {
        return (control) => {
            if (!control) {
                return null;
            }
            const inputElValue = this._inputRef?.nativeElement?.value;
            const isValidDate = inputElValue ? parseDate(inputElValue) : false;
            if (!!inputElValue && !isValidDate) {
                return { datepickerDateParse: { message: this._dateParseError } };
            }
            return null;
        };
    }
    _addParseValidator() {
        this._parseValidatorInstance = this._datepickerParseValidatorFn();
        this.control.addValidators(this._parseValidatorInstance);
    }
    _removeParseValidator() {
        if (this._parseValidatorInstance) {
            this.control.removeValidators(this._parseValidatorInstance);
            this._parseValidatorInstance = null;
        }
    }
    /**
     * Handle calendar close
     */
    _handleCalendarClose() {
        this.control.updateValueAndValidity();
    }
    ngOnInit() {
        this._setComponentId('datepicker');
        if (!this._parseValidatorInstance && this.dateParse) {
            this._addParseValidator();
        }
    }
    ngAfterViewInit() {
        super.ngAfterViewInit();
        const inputElValue = this._inputRef?.nativeElement?.value;
        const isValidDate = inputElValue ? parseDate(inputElValue) : false;
        if (isValidDate !== false) {
            this._parentDateRange?.checkDateCrossings(isValidDate, this.dateRangeType);
        }
    }
    ngOnChanges(changes) {
        // If prop dateParse value changes, add or remove validator accordingly
        if (changes.dateParse?.currentValue !== changes.dateParse?.previousValue) {
            if (changes.dateParse?.currentValue && !this._parseValidatorInstance) {
                this._addParseValidator();
            }
            else if (!changes.dateParse?.currentValue && this._parseValidatorInstance) {
                this._removeParseValidator();
            }
        }
        // Do checks for the control to define attributes used in e.g. HTML
        if (changes.control?.currentValue !== changes.control?.previousValue) {
            this._subscription?.unsubscribe();
            this._updateValueAndValidityTrigger.next();
            // Subscribe to control value changes and call parent's date crossing check with current value and Date Range input type
            if (this._parentDateRange && this.dateRangeType) {
                this._subscription = this.control.valueChanges
                    .pipe(takeUntilDestroyed(this._destroyRef))
                    .subscribe((value) => {
                    this._updateValueAndValidityTrigger.next();
                    this._parentDateRange?.checkDateCrossings(value, this.dateRangeType);
                });
            }
            else {
                this._subscription = this.control.valueChanges
                    .pipe(takeUntilDestroyed(this._destroyRef))
                    .subscribe(() => this._updateValueAndValidityTrigger.next());
            }
            // If control changes and these checks are on, add parseValidator
            if (!this._parseValidatorInstance && this.dateParse) {
                this._addParseValidator();
            }
        }
    }
    ngOnDestroy() {
        this._removeParseValidator();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatepickerComponent, deps: [{ token: DateRangeComponent, host: true, optional: true }, { token: i2$1.DateAdapter }, { token: FudisTranslationService }, { token: i4$1.MatDatepickerIntl }, { token: FudisTranslationService }, { token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatepickerComponent, isStandalone: false, selector: "fudis-datepicker", inputs: { control: "control", size: "size", dateParse: "dateParse" }, providers: [
            {
                provide: DateAdapter,
                useClass: FudisDateAdapter,
                deps: [MAT_DATE_LOCALE],
            },
            { provide: MAT_DATE_FORMATS, useValue: FUDIS_DATE_FORMATS },
        ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"fudis-datepicker fudis-input-size__{{ size }}\">\n  <fudis-label\n    [id]=\"id + '-label'\"\n    [for]=\"id\"\n    [text]=\"label\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  ></fudis-label>\n  <div class=\"fudis-datepicker__input-wrapper\">\n    <input\n      #inputRef\n      class=\"fudis-form-input fudis-datepicker__input\"\n      [id]=\"id\"\n      [matDatepicker]=\"picker\"\n      [formControl]=\"control\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"handleBlur.emit($event)\"\n      (keyup)=\"handleKeyUp.emit($event)\"\n      [min]=\"_minDate\"\n      [max]=\"_maxDate\"\n      [placeholder]=\"_placeholderString | async\"\n      [attr.tabindex]=\"disabled ? -1 : null\"\n      [attr.aria-disabled]=\"control.disabled || disabled || null\"\n      [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n      [attr.required]=\"(_required | async) || null\"\n      [attr.aria-describedby]=\"id + '_guidance'\"\n    />\n    <mat-datepicker-toggle\n      matSuffix\n      class=\"fudis-datepicker__toggle\"\n      [id]=\"id + '-calendar-icon-toggle'\"\n      [for]=\"picker\"\n      [disabled]=\"control.disabled || disabled\"\n      [disableRipple]=\"true\"\n    >\n      <mat-icon matDatepickerToggleIcon>\n        <fudis-icon\n          [icon]=\"'calendar'\"\n          [color]=\"control.disabled || disabled ? 'gray-dark' : 'primary'\"\n        ></fudis-icon>\n      </mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      #picker\n      panelClass=\"fudis-datepicker__datepicker\"\n      (closed)=\"_handleCalendarClose()\"\n    ></mat-datepicker>\n  </div>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n", styles: [".fudis-datepicker{width:100%}.fudis-datepicker__input-wrapper{position:relative}.fudis-datepicker__input{border:1px solid #484848;border-radius:2px;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;box-sizing:border-box;padding:0 0 0 calc(.5rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-datepicker__input:focus{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-datepicker__toggle{display:flex;position:absolute;top:50%;right:calc(.25rem / var(--fudis-rem-multiplier));align-items:center;justify-content:center;transform:translateY(-50%)}.fudis-datepicker__datepicker{background-color:#fff;border:1px solid #484848}.fudis-datepicker__guidance__help-text{color:#484848;text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;margin-top:calc(.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i4$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }, { kind: "component", type: LabelComponent, selector: "fudis-label", inputs: ["id", "text", "for", "required", "parentSize"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-datepicker', encapsulation: ViewEncapsulation.None, providers: [
                        {
                            provide: DateAdapter,
                            useClass: FudisDateAdapter,
                            deps: [MAT_DATE_LOCALE],
                        },
                        { provide: MAT_DATE_FORMATS, useValue: FUDIS_DATE_FORMATS },
                    ], standalone: false, template: "<div class=\"fudis-datepicker fudis-input-size__{{ size }}\">\n  <fudis-label\n    [id]=\"id + '-label'\"\n    [for]=\"id\"\n    [text]=\"label\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  ></fudis-label>\n  <div class=\"fudis-datepicker__input-wrapper\">\n    <input\n      #inputRef\n      class=\"fudis-form-input fudis-datepicker__input\"\n      [id]=\"id\"\n      [matDatepicker]=\"picker\"\n      [formControl]=\"control\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"handleBlur.emit($event)\"\n      (keyup)=\"handleKeyUp.emit($event)\"\n      [min]=\"_minDate\"\n      [max]=\"_maxDate\"\n      [placeholder]=\"_placeholderString | async\"\n      [attr.tabindex]=\"disabled ? -1 : null\"\n      [attr.aria-disabled]=\"control.disabled || disabled || null\"\n      [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n      [attr.required]=\"(_required | async) || null\"\n      [attr.aria-describedby]=\"id + '_guidance'\"\n    />\n    <mat-datepicker-toggle\n      matSuffix\n      class=\"fudis-datepicker__toggle\"\n      [id]=\"id + '-calendar-icon-toggle'\"\n      [for]=\"picker\"\n      [disabled]=\"control.disabled || disabled\"\n      [disableRipple]=\"true\"\n    >\n      <mat-icon matDatepickerToggleIcon>\n        <fudis-icon\n          [icon]=\"'calendar'\"\n          [color]=\"control.disabled || disabled ? 'gray-dark' : 'primary'\"\n        ></fudis-icon>\n      </mat-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      #picker\n      panelClass=\"fudis-datepicker__datepicker\"\n      (closed)=\"_handleCalendarClose()\"\n    ></mat-datepicker>\n  </div>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n", styles: [".fudis-datepicker{width:100%}.fudis-datepicker__input-wrapper{position:relative}.fudis-datepicker__input{border:1px solid #484848;border-radius:2px;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;box-sizing:border-box;padding:0 0 0 calc(.5rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-datepicker__input:focus{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-datepicker__toggle{display:flex;position:absolute;top:50%;right:calc(.25rem / var(--fudis-rem-multiplier));align-items:center;justify-content:center;transform:translateY(-50%)}.fudis-datepicker__datepicker{background-color:#fff;border:1px solid #484848}.fudis-datepicker__guidance__help-text{color:#484848;text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;margin-top:calc(.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: DateRangeComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: i2$1.DateAdapter }, { type: FudisTranslationService }, { type: i4$1.MatDatepickerIntl }, { type: FudisTranslationService }, { type: FudisIdService }, { type: FudisFocusService }], propDecorators: { control: [{
                type: Input,
                args: [{ required: true }]
            }], size: [{
                type: Input
            }], dateParse: [{
                type: Input
            }] } });

class DescriptionListComponent extends GridApiDirective {
    constructor(_idService) {
        super();
        this._idService = _idService;
        /**
         * Disable Grid behavior for Description List
         */
        this.disableGrid = false;
        /**
         * Variant for Description List structure and layout
         */
        this.variant = 'regular';
        /**
         * Grid row gap. Using Fudis spacing token values of xxs to xxl and none.
         */
        this.rowGap = 'sm';
        /**
         * HTML element to render. If your Description List has only one item, use 'p', otherwise 'dl'.
         */
        this.tag = 'dl';
        /**
         * CSS class list
         */
        this._classList = new BehaviorSubject('');
        /**
         * Signal for variant
         */
        this._dlVariant = signal('regular');
        /**
         * Signal for listening disableGrid Input, used in DL Item.
         */
        this._disabledGrid = signal(false);
        this.id = this._idService.getNewGrandParentId('description-list');
    }
    ngOnInit() {
        this._setClasses();
    }
    ngOnChanges(changes) {
        if (changes.variant?.currentValue &&
            changes.variant?.currentValue !== changes.variant?.previousValue) {
            this._dlVariant.set(changes.variant.currentValue);
        }
        if (changes.disableGrid?.currentValue !== changes.disableGrid?.previousValue) {
            this._setClasses();
            const disableGrid = !!changes.disableGrid?.currentValue;
            this._disabledGrid.set(disableGrid);
        }
    }
    /**
     * Read only signal for variant
     */
    getVariant() {
        return this._dlVariant.asReadonly();
    }
    /**
     * Read only signal for disabledGrid value
     */
    getDisabledGridStatus() {
        return this._disabledGrid.asReadonly();
    }
    /**
     * Define correct CSS classes
     */
    _setClasses() {
        const cssClasses = [];
        cssClasses.push('fudis-dl');
        if (this.disableGrid) {
            cssClasses.push('fudis-dl__disabled-grid');
        }
        const combined = this.classes ? cssClasses.concat(this.classes) : cssClasses;
        this._classList.next(combined.join(' '));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListComponent, deps: [{ token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DescriptionListComponent, isStandalone: false, selector: "fudis-dl", inputs: { disableGrid: "disableGrid", variant: "variant", rowGap: "rowGap", tag: "tag" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"tag === 'p'\">\n  <ng-container *ngTemplateOutlet=\"singleItem\" />\n</ng-container>\n\n<ng-container *ngIf=\"tag === 'dl' && !disableGrid\">\n  <ng-container *ngTemplateOutlet=\"multipleItems\" />\n</ng-container>\n\n<ng-container *ngIf=\"tag === 'dl' && disableGrid\">\n  <ng-container *ngTemplateOutlet=\"disabledGrid\" />\n</ng-container>\n\n<ng-template #disabledGrid>\n  <dl [id]=\"id\" [class]=\"_classList | async\" role=\"list\">\n    <ng-container *ngTemplateOutlet=\"dlContent\"></ng-container>\n  </dl>\n</ng-template>\n\n<ng-template #singleItem>\n  <div [id]=\"id\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"dlContent\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #multipleItems>\n  <dl\n    *ngIf=\"_classList | async as classes\"\n    fudisGrid\n    [id]=\"id\"\n    [width]=\"width\"\n    [align]=\"align\"\n    [alignItemsX]=\"alignItemsX\"\n    [alignItemsY]=\"alignItemsY\"\n    [classes]=\"classes\"\n    [serviceDefaults]=\"false\"\n    [columnGap]=\"columnGap\"\n    [rowGap]=\"variant === 'compact' ? 'none' : rowGap\"\n    [columns]=\"columns ? columns : 2\"\n    role=\"list\"\n  >\n    <ng-container *ngTemplateOutlet=\"dlContent\"></ng-container>\n  </dl>\n</ng-template>\n\n<ng-template #dlContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".fudis-dl{box-sizing:border-box;margin:0;padding:0}.fudis-dl__disabled-grid{box-sizing:border-box;margin:0;padding:0;columns:1}@media screen and (min-width: 48em){.fudis-dl__disabled-grid{columns:2}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: GridDirective, selector: "[fudisGrid]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dl', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"tag === 'p'\">\n  <ng-container *ngTemplateOutlet=\"singleItem\" />\n</ng-container>\n\n<ng-container *ngIf=\"tag === 'dl' && !disableGrid\">\n  <ng-container *ngTemplateOutlet=\"multipleItems\" />\n</ng-container>\n\n<ng-container *ngIf=\"tag === 'dl' && disableGrid\">\n  <ng-container *ngTemplateOutlet=\"disabledGrid\" />\n</ng-container>\n\n<ng-template #disabledGrid>\n  <dl [id]=\"id\" [class]=\"_classList | async\" role=\"list\">\n    <ng-container *ngTemplateOutlet=\"dlContent\"></ng-container>\n  </dl>\n</ng-template>\n\n<ng-template #singleItem>\n  <div [id]=\"id\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"dlContent\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #multipleItems>\n  <dl\n    *ngIf=\"_classList | async as classes\"\n    fudisGrid\n    [id]=\"id\"\n    [width]=\"width\"\n    [align]=\"align\"\n    [alignItemsX]=\"alignItemsX\"\n    [alignItemsY]=\"alignItemsY\"\n    [classes]=\"classes\"\n    [serviceDefaults]=\"false\"\n    [columnGap]=\"columnGap\"\n    [rowGap]=\"variant === 'compact' ? 'none' : rowGap\"\n    [columns]=\"columns ? columns : 2\"\n    role=\"list\"\n  >\n    <ng-container *ngTemplateOutlet=\"dlContent\"></ng-container>\n  </dl>\n</ng-template>\n\n<ng-template #dlContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".fudis-dl{box-sizing:border-box;margin:0;padding:0}.fudis-dl__disabled-grid{box-sizing:border-box;margin:0;padding:0;columns:1}@media screen and (min-width: 48em){.fudis-dl__disabled-grid{columns:2}}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }], propDecorators: { disableGrid: [{
                type: Input
            }], variant: [{
                type: Input
            }], rowGap: [{
                type: Input
            }], tag: [{
                type: Input
            }] } });

class DescriptionListItemComponent {
    constructor(_element, _idService, _parentDl) {
        this._element = _element;
        this._idService = _idService;
        this._parentDl = _parentDl;
        /**
         * Main CSS class
         */
        this._mainCssClass = new BehaviorSubject('fudis-dl-item');
        /**
         * Storing list of available languages in Details elements
         */
        this._detailsLanguageOptions = signal(null);
        /**
         * Selected language to pass to child components
         */
        this._selectedLanguage = signal(null);
        /**
         * Current parent variant
         */
        this._variant = new BehaviorSubject('regular');
        /**
         * Last Description List Item Detail id passed to children
         */
        this._lastChildId = signal(null);
        this.id = _idService.getNewGroupId('description-list', this._parentDl.id);
        toObservable(_parentDl.getVariant())
            .pipe(takeUntilDestroyed())
            .subscribe((newVariant) => {
            if (newVariant === 'regular') {
                this._variant.next('regular');
                this._updateChildren();
            }
            else {
                this._variant.next('compact');
                this._updateChildren();
            }
        });
        /**
         * Listens to parent's changes and updates CSS classes.
         */
        effect(() => {
            const disabled = _parentDl.getDisabledGridStatus()();
            this._setClasses(disabled, this._variant.value);
        });
    }
    /**
     * Returns a last child id of selected language.
     */
    _findLastLanguageChildId(lang) {
        const data = this._detailsLanguageOptions();
        if (data && data[lang]) {
            const keys = Object.keys(data[lang]);
            return keys.length > 0 ? keys[keys.length - 1] : null;
        }
        return null;
    }
    /**
     * Returns a compact list last child id for Description List Item Detail component.
     */
    _updateChildren() {
        if (this._variant.value !== 'compact') {
            this._lastChildId.set(null);
            return;
        }
        const selectedLang = this._selectedLanguage();
        if (selectedLang) {
            const lang = selectedLang;
            const lastChildId = this._findLastLanguageChildId(lang);
            this._lastChildId.set(lastChildId);
        }
        else {
            this._detailChildrenIds = this._idService.getDlGrandChildrensIds('details', this._parentDl.id, this.id);
            const lastChildId = this._detailChildrenIds?.length
                ? this._detailChildrenIds[this._detailChildrenIds.length - 1]
                : null;
            this._lastChildId.set(lastChildId);
        }
    }
    /**
     * DL Item has combined styles for both regular and compact versions but some styles only apply to
     * regular version if parent's disableGrid is true.
     */
    _setClasses(disabledGrid, parentVariant) {
        if (disabledGrid && parentVariant !== 'compact') {
            this._mainCssClass.next('fudis-dl-item__disabled-grid');
        }
        else {
            this._mainCssClass.next('fudis-dl-item');
        }
    }
    /**
     * Called from child Details, if it has a language property
     */
    addDetailsLanguage(lang, text, id) {
        const currentContent = this._detailsLanguageOptions() || {};
        if (!currentContent[lang]) {
            currentContent[lang] = {};
        }
        currentContent[lang][id] = text;
        this._detailsLanguageOptions.set({ ...currentContent });
    }
    /**
     * Called from child Details, if its language property is removed (or updated)
     */
    removeDetailsLanguage(lang, id) {
        const currentContent = this._detailsLanguageOptions() || {};
        if (currentContent[lang]?.[id]) {
            delete currentContent[lang][id];
        }
        if (currentContent[lang] && Object.keys(currentContent[lang]).length === 0) {
            delete currentContent[lang];
        }
        if (Object.keys(currentContent).length !== 0) {
            this._detailsLanguageOptions.set({ ...currentContent });
        }
        else {
            this._detailsLanguageOptions.set(null);
        }
    }
    getDetailsLanguageOptions() {
        return this._detailsLanguageOptions.asReadonly();
    }
    setSelectedLanguage(lang) {
        this._selectedLanguage.set(lang);
        this._updateChildren();
    }
    getSelectedLanguage() {
        return this._selectedLanguage.asReadonly();
    }
    getLastChildId() {
        return this._lastChildId.asReadonly();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListItemComponent, deps: [{ token: i0.ElementRef }, { token: FudisIdService }, { token: DescriptionListComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DescriptionListItemComponent, isStandalone: false, selector: "fudis-dl-item", ngImport: i0, template: "<ng-container *ngIf=\"_parentDl.tag === 'p'\">\n  <ng-container *ngTemplateOutlet=\"singleItem\" />\n</ng-container>\n\n<ng-container *ngIf=\"_parentDl.tag === 'dl'\">\n  <ng-container *ngTemplateOutlet=\"multipleItems\" />\n</ng-container>\n\n<ng-template #multipleItems>\n  <div [id]=\"id\" [class]=\"_mainCssClass | async\" role=\"listitem\">\n    <ng-container *ngTemplateOutlet=\"dlItemContent\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #singleItem>\n  <p [id]=\"id\" [class]=\"_mainCssClass | async\">\n    <ng-container *ngTemplateOutlet=\"dlItemContent\"></ng-container>\n  </p>\n</ng-template>\n\n<ng-template #dlItemContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".fudis-dl-item{box-sizing:border-box;margin:0;padding:0;display:block;min-height:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item__disabled-grid{box-sizing:border-box;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start;break-inside:avoid-column;margin-bottom:calc(1.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dl-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"_parentDl.tag === 'p'\">\n  <ng-container *ngTemplateOutlet=\"singleItem\" />\n</ng-container>\n\n<ng-container *ngIf=\"_parentDl.tag === 'dl'\">\n  <ng-container *ngTemplateOutlet=\"multipleItems\" />\n</ng-container>\n\n<ng-template #multipleItems>\n  <div [id]=\"id\" [class]=\"_mainCssClass | async\" role=\"listitem\">\n    <ng-container *ngTemplateOutlet=\"dlItemContent\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #singleItem>\n  <p [id]=\"id\" [class]=\"_mainCssClass | async\">\n    <ng-container *ngTemplateOutlet=\"dlItemContent\"></ng-container>\n  </p>\n</ng-template>\n\n<ng-template #dlItemContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".fudis-dl-item{box-sizing:border-box;margin:0;padding:0;display:block;min-height:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item__disabled-grid{box-sizing:border-box;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start;break-inside:avoid-column;margin-bottom:calc(1.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FudisIdService }, { type: DescriptionListComponent, decorators: [{
                    type: Host
                }] }] });

class DescriptionListItemDetailsComponent {
    constructor(_elementRef, _idService, _parentDlItem, _parentDl) {
        this._elementRef = _elementRef;
        this._idService = _idService;
        this._parentDlItem = _parentDlItem;
        this._parentDl = _parentDl;
        /**
         * Binding host CSS class to component wrapper
         */
        this._hostClass = 'fudis-dl-item-details-host';
        /**
         * Selected language to show respective Details content
         */
        this._langSelected = new BehaviorSubject(false);
        /**
         * If current Detail element is a last child of it's parent
         */
        this._lastChild = new BehaviorSubject(false);
        /**
         * Main CSS class
         */
        this._mainCssClass = new BehaviorSubject('fudis-dl-item-details__regular');
        this._id = this._idService.getNewDlGrandChilId('details', this._parentDl.id, this._parentDlItem.id);
        toObservable(_parentDl.getVariant())
            .pipe(takeUntilDestroyed())
            .subscribe((newVariant) => {
            if (newVariant === 'regular') {
                this._mainCssClass.next('fudis-dl-item-details__regular');
            }
            else {
                this._mainCssClass.next('fudis-dl-item-details__compact');
            }
        });
        toObservable(_parentDlItem.getLastChildId())
            .pipe(takeUntilDestroyed())
            .subscribe((lastCompactId) => {
            if (this._mainCssClass.value !== 'fudis-dl-item-details__compact') {
                this._lastChild.next(false);
            }
            else {
                this._lastChild.next(lastCompactId !== this._id);
            }
        });
        toObservable(_parentDlItem.getSelectedLanguage())
            .pipe(takeUntilDestroyed())
            .subscribe((newLang) => {
            this._langSelected.next(!!(this.lang && newLang === this.lang));
        });
    }
    /**
     * Parse Details text content and set parent Description List Item languages
     */
    _sendDetailsLanguageToParent() {
        const parsedContentText = this.contentText && this.contentText.replace(/\s/g, '') !== '' ? this.contentText : null;
        if (parsedContentText && !this._detailsSent) {
            this._parentDlItem.addDetailsLanguage(this.lang, parsedContentText, this._id);
            this._detailsSent = true;
            this._hostClass = `fudis-dl-item-details-host fudis-dl-item-details-host--${this.lang}`;
        }
    }
    _removeDetailsFromParent() {
        if (this._detailsSent) {
            this._parentDlItem.removeDetailsLanguage(this.lang, this._id);
            this._detailsSent = false;
            this._hostClass = `fudis-dl-item-details-host`;
        }
    }
    ngOnChanges(changes) {
        // If language changes, update it to parent. If language changes to undefined, remove it from parent.
        if (!changes.lang?.firstChange && !!changes.lang?.currentValue) {
            this._removeDetailsFromParent();
            this._sendDetailsLanguageToParent();
        }
        else if (!changes.lang?.currentValue) {
            this._removeDetailsFromParent();
        }
        // If text content changes, update it to parent
        if (changes.contentText?.currentValue !== changes.contentText?.previousValue && this.lang) {
            this._sendDetailsLanguageToParent();
        }
    }
    ngOnDestroy() {
        this._removeDetailsFromParent();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListItemDetailsComponent, deps: [{ token: i0.ElementRef }, { token: FudisIdService }, { token: DescriptionListItemComponent, host: true }, { token: DescriptionListComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DescriptionListItemDetailsComponent, isStandalone: false, selector: "fudis-dd", inputs: { lang: "lang", contentText: "contentText", subHeading: "subHeading", ariaLabel: "ariaLabel" }, host: { properties: { "class": "this._hostClass" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!lang || (_langSelected | async)\">\n  <ng-container *ngIf=\"_parentDl.tag === 'p'\">\n    <span [id]=\"_id\" [attr.lang]=\"lang\" [class]=\"_mainCssClass | async\">\n      <ng-container *ngTemplateOutlet=\"ddContent\"></ng-container>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"_parentDl.tag === 'dl'\">\n    <dd [id]=\"_id\" [attr.lang]=\"lang\" [class]=\"_mainCssClass | async\">\n      <ng-container *ngTemplateOutlet=\"ddContent\"></ng-container>\n    </dd>\n  </ng-container>\n</ng-container>\n\n<ng-template #ddContent>\n  <span *ngIf=\"subHeading\" [class]=\"(_mainCssClass | async) + '__sub-heading'\">{{\n    subHeading\n  }}</span\n  ><span [class]=\"(_mainCssClass | async) + '__content'\" [attr.aria-label]=\"ariaLabel\">\n    <span *ngIf=\"subHeading\" [class]=\"(_mainCssClass | async) + '__parenthesis'\"> &#40;</span\n    ><span [attr.aria-hidden]=\"ariaLabel ? true : null\">{{ contentText }}</span\n    ><span *ngIf=\"subHeading\" [class]=\"(_mainCssClass | async) + '__parenthesis'\">&#41;</span\n    ><ng-content\n  /></span>\n  <span\n    *ngIf=\"contentText && (_lastChild | async)\"\n    [class]=\"(_mainCssClass | async) + '__comma'\"\n    aria-hidden=\"true\"\n    >&comma;</span\n  >\n</ng-template>\n", styles: [".fudis-dl-item-details__regular{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;color:#484848;display:flex;flex-direction:column;margin:0;min-height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-dl-item-details__regular__content{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;display:flex;flex-direction:column}.fudis-dl-item-details__regular__parenthesis{display:none}.fudis-dl-item-details__regular__sub-heading{color:#484848;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;margin-top:0;margin-bottom:calc(.25rem / var(--fudis-rem-multiplier));font-weight:400}.fudis-dl-item-details__compact{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;color:#484848;display:inline-block;margin-left:0;padding-left:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-dl-item-details__compact__content{display:inline}.fudis-dl-item-details__compact__parenthesis{display:initial}.fudis-dl-item-details__compact__sub-heading{box-sizing:border-box;margin:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListItemDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dd', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"!lang || (_langSelected | async)\">\n  <ng-container *ngIf=\"_parentDl.tag === 'p'\">\n    <span [id]=\"_id\" [attr.lang]=\"lang\" [class]=\"_mainCssClass | async\">\n      <ng-container *ngTemplateOutlet=\"ddContent\"></ng-container>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"_parentDl.tag === 'dl'\">\n    <dd [id]=\"_id\" [attr.lang]=\"lang\" [class]=\"_mainCssClass | async\">\n      <ng-container *ngTemplateOutlet=\"ddContent\"></ng-container>\n    </dd>\n  </ng-container>\n</ng-container>\n\n<ng-template #ddContent>\n  <span *ngIf=\"subHeading\" [class]=\"(_mainCssClass | async) + '__sub-heading'\">{{\n    subHeading\n  }}</span\n  ><span [class]=\"(_mainCssClass | async) + '__content'\" [attr.aria-label]=\"ariaLabel\">\n    <span *ngIf=\"subHeading\" [class]=\"(_mainCssClass | async) + '__parenthesis'\"> &#40;</span\n    ><span [attr.aria-hidden]=\"ariaLabel ? true : null\">{{ contentText }}</span\n    ><span *ngIf=\"subHeading\" [class]=\"(_mainCssClass | async) + '__parenthesis'\">&#41;</span\n    ><ng-content\n  /></span>\n  <span\n    *ngIf=\"contentText && (_lastChild | async)\"\n    [class]=\"(_mainCssClass | async) + '__comma'\"\n    aria-hidden=\"true\"\n    >&comma;</span\n  >\n</ng-template>\n", styles: [".fudis-dl-item-details__regular{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;color:#484848;display:flex;flex-direction:column;margin:0;min-height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-dl-item-details__regular__content{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;display:flex;flex-direction:column}.fudis-dl-item-details__regular__parenthesis{display:none}.fudis-dl-item-details__regular__sub-heading{color:#484848;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;margin-top:0;margin-bottom:calc(.25rem / var(--fudis-rem-multiplier));font-weight:400}.fudis-dl-item-details__compact{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;color:#484848;display:inline-block;margin-left:0;padding-left:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-dl-item-details__compact__content{display:inline}.fudis-dl-item-details__compact__parenthesis{display:initial}.fudis-dl-item-details__compact__sub-heading{box-sizing:border-box;margin:0;padding:0}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FudisIdService }, { type: DescriptionListItemComponent, decorators: [{
                    type: Host
                }] }, { type: DescriptionListComponent, decorators: [{
                    type: Host
                }] }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }], lang: [{
                type: Input
            }], contentText: [{
                type: Input
            }], subHeading: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }] } });

class LanguageBadgeComponent {
    constructor(_translationService, _idService) {
        this._translationService = _translationService;
        this._idService = _idService;
        /*
         * Language Badge variant
         */
        this.variant = 'standard';
        /**
         * Click handler outputting clicked language abbreviation
         */
        this.handleClick = new EventEmitter();
        /**
         * Label string of the badge
         */
        this._badgeLabel = new BehaviorSubject('');
        effect(() => {
            const translations = this._translationService.getTranslations()();
            this._selectedTranslation = translations.LANGUAGE_BADGE.ARIA_LABEL.SELECTED;
            this._missingTranslation = translations.LANGUAGE_BADGE.ARIA_LABEL.MISSING_TRANSLATION;
            this._labelTranslations = translations.LANGUAGE_BADGE.ARIA_LABEL;
            this._setLabel();
        });
    }
    ngOnInit() {
        this._id = this._idService.getNewChildId('language-badge-group', this.parentId);
    }
    ngOnChanges(changes) {
        if (changes.selected?.currentValue !== changes.selected?.previousValue ||
            changes.variant?.currentValue !== changes.variant?.previousValue ||
            changes.language?.currentValue !== changes.language?.previousValue) {
            if (this._labelTranslations && this._selectedTranslation && this._missingTranslation) {
                this._setLabel();
            }
        }
    }
    /**
     * Emit badge's language on click
     */
    _handleLanguageSelect() {
        this.handleClick.emit(this.language);
    }
    /**
     * Define correct label for Badge
     */
    _setLabel() {
        let newLabel;
        const keyValue = this.language.toUpperCase();
        const label = this._labelTranslations[keyValue];
        if (this.selected && this.variant !== 'missing') {
            newLabel = `${label} ${this._selectedTranslation}`;
        }
        else if (this.selected && this.variant === 'missing') {
            newLabel = `${label} ${this._missingTranslation} ${this._selectedTranslation}`;
        }
        else if (!this.selected && this.variant === 'missing') {
            newLabel = `${label} ${this._missingTranslation}`;
        }
        else {
            newLabel = label;
        }
        this._badgeLabel.next(newLabel);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LanguageBadgeComponent, deps: [{ token: FudisTranslationService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LanguageBadgeComponent, isStandalone: false, selector: "fudis-language-badge", inputs: { language: "language", parentId: "parentId", selected: "selected", variant: "variant", ariaLabel: "ariaLabel" }, outputs: { handleClick: "handleClick" }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"_badgeLabel | async as badgeLabel\"\n  type=\"button\"\n  class=\"fudis-language-badge\"\n  [attr.aria-label]=\"badgeLabel\"\n  [attr.id]=\"_id\"\n  (click)=\"_handleLanguageSelect()\"\n>\n  <span\n    [class.fudis-language-badge--selected]=\"selected\"\n    class=\"fudis-language-badge__content fudis-language-badge__{{ variant }}\"\n    >{{ language }}</span\n  >\n</button>\n", styles: [".fudis-language-badge{background-color:transparent;border:none;box-sizing:border-box;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;width:calc(2rem / var(--fudis-rem-multiplier));height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-language-badge:focus-within{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-language-badge__content{text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;background-color:#fff;border:1px solid #484848;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;min-width:calc(1.5rem / var(--fudis-rem-multiplier));min-height:calc(1.5rem / var(--fudis-rem-multiplier));text-align:center;letter-spacing:calc(.02rem / var(--fudis-rem-multiplier))}.fudis-language-badge__missing{border:1px dashed #484848}.fudis-language-badge--selected,.fudis-language-badge--selected:focus{outline:2px solid var(--fudis-color-primary);outline-offset:-2px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LanguageBadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-language-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  *ngIf=\"_badgeLabel | async as badgeLabel\"\n  type=\"button\"\n  class=\"fudis-language-badge\"\n  [attr.aria-label]=\"badgeLabel\"\n  [attr.id]=\"_id\"\n  (click)=\"_handleLanguageSelect()\"\n>\n  <span\n    [class.fudis-language-badge--selected]=\"selected\"\n    class=\"fudis-language-badge__content fudis-language-badge__{{ variant }}\"\n    >{{ language }}</span\n  >\n</button>\n", styles: [".fudis-language-badge{background-color:transparent;border:none;box-sizing:border-box;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;width:calc(2rem / var(--fudis-rem-multiplier));height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-language-badge:focus-within{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-language-badge__content{text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;background-color:#fff;border:1px solid #484848;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;min-width:calc(1.5rem / var(--fudis-rem-multiplier));min-height:calc(1.5rem / var(--fudis-rem-multiplier));text-align:center;letter-spacing:calc(.02rem / var(--fudis-rem-multiplier))}.fudis-language-badge__missing{border:1px dashed #484848}.fudis-language-badge--selected,.fudis-language-badge--selected:focus{outline:2px solid var(--fudis-color-primary);outline-offset:-2px}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: FudisIdService }], propDecorators: { language: [{
                type: Input,
                args: [{ required: true }]
            }], parentId: [{
                type: Input,
                args: [{ required: true }]
            }], selected: [{
                type: Input
            }], variant: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], handleClick: [{
                type: Output
            }] } });

class LanguageBadgeGroupComponent extends PopoverApiDirective {
    constructor(_translationService, _idService) {
        super();
        this._translationService = _translationService;
        this._idService = _idService;
        /**
         * Output Language abbreviation of clicked Badge
         */
        this.handleClick = new EventEmitter();
        /**
         * Translation for aria-label
         */
        this._groupAriaLabel = new BehaviorSubject('');
        /**
         * Internal variable for matching languages and label texts
         */
        this._languageLabels = new BehaviorSubject([]);
        this._selectedLanguage = null;
        this._id = _idService.getNewParentId('language-badge-group');
        effect(() => {
            this._groupAriaLabel.next(_translationService.getTranslations()().LANGUAGE_BADGE.ARIA_LABEL.TRANSLATIONS);
        });
        effect(() => {
            this._selectableAppLanguages = _translationService.getSelectableLanguages()();
            this._currentAppLang = _translationService.getLanguageSignal()();
            if (this.translatedLanguages) {
                this._setLanguageOptions(this.translatedLanguages);
                this._determineSelectedBadge(this.translatedLanguages);
            }
        });
    }
    /**
     * Set selected language and emits clicked language
     */
    _updateLanguage(value) {
        this._selectedLanguage = value;
        this.handleClick.emit(value);
    }
    /**
     * Creates an array to loop in template of wanted Language Badges
     */
    _setLanguageOptions(availableContent) {
        const tempLangLabels = [];
        this._selectableAppLanguages?.forEach((language) => {
            const variant = availableContent.includes(language) ? 'standard' : 'missing';
            const newItem = { key: language, variant };
            tempLangLabels.push(newItem);
        });
        this._languageLabels.next(tempLangLabels);
    }
    _determineSelectedBadge(translatedLanguages) {
        let determinedLanguage;
        if (translatedLanguages?.includes(this._currentAppLang) &&
            this._selectableAppLanguages.includes(this._currentAppLang)) {
            determinedLanguage = this._currentAppLang;
        }
        else {
            const firstAvailable = this._selectableAppLanguages.find((lang) => translatedLanguages.includes(lang));
            if (firstAvailable) {
                determinedLanguage = firstAvailable;
            }
            else {
                determinedLanguage = null;
            }
        }
        this._updateLanguage(determinedLanguage);
    }
    ngOnChanges(changes) {
        const currentTranslated = changes.translatedLanguages?.currentValue;
        if (currentTranslated && changes.translatedLanguages?.previousValue !== currentTranslated) {
            this._setLanguageOptions(currentTranslated);
        }
        if (changes.translatedLanguages?.isFirstChange() &&
            currentTranslated &&
            this._selectableAppLanguages &&
            this._currentAppLang) {
            this._determineSelectedBadge(currentTranslated);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LanguageBadgeGroupComponent, deps: [{ token: FudisTranslationService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LanguageBadgeGroupComponent, isStandalone: false, selector: "fudis-language-badge-group", inputs: { translatedLanguages: "translatedLanguages" }, outputs: { handleClick: "handleClick" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section\n  [attr.id]=\"_id\"\n  [attr.aria-label]=\"_groupAriaLabel | async\"\n  class=\"fudis-language-badge-group\"\n>\n  <ng-container *ngFor=\"let _language of _languageLabels | async; let index = index\">\n    <fudis-language-badge\n      [parentId]=\"_id\"\n      (handleClick)=\"_updateLanguage($event)\"\n      [selected]=\"_selectedLanguage === _language.key\"\n      [language]=\"_language.key\"\n      [variant]=\"_language.variant\"\n    />\n  </ng-container>\n</section>\n", styles: [".fudis-language-badge-group{display:inline-flex;align-items:center;margin-left:calc(.25rem / var(--fudis-rem-multiplier));height:calc(1.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: LanguageBadgeComponent, selector: "fudis-language-badge", inputs: ["language", "parentId", "selected", "variant", "ariaLabel"], outputs: ["handleClick"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LanguageBadgeGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-language-badge-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<section\n  [attr.id]=\"_id\"\n  [attr.aria-label]=\"_groupAriaLabel | async\"\n  class=\"fudis-language-badge-group\"\n>\n  <ng-container *ngFor=\"let _language of _languageLabels | async; let index = index\">\n    <fudis-language-badge\n      [parentId]=\"_id\"\n      (handleClick)=\"_updateLanguage($event)\"\n      [selected]=\"_selectedLanguage === _language.key\"\n      [language]=\"_language.key\"\n      [variant]=\"_language.variant\"\n    />\n  </ng-container>\n</section>\n", styles: [".fudis-language-badge-group{display:inline-flex;align-items:center;margin-left:calc(.25rem / var(--fudis-rem-multiplier));height:calc(1.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: FudisIdService }], propDecorators: { translatedLanguages: [{
                type: Input,
                args: [{ required: true }]
            }], handleClick: [{
                type: Output
            }] } });

class DescriptionListItemTermComponent extends PopoverApiDirective {
    constructor(_translationService, _idService, _parentDlItem, _parentDl) {
        super();
        this._translationService = _translationService;
        this._idService = _idService;
        this._parentDlItem = _parentDlItem;
        this._parentDl = _parentDl;
        /**
         * Renders Fudis Language Badge Group Component for displaying Description List Item Detail values
         * in given languages
         */
        this.languages = true;
        /**
         * Available translated languages of sibling dt elements fetched from the parent dl-item element
         */
        this._parentLanguageTranslations = signal([]);
        /**
         * Main CSS class
         */
        this._mainCssClass = new BehaviorSubject('fudis-dl-item-term__regular');
        this._id = this._idService.getNewDlGrandChilId('term', this._parentDl.id, this._parentDlItem.id);
        effect(() => {
            if (_parentDl.getVariant()() === 'regular') {
                this._mainCssClass.next('fudis-dl-item-term__regular');
            }
            else {
                this._mainCssClass.next('fudis-dl-item-term__compact');
            }
        });
        effect(() => {
            const parentLanguageOptions = _parentDlItem.getDetailsLanguageOptions()();
            if (parentLanguageOptions) {
                const translated = [];
                for (const [key, value] of Object.entries(parentLanguageOptions)) {
                    if (Object.keys(value).some((itemId) => value[itemId] !== null)) {
                        translated.push(key);
                    }
                }
                this._parentLanguageTranslations.set(translated);
            }
        });
    }
    /**
     * When Language Badge is clicked, update clicked language to parent item
     *
     * @param lang FudisLanguageAbbr
     */
    _setSelectedLanguage(lang) {
        if (this.languages) {
            this._parentDlItem.setSelectedLanguage(lang);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListItemTermComponent, deps: [{ token: FudisTranslationService }, { token: FudisIdService }, { token: DescriptionListItemComponent, host: true }, { token: DescriptionListComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DescriptionListItemTermComponent, isStandalone: false, selector: "fudis-dt", inputs: { languages: "languages", contentText: "contentText" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"_parentDl.tag === 'dl'\">\n  <ng-container *ngTemplateOutlet=\"multipleItems\" />\n</ng-container>\n\n<ng-container *ngIf=\"_parentDl.tag === 'p'\">\n  <ng-container *ngTemplateOutlet=\"singleItem\" />\n</ng-container>\n\n<ng-template #multipleItems>\n  <dt [id]=\"_id\" [class]=\"_mainCssClass | async\">\n    <ng-container *ngTemplateOutlet=\"commonContent\"></ng-container>\n  </dt>\n</ng-template>\n\n<ng-template #singleItem>\n  <span [id]=\"_id\" [class]=\"_mainCssClass | async\">\n    <ng-container *ngTemplateOutlet=\"commonContent\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #commonContent>\n  <span [class]=\"(_mainCssClass | async) + '__text-content'\">{{ contentText }}</span\n  ><span\n    *ngIf=\"_mainCssClass.value === 'fudis-dl-item-term__compact'\"\n    class=\"'fudis-dl-item-term__compact__colon'\"\n    >&colon;</span\n  >\n  <span *ngIf=\"popoverTriggerLabel && popoverText\" [class]=\"(_mainCssClass | async) + '__popover'\">\n    <fudis-button\n      [size]=\"'icon-only'\"\n      [variant]=\"'tertiary'\"\n      [icon]=\"'info-circle'\"\n      [labelHidden]=\"true\"\n      [label]=\"popoverTriggerLabel\"\n      [popoverText]=\"popoverText\"\n      [popoverPosition]=\"popoverPosition\"\n    />\n  </span>\n\n  <fudis-language-badge-group\n    *ngIf=\"languages && _parentLanguageTranslations().length > 0\"\n    [translatedLanguages]=\"_parentLanguageTranslations()\"\n    (handleClick)=\"_setSelectedLanguage($event)\"\n  />\n</ng-template>\n", styles: [".fudis-dl-item-term__regular{display:flex;align-items:flex-start;margin:calc(.25rem / var(--fudis-rem-multiplier)) 0;min-height:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item-term__regular__text-content{text-transform:uppercase;line-height:calc(1.5rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;color:#484848}.fudis-dl-item-term__regular__popover{display:inline-flex;align-items:center;margin-left:calc(.25rem / var(--fudis-rem-multiplier));height:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item-term__compact{display:inline-block;position:relative;padding-left:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item-term__compact:before{background-color:#727272;display:inline-block;position:absolute;top:2px;left:0;width:1px;height:80%;content:\"\"}.fudis-dl-item-term__compact__text-content{text-transform:none;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:300;color:#484848}.fudis-dl-item-term__compact__colon{font-weight:300}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "fudis-button", inputs: ["label", "variant", "size", "type", "labelHidden", "ariaLabel", "disabled", "icon", "iconRotate", "id", "asMenuButton"], outputs: ["handleClick", "handleFocus", "handleBlur", "handleDestroy"] }, { kind: "component", type: LanguageBadgeGroupComponent, selector: "fudis-language-badge-group", inputs: ["translatedLanguages"], outputs: ["handleClick"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DescriptionListItemTermComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dt', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"_parentDl.tag === 'dl'\">\n  <ng-container *ngTemplateOutlet=\"multipleItems\" />\n</ng-container>\n\n<ng-container *ngIf=\"_parentDl.tag === 'p'\">\n  <ng-container *ngTemplateOutlet=\"singleItem\" />\n</ng-container>\n\n<ng-template #multipleItems>\n  <dt [id]=\"_id\" [class]=\"_mainCssClass | async\">\n    <ng-container *ngTemplateOutlet=\"commonContent\"></ng-container>\n  </dt>\n</ng-template>\n\n<ng-template #singleItem>\n  <span [id]=\"_id\" [class]=\"_mainCssClass | async\">\n    <ng-container *ngTemplateOutlet=\"commonContent\"></ng-container>\n  </span>\n</ng-template>\n\n<ng-template #commonContent>\n  <span [class]=\"(_mainCssClass | async) + '__text-content'\">{{ contentText }}</span\n  ><span\n    *ngIf=\"_mainCssClass.value === 'fudis-dl-item-term__compact'\"\n    class=\"'fudis-dl-item-term__compact__colon'\"\n    >&colon;</span\n  >\n  <span *ngIf=\"popoverTriggerLabel && popoverText\" [class]=\"(_mainCssClass | async) + '__popover'\">\n    <fudis-button\n      [size]=\"'icon-only'\"\n      [variant]=\"'tertiary'\"\n      [icon]=\"'info-circle'\"\n      [labelHidden]=\"true\"\n      [label]=\"popoverTriggerLabel\"\n      [popoverText]=\"popoverText\"\n      [popoverPosition]=\"popoverPosition\"\n    />\n  </span>\n\n  <fudis-language-badge-group\n    *ngIf=\"languages && _parentLanguageTranslations().length > 0\"\n    [translatedLanguages]=\"_parentLanguageTranslations()\"\n    (handleClick)=\"_setSelectedLanguage($event)\"\n  />\n</ng-template>\n", styles: [".fudis-dl-item-term__regular{display:flex;align-items:flex-start;margin:calc(.25rem / var(--fudis-rem-multiplier)) 0;min-height:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item-term__regular__text-content{text-transform:uppercase;line-height:calc(1.5rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;color:#484848}.fudis-dl-item-term__regular__popover{display:inline-flex;align-items:center;margin-left:calc(.25rem / var(--fudis-rem-multiplier));height:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item-term__compact{display:inline-block;position:relative;padding-left:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-dl-item-term__compact:before{background-color:#727272;display:inline-block;position:absolute;top:2px;left:0;width:1px;height:80%;content:\"\"}.fudis-dl-item-term__compact__text-content{text-transform:none;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:300;color:#484848}.fudis-dl-item-term__compact__colon{font-weight:300}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: FudisIdService }, { type: DescriptionListItemComponent, decorators: [{
                    type: Host
                }] }, { type: DescriptionListComponent, decorators: [{
                    type: Host
                }] }], propDecorators: { languages: [{
                type: Input
            }], contentText: [{
                type: Input
            }] } });

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const throttle = (f, delay) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => f.apply(this, args), delay);
    };
};

/**
 * Here we check if the button element is disabled. If it is, close action is not triggered. In case
 * of a _elementRef, it takes the exact element that is attached to, so if it is a fudis-button, we
 * have to check the underlying button element with firstElementChild, that has the aria-disabled
 * attribute. If it is just a button, checking the passed element is enough.
 */
function isButtonDisabled(element) {
    return ((element?.ariaDisabled && element?.ariaDisabled === 'true') ||
        (element?.firstElementChild?.ariaDisabled &&
            element?.firstElementChild?.ariaDisabled === 'true'));
}

class DialogTitleDirective extends MatDialogTitle {
    constructor(
    // For MatDialogTitle
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    _dialogRef, _elementRef, _dialog, 
    // For Fudis DialogTitleDirective
    _headingElementRef, _renderer) {
        super(_dialogRef, _elementRef, _dialog);
        this._headingElementRef = _headingElementRef;
        this._renderer = _renderer;
    }
    ngOnInit() {
        this._renderer.setAttribute(this._headingElementRef.nativeElement, 'tabindex', '-1');
        this._headingElementRef.nativeElement.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogTitleDirective, deps: [{ token: i1.MatDialogRef }, { token: i0.ElementRef }, { token: i1.MatDialog }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DialogTitleDirective, isStandalone: false, selector: "[fudisDialogTitle]", providers: [
            {
                provide: MatDialogRef,
                useValue: {},
            },
        ], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisDialogTitle]',
                    providers: [
                        {
                            provide: MatDialogRef,
                            useValue: {},
                        },
                    ],
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: i0.ElementRef }, { type: i1.MatDialog }, { type: i0.ElementRef }, { type: i0.Renderer2 }] });
class DialogContentDirective extends MatDialogContent {
    constructor(_elRef, _renderer) {
        super();
        this._elRef = _elRef;
        this._renderer = _renderer;
        /**
         * Binding fudis-dialog-content CSS class to directive
         */
        this.hostClass = 'fudis-dialog-content';
        /**
         * Dialog contentFocus sets a visual focus to dialog content. Preferred to be used with read-only
         * content.
         */
        this.contentFocus = false;
    }
    ngOnChanges(changes) {
        const contentFocus = changes.contentFocus?.currentValue;
        if (contentFocus !== changes.contentFocus?.previousValue) {
            if (contentFocus) {
                this._renderer.setAttribute(this._elRef.nativeElement, 'tabindex', '0');
                this._renderer.setAttribute(this._elRef.nativeElement, 'role', 'document');
            }
            else {
                this._renderer.removeAttribute(this._elRef.nativeElement, 'tabindex');
                this._renderer.removeAttribute(this._elRef.nativeElement, 'role');
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogContentDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DialogContentDirective, isStandalone: false, selector: "fudis-dialog-content", inputs: { contentFocus: "contentFocus" }, host: { properties: { "class": "this.hostClass" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-dialog-content',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClass: [{
                type: HostBinding,
                args: ['class']
            }], contentFocus: [{
                type: Input
            }] } });
class DialogActionsDirective extends MatDialogActions {
    constructor() {
        super(...arguments);
        this.align = 'end';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogActionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DialogActionsDirective, isStandalone: false, selector: "fudis-dialog-actions", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogActionsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-dialog-actions',
                    standalone: false,
                }]
        }] });
class DialogCloseDirective extends MatDialogClose {
    constructor(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    _dialogRef, _elementRef, _dialog) {
        super(_dialogRef, _elementRef, _dialog);
        this._hostButtonElement = _elementRef?.nativeElement;
    }
    _onButtonClick() {
        if (!isButtonDisabled(this._hostButtonElement))
            this.dialogRef.close();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogCloseDirective, deps: [{ token: i1.MatDialogRef }, { token: i0.ElementRef }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DialogCloseDirective, isStandalone: false, selector: "[fudisDialogClose]", usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogCloseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisDialogClose]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: i0.ElementRef }, { type: i1.MatDialog }] });

class DialogComponent {
    constructor(_translateService, _dialogService, _idService, _elementRef) {
        this._translateService = _translateService;
        this._dialogService = _dialogService;
        this._idService = _idService;
        this._elementRef = _elementRef;
        /**
         * Dialog size
         */
        this.size = 'md';
        /**
         * Dialog's close button has to have absolute positioning when used inside fudis-form
         */
        this.closeButtonPositionAbsolute = signal(false);
        /**
         * Does Dialog have scrollable content
         */
        this._dialogScrollable = signal(null);
        this._id = _idService.getNewId('dialog');
        _dialogService.setDialogOpenStatus(true);
        this._resizeObserver = new ResizeObserver(throttle(() => {
            if (this._dialogScrollable() !== null) {
                this._isDialogScrollable();
            }
        }, 10));
        fromEvent(window, 'resize')
            .pipe(takeUntilDestroyed(), debounceTime(10))
            .subscribe(() => {
            if (this._dialogScrollable() !== null) {
                this._isDialogScrollable();
            }
        });
    }
    ngOnChanges(changes) {
        if (changes.size?.currentValue !== changes.size?.previousValue) {
            this._isDialogScrollable();
        }
    }
    ngOnInit() {
        this._orderNumber = this._dialogService.dialogsOpen().length;
    }
    ngAfterViewInit() {
        this._isDialogScrollable();
    }
    ngOnDestroy() {
        if (this._orderNumber === 1 || this._orderNumber === 0) {
            this._dialogService.setDialogOpenStatus(false);
        }
        this._resizeObserver.disconnect();
    }
    /**
     * From: https://phuoc.ng/collection/html-dom/check-if-an-element-is-scrollable/
     */
    _isDialogScrollable() {
        const dialogContentElement = this._elementRef?.nativeElement?.querySelector('.fudis-dialog-content');
        const dialogContentVisible = dialogContentElement?.clientHeight;
        const dialogContentScrollable = dialogContentElement?.scrollHeight;
        const formContent = this._elementRef?.nativeElement?.querySelector('.fudis-form-content')?.clientHeight;
        const formScrollableContent = this._elementRef?.nativeElement?.querySelector('.fudis-form__content-wrapper')?.clientHeight;
        // Compare the height to see if the element has scrollable content
        const hasScrollableContent = (formScrollableContent && formContent && formContent > formScrollableContent) ||
            (dialogContentScrollable &&
                dialogContentVisible &&
                dialogContentScrollable > dialogContentVisible);
        // It's not enough because the element's `overflow-y` style can be set as
        // * `hidden`
        // * `hidden !important`
        // In those cases, the scrollbar isn't shown
        const overflowYStyle = window.getComputedStyle(this._elementRef.nativeElement).overflowY;
        const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
        if (hasScrollableContent && !isOverflowHidden) {
            this._dialogScrollable.set(true);
        }
        else {
            this._dialogScrollable.set(false);
        }
    }
    _handleEscapePress() {
        if (this._dialogService.dialogsOpen().length === this._orderNumber) {
            this._dialogService.close();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogComponent, deps: [{ token: FudisTranslationService }, { token: FudisDialogService }, { token: FudisIdService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DialogComponent, isStandalone: false, selector: "fudis-dialog", inputs: { size: "size" }, host: { listeners: { "window:keyup.escape": "_handleEscapePress($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"fudis-dialog fudis-dialog__size__{{ size }}\"\n  [class.fudis-dialog--scrollable]=\"_dialogScrollable()\"\n  [attr.id]=\"_id\"\n>\n  <fudis-button\n    fudisDialogClose\n    class=\"fudis-dialog__close\"\n    [class.fudis-dialog__close__absolute]=\"closeButtonPositionAbsolute()\"\n    [attr.id]=\"_id + '-close'\"\n    [label]=\"_translateService.getTranslations()().DIALOG.CLOSE\"\n    [labelHidden]=\"true\"\n    [size]=\"'icon-only'\"\n    [icon]=\"'ring-close-fill'\"\n    [variant]=\"'tertiary'\"\n  >\n  </fudis-button>\n  <ng-content></ng-content>\n</div>\n<fudis-alert-group [insideDialog]=\"true\" />\n", styles: [".fudis-dialog{border:1px solid #484848;box-sizing:border-box;position:relative;padding:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));max-width:calc(100vw - 2rem / var(--fudis-rem-multiplier))}.fudis-dialog__close{float:right}.fudis-dialog__close__absolute{position:absolute;right:calc(1rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-dialog__close__absolute{right:calc(2.5rem / var(--fudis-rem-multiplier))}}.fudis-dialog__size__xs{width:calc(30rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__sm{width:calc(44rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__md{width:calc(55rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__lg{width:calc(70rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__xl{width:calc(90rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-dialog{padding:calc(1.5rem / var(--fudis-rem-multiplier)) calc(2.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-dialog{max-width:calc(100vw - 4rem / var(--fudis-rem-multiplier))}}\n"], dependencies: [{ kind: "component", type: AlertGroupComponent, selector: "fudis-alert-group", inputs: ["position", "insideDialog"] }, { kind: "component", type: ButtonComponent, selector: "fudis-button", inputs: ["label", "variant", "size", "type", "labelHidden", "ariaLabel", "disabled", "icon", "iconRotate", "id", "asMenuButton"], outputs: ["handleClick", "handleFocus", "handleBlur", "handleDestroy"] }, { kind: "directive", type: DialogCloseDirective, selector: "[fudisDialogClose]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  class=\"fudis-dialog fudis-dialog__size__{{ size }}\"\n  [class.fudis-dialog--scrollable]=\"_dialogScrollable()\"\n  [attr.id]=\"_id\"\n>\n  <fudis-button\n    fudisDialogClose\n    class=\"fudis-dialog__close\"\n    [class.fudis-dialog__close__absolute]=\"closeButtonPositionAbsolute()\"\n    [attr.id]=\"_id + '-close'\"\n    [label]=\"_translateService.getTranslations()().DIALOG.CLOSE\"\n    [labelHidden]=\"true\"\n    [size]=\"'icon-only'\"\n    [icon]=\"'ring-close-fill'\"\n    [variant]=\"'tertiary'\"\n  >\n  </fudis-button>\n  <ng-content></ng-content>\n</div>\n<fudis-alert-group [insideDialog]=\"true\" />\n", styles: [".fudis-dialog{border:1px solid #484848;box-sizing:border-box;position:relative;padding:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));max-width:calc(100vw - 2rem / var(--fudis-rem-multiplier))}.fudis-dialog__close{float:right}.fudis-dialog__close__absolute{position:absolute;right:calc(1rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-dialog__close__absolute{right:calc(2.5rem / var(--fudis-rem-multiplier))}}.fudis-dialog__size__xs{width:calc(30rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__sm{width:calc(44rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__md{width:calc(55rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__lg{width:calc(70rem / var(--fudis-rem-multiplier))}.fudis-dialog__size__xl{width:calc(90rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-dialog{padding:calc(1.5rem / var(--fudis-rem-multiplier)) calc(2.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-dialog{max-width:calc(100vw - 4rem / var(--fudis-rem-multiplier))}}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: FudisDialogService }, { type: FudisIdService }, { type: i0.ElementRef }], propDecorators: { size: [{
                type: Input
            }], _handleEscapePress: [{
                type: HostListener,
                args: ['window:keyup.escape', ['$event']]
            }] } });

class DropdownBaseDirective {
    constructor() {
        /**
         * Binding host CSS class to component wrapper
         */
        this.hostClass = 'fudis-dropdown-menu-host';
        /**
         * Output emitter for focus event
         */
        this.handleFocus = new EventEmitter();
        /**
         * Output emitter for blur event
         */
        this.handleBlur = new EventEmitter();
    }
    /**
     * When dropdown is focused, happens e. g. with Firefox
     */
    _dropdownFocus(event) {
        this.handleFocus.emit(event);
    }
    /**
     * When dropdown is blurred, happens e. g. with Firefox
     */
    _dropdownBlur(event) {
        this.handleBlur.emit(event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DropdownBaseDirective, isStandalone: false, selector: "[fudisDropdownBase]", outputs: { handleFocus: "handleFocus", handleBlur: "handleBlur" }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisDropdownBase]',
                    standalone: false,
                }]
        }], propDecorators: { dropdownElement: [{
                type: ViewChild,
                args: ['dropdownElement']
            }], hostClass: [{
                type: HostBinding,
                args: ['class']
            }], handleFocus: [{
                type: Output
            }], handleBlur: [{
                type: Output
            }] } });

class DropdownMenuComponent extends DropdownBaseDirective {
    constructor(_idService, _dropdownEventService, _document, _parentButton) {
        super();
        this._idService = _idService;
        this._dropdownEventService = _dropdownEventService;
        this._document = _document;
        this._parentButton = _parentButton;
        /**
         * Align Dropdown Menu opening position
         */
        this.align = 'center';
        /**
         * Dropdown Menu size
         */
        this.size = 'lg';
        /**
         * Determine dropdown max-width
         */
        this._maxWidth = 'initial';
        /**
         * Currently focused option
         */
        this._focusedOption = null;
        /**
         * Fire maxWidth calculation through Observable call from parent Button
         */
        this._subscription = this._dropdownEventService.triggerCalculation.subscribe(() => {
            this._getMaxWidth();
        });
    }
    /**
     * Add or remove currently focused option. Called from DropdownMenuItem.
     */
    setFocusedOption(id, type, event) {
        if (type === 'add') {
            this._focusedOption = id;
        }
        else if (event) {
            this._focusedOption = null;
            this._componentFocused(event).then((value) => {
                if (!value) {
                    this._parentButton.closeMenu(false);
                }
            });
        }
    }
    /**
     * Check if focus is inside the Dropdown Menu component
     *
     * @param event Focus event
     * @returns Boolean
     */
    _componentFocused(event) {
        return new Promise((resolve) => {
            let counter = 0;
            const nextTarget = event?.relatedTarget;
            const focusCheckInterval = setInterval(() => {
                const focused = !!this._dropdownMenuElement.nativeElement.contains(this._document.activeElement) ||
                    !!this._dropdownMenuElement.nativeElement.contains(nextTarget);
                // If focus has moved to another element inside Dropdown Menu
                if (focused) {
                    clearInterval(focusCheckInterval);
                    resolve(true);
                    // If focus target is null
                }
                else if (!nextTarget) {
                    clearInterval(focusCheckInterval);
                    resolve(false);
                    // Increase counter, and try again. This is needed usually with click events as between previous element blur and next element focus click event is "somewhere else"
                }
                else if (counter <= 100) {
                    counter = counter + 50;
                }
                else {
                    // Else resolve boolean check after two tries, if any relevant element is focused
                    clearInterval(focusCheckInterval);
                    resolve(!!this._focusedOption);
                }
            }, 50);
        });
    }
    closeDropdownMenu() {
        this._parentButton.closeMenu();
    }
    /**
     * Host Listener for dropdown's width, it needs to be wider than its Button parent
     */
    _getMaxWidth() {
        const fontSize = Number(window.getComputedStyle(this._document.body).getPropertyValue('font-size').replace('px', ''));
        const elementInViewWidth = this._dropdownMenuElement?.nativeElement?.getBoundingClientRect()?.width;
        // Left boundary edge of the element in the viewport
        const elementInViewX = this._dropdownMenuElement?.nativeElement?.getBoundingClientRect()?.x;
        if (elementInViewX && elementInViewWidth && elementInViewWidth !== 0 && this.align === 'left') {
            const viewWidthAndViewXInRem = `${(elementInViewWidth + elementInViewX) / fontSize}rem`;
            this._maxWidth = 'calc(' + viewWidthAndViewXInRem + '/ var(--fudis-rem-multiplier))';
        }
        else if (window?.visualViewport?.width && elementInViewX) {
            // elementInViewX + 1 is a hack for Firefox. In desktop mode (but in small screen) the dropdown menu's right border did not show.
            // TODO: This could be improved if better solution comes to mind.
            const viewportWidthAndViewXInRem = `${(window.visualViewport.width - (elementInViewX + 1)) / fontSize}rem`;
            this._maxWidth = 'calc(' + viewportWidthAndViewXInRem + '/ var(--fudis-rem-multiplier))';
        }
        else {
            this._maxWidth = 'initial';
        }
    }
    /**
     * Host Listener for keydown events, especially Arrow Down and Escape from Dropdown Menu
     */
    _handleDropdownMenuKeyDown(event) {
        if (this._parentButton.dropdownOpen.value) {
            if (event.key === 'ArrowDown') {
                event.preventDefault();
                const firstChildElement = this._dropdownMenuElement.nativeElement.children[0];
                // If focus is on the menu button, only then listen keydown and focus on the first child
                if (firstChildElement.closest('fudis-button')?.querySelector('.fudis-button') ===
                    document.activeElement) {
                    const firstChildButtonElement = firstChildElement.querySelector('button');
                    firstChildButtonElement?.focus();
                }
            }
            if (event.key === 'Escape') {
                event.preventDefault();
                event.stopPropagation();
                this._parentButton.closeMenu();
            }
        }
    }
    ngOnInit() {
        this.id = this._idService.getNewGrandParentId('dropdown-menu');
    }
    ngOnDestroy() {
        this._subscription.unsubscribe();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: FudisIdService }, { token: DropdownEventService }, { token: DOCUMENT }, { token: ButtonComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropdownMenuComponent, isStandalone: false, selector: "fudis-dropdown-menu", inputs: { align: "align", size: "size" }, host: { listeners: { "window:click": "_getMaxWidth($event)", "window:keydown": "_handleDropdownMenuKeyDown($event)" } }, viewQueries: [{ propertyName: "_dropdownMenuElement", first: true, predicate: ["dropdownMenuElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #dropdownMenuElement\n  class=\"fudis-dropdown-menu fudis-dropdown-menu__{{ align }} fudis-dropdown-menu__{{ size }}\"\n  [attr.id]=\"id\"\n  [attr.role]=\"'menu'\"\n  [attr.aria-expanded]=\"true\"\n  [style.max-width]=\"_maxWidth\"\n>\n  <ng-content select=\"fudis-dropdown-menu-item\"></ng-content>\n  <ng-content select=\"fudis-dropdown-menu-group\"></ng-content>\n</div>\n", styles: [".fudis-dropdown-menu{box-sizing:border-box;margin:0;padding:0;border:1px solid #484848;background-color:#fff;z-index:100;position:absolute}.fudis-dropdown-menu:focus-visible{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-dropdown-menu__right{left:0}.fudis-dropdown-menu__left{right:0}.fudis-dropdown-menu__center{right:initial;left:initial}.fudis-dropdown-menu__lg{width:calc(23rem / var(--fudis-rem-multiplier))}.fudis-dropdown-menu__md{width:calc(14rem / var(--fudis-rem-multiplier))}.fudis-dropdown-menu__sm{width:calc(10rem / var(--fudis-rem-multiplier))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dropdown-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  #dropdownMenuElement\n  class=\"fudis-dropdown-menu fudis-dropdown-menu__{{ align }} fudis-dropdown-menu__{{ size }}\"\n  [attr.id]=\"id\"\n  [attr.role]=\"'menu'\"\n  [attr.aria-expanded]=\"true\"\n  [style.max-width]=\"_maxWidth\"\n>\n  <ng-content select=\"fudis-dropdown-menu-item\"></ng-content>\n  <ng-content select=\"fudis-dropdown-menu-group\"></ng-content>\n</div>\n", styles: [".fudis-dropdown-menu{box-sizing:border-box;margin:0;padding:0;border:1px solid #484848;background-color:#fff;z-index:100;position:absolute}.fudis-dropdown-menu:focus-visible{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-dropdown-menu__right{left:0}.fudis-dropdown-menu__left{right:0}.fudis-dropdown-menu__center{right:initial;left:initial}.fudis-dropdown-menu__lg{width:calc(23rem / var(--fudis-rem-multiplier))}.fudis-dropdown-menu__md{width:calc(14rem / var(--fudis-rem-multiplier))}.fudis-dropdown-menu__sm{width:calc(10rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: DropdownEventService }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: ButtonComponent, decorators: [{
                    type: Host
                }] }], propDecorators: { _dropdownMenuElement: [{
                type: ViewChild,
                args: ['dropdownMenuElement']
            }], align: [{
                type: Input
            }], size: [{
                type: Input
            }], _getMaxWidth: [{
                type: HostListener,
                args: ['window:click', ['$event']]
            }], _handleDropdownMenuKeyDown: [{
                type: HostListener,
                args: ['window:keydown', ['$event']]
            }] } });

class DropdownItemBaseDirective {
    constructor(_document) {
        this._document = _document;
        /**
         * Option for closing or leaving dropdown open after clicking an item. Closes by default.
         */
        this.close = true;
        /**
         * Checked state for multiselect checkbox
         */
        this.checked = false;
        /**
         * Ouput for click event
         */
        this.handleClick = new EventEmitter();
        /**
         * Output for checked state in multiselect
         */
        this.handleChecked = new EventEmitter();
        /**
         * Output for blur event in select option
         */
        this.handleBlur = new EventEmitter();
    }
    /**
     * Trigger focus based on keyboard interaction. Used to focus on next / previous dropdown item
     * element
     */
    _baseHandleKeyDown(event, element, cssClassSelector) {
        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
            const focusElement = this._document.querySelector(':focus');
            const siblingElements = element.nativeElement
                .closest('.fudis-select-dropdown, .fudis-dropdown-menu')
                .querySelectorAll(cssClassSelector);
            const siblingElementsCount = siblingElements.length - 1;
            event.preventDefault();
            const focusIndex = Array.prototype.indexOf.call(siblingElements, focusElement);
            let elementToFocus = element.nativeElement;
            if (event.key === 'ArrowUp') {
                elementToFocus = siblingElements[focusIndex > 0 ? focusIndex - 1 : siblingElementsCount];
            }
            if (event.key === 'ArrowDown') {
                elementToFocus = siblingElements[focusIndex < siblingElementsCount ? focusIndex + 1 : 0];
            }
            elementToFocus.focus();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownItemBaseDirective, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DropdownItemBaseDirective, isStandalone: false, selector: "[fudisDropdownItemBase]", inputs: { close: "close", checked: "checked" }, outputs: { handleClick: "handleClick", handleChecked: "handleChecked", handleBlur: "handleBlur" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownItemBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisDropdownItemBase]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }], propDecorators: { close: [{
                type: Input
            }], checked: [{
                type: Input
            }], handleClick: [{
                type: Output
            }], handleChecked: [{
                type: Output
            }], handleBlur: [{
                type: Output
            }] } });

class DropdownMenuGroupComponent {
    constructor(_idService, _parentDropdownMenu) {
        this._idService = _idService;
        this._parentDropdownMenu = _parentDropdownMenu;
        if (_parentDropdownMenu) {
            this.id = this._idService.getNewGroupId('dropdown-menu', this._parentDropdownMenu.id);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuGroupComponent, deps: [{ token: FudisIdService }, { token: DropdownMenuComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropdownMenuGroupComponent, isStandalone: false, selector: "fudis-dropdown-menu-group", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"fudis-dropdown-menu-group\" [attr.aria-labelledby]=\"id\" role=\"group\">\n  <span class=\"fudis-dropdown-menu-group__label\" [attr.aria-hidden]=\"true\" [attr.id]=\"id\">{{\n    label\n  }}</span>\n  <ng-content></ng-content>\n</div>\n", styles: [".fudis-dropdown-menu-group__label{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:300;color:#727272;box-sizing:border-box;display:flex;align-items:center;border-top:1px solid #d4d4d4;padding-left:calc(.5rem / var(--fudis-rem-multiplier));min-height:calc(2rem / var(--fudis-rem-multiplier))}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dropdown-menu-group', standalone: false, template: "<div class=\"fudis-dropdown-menu-group\" [attr.aria-labelledby]=\"id\" role=\"group\">\n  <span class=\"fudis-dropdown-menu-group__label\" [attr.aria-hidden]=\"true\" [attr.id]=\"id\">{{\n    label\n  }}</span>\n  <ng-content></ng-content>\n</div>\n", styles: [".fudis-dropdown-menu-group__label{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:300;color:#727272;box-sizing:border-box;display:flex;align-items:center;border-top:1px solid #d4d4d4;padding-left:calc(.5rem / var(--fudis-rem-multiplier));min-height:calc(2rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: DropdownMenuComponent, decorators: [{
                    type: Host
                }] }], propDecorators: { label: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class DropdownMenuItemComponent extends DropdownItemBaseDirective {
    constructor(_idService, _translationService, _document, _parentDropdownMenu, _parentGroup) {
        super(_document);
        this._idService = _idService;
        this._translationService = _translationService;
        this._parentDropdownMenu = _parentDropdownMenu;
        this._parentGroup = _parentGroup;
        /**
         * If Menu Item is disabled
         */
        this.disabled = false;
        /**
         * Internal translated text for disabled dropdown menu item
         */
        this._translationItemDisabledText = new BehaviorSubject('');
        this._id = this._idService.getNewDropdownMenuId(this._parentDropdownMenu.id, this._parentGroup?.id);
        effect(() => {
            const translations = _translationService.getTranslations()();
            this._translationItemDisabledText.next(translations.DROPDOWNMENU.ITEM.DISABLED);
        });
    }
    /**
     * Handle key down event
     */
    _handleKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            if (this.disabled) {
                event.preventDefault();
                return;
            }
            else {
                event.preventDefault();
                this._clickOption(event);
            }
        }
        else if (event.key !== ' ') {
            this._baseHandleKeyDown(event, this.dropdownItem, '.fudis-dropdown-menu-item__focusable');
        }
    }
    /**
     * Handle blur event
     */
    _handleMenuItemBlur(event) {
        this._parentDropdownMenu.setFocusedOption(this._id, 'remove', event);
    }
    /**
     * Handle focus
     */
    _handleMenuItemFocus() {
        this._parentDropdownMenu.setFocusedOption(this._id, 'add');
    }
    /**
     * Click handler for Dropdown Menu Item click
     */
    _clickOption(event) {
        if (!this.disabled) {
            this.handleClick.emit(event);
            this._parentDropdownMenu.closeDropdownMenu();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuItemComponent, deps: [{ token: FudisIdService }, { token: FudisTranslationService }, { token: DOCUMENT }, { token: DropdownMenuComponent, host: true }, { token: DropdownMenuGroupComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DropdownMenuItemComponent, isStandalone: false, selector: "fudis-dropdown-menu-item", inputs: { label: "label", disabled: "disabled" }, viewQueries: [{ propertyName: "dropdownItem", first: true, predicate: ["dropdownItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button\n  #dropdownItem\n  class=\"fudis-dropdown-menu-item\"\n  [class.fudis-dropdown-menu-item--disabled]=\"disabled || null\"\n  [class.fudis-dropdown-menu-item__focusable]=\"!disabled\"\n  [attr.id]=\"_id\"\n  [attr.role]=\"'menuitem'\"\n  [attr.aria-disabled]=\"disabled || null\"\n  (keydown)=\"_handleKeyDown($event)\"\n  (blur)=\"_handleMenuItemBlur($event)\"\n  (focus)=\"_handleMenuItemFocus()\"\n  (click)=\"_clickOption($event)\"\n  tabindex=\"-1\"\n>\n  {{ label }}\n  <span\n    *ngIf=\"disabled || null\"\n    class=\"fudis-dropdown-menu-item__label fudis-dropdown-menu-item__label__disabled-text\"\n  >\n    ({{ _translationItemDisabledText | async }})</span\n  >\n</button>\n", styles: [".fudis-dropdown-menu-item{box-sizing:border-box;margin:0;padding:0;text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:300;background-color:transparent;border:none;display:flex;position:relative;align-items:flex-start;justify-content:space-between;cursor:pointer;padding:calc(.5rem / var(--fudis-rem-multiplier));width:100%;overflow:hidden;text-align:left}.fudis-dropdown-menu-item:hover{background-color:var(--fudis-color-primary-light)}.fudis-dropdown-menu-item:focus-visible,.fudis-dropdown-menu-item:focus{outline:2px dashed #484848;outline-offset:-2px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-dropdown-menu-item:active:not(.fudis-dropdown-menu-item--disabled){background-color:var(--fudis-color-primary);color:#fff}.fudis-dropdown-menu-item--disabled{background-color:#f1f1f1;color:#727272;cursor:default}.fudis-dropdown-menu-item__label{line-height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-dropdown-menu-item__label__disabled-text{padding-right:calc(.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-dropdown-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n  #dropdownItem\n  class=\"fudis-dropdown-menu-item\"\n  [class.fudis-dropdown-menu-item--disabled]=\"disabled || null\"\n  [class.fudis-dropdown-menu-item__focusable]=\"!disabled\"\n  [attr.id]=\"_id\"\n  [attr.role]=\"'menuitem'\"\n  [attr.aria-disabled]=\"disabled || null\"\n  (keydown)=\"_handleKeyDown($event)\"\n  (blur)=\"_handleMenuItemBlur($event)\"\n  (focus)=\"_handleMenuItemFocus()\"\n  (click)=\"_clickOption($event)\"\n  tabindex=\"-1\"\n>\n  {{ label }}\n  <span\n    *ngIf=\"disabled || null\"\n    class=\"fudis-dropdown-menu-item__label fudis-dropdown-menu-item__label__disabled-text\"\n  >\n    ({{ _translationItemDisabledText | async }})</span\n  >\n</button>\n", styles: [".fudis-dropdown-menu-item{box-sizing:border-box;margin:0;padding:0;text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:300;background-color:transparent;border:none;display:flex;position:relative;align-items:flex-start;justify-content:space-between;cursor:pointer;padding:calc(.5rem / var(--fudis-rem-multiplier));width:100%;overflow:hidden;text-align:left}.fudis-dropdown-menu-item:hover{background-color:var(--fudis-color-primary-light)}.fudis-dropdown-menu-item:focus-visible,.fudis-dropdown-menu-item:focus{outline:2px dashed #484848;outline-offset:-2px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-dropdown-menu-item:active:not(.fudis-dropdown-menu-item--disabled){background-color:var(--fudis-color-primary);color:#fff}.fudis-dropdown-menu-item--disabled{background-color:#f1f1f1;color:#727272;cursor:default}.fudis-dropdown-menu-item__label{line-height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-dropdown-menu-item__label__disabled-text{padding-right:calc(.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: FudisTranslationService }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: DropdownMenuComponent, decorators: [{
                    type: Host
                }] }, { type: DropdownMenuGroupComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }], propDecorators: { dropdownItem: [{
                type: ViewChild,
                args: ['dropdownItem']
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], disabled: [{
                type: Input
            }] } });

class LinkDirective {
    constructor(_document, _bindedElement, _focusService, _idService, _translationService) {
        this._document = _document;
        this._bindedElement = _bindedElement;
        this._focusService = _focusService;
        this._idService = _idService;
        this._translationService = _translationService;
        /**
         * Link default size is 'md' (14px) which is the default size of <fudis-body-text> component. If
         * link is used inside of Body Text it will always inherit its parent's font-size.
         */
        this.size = 'md';
        /**
         * Set browser focus to link on the first load.
         */
        this.initialFocus = false;
        /**
         * If link opens in a new tab
         */
        this.external = false;
        /**
         * Helper class for link size
         */
        this._sizeCssClass = `fudis-link__size__md`;
        /**
         * Container ref to attach Icon Component
         */
        this._viewContainerRef = inject(ViewContainerRef);
        /**
         * Helper array for parsing long link texts with new-tab icon
         */
        this._parsedTitle = [];
        /**
         * Aria-label for the external link
         */
        this._externalLinkAriaLabel = new BehaviorSubject(this._translationService.getTranslations()().LINK.EXTERNAL_LINK);
        effect(() => {
            this._externalLinkAriaLabel.next(this._translationService.getTranslations()().LINK.EXTERNAL_LINK);
        });
    }
    ngAfterViewInit() {
        if (this.initialFocus && !this._focusService.isIgnored(this.id)) {
            this._bindedElement.nativeElement.focus();
        }
    }
    ngOnInit() {
        if (this.id) {
            this._idService.addNewId('link', this.id);
        }
        else {
            this.id = this._idService.getNewId('link');
        }
        this._setSizeClass();
        this._bindedElement.nativeElement.classList.add('fudis-link');
        this._bindedElement.nativeElement.setAttribute('id', this.id);
    }
    ngOnChanges(changes) {
        if (changes.size?.previousValue !== changes.size?.currentValue) {
            this._setSizeClass();
        }
        const titleChanged = changes.title?.currentValue !== changes.title?.previousValue;
        const externalChanged = changes.external?.currentValue !== changes.external?.previousValue;
        if (titleChanged || (externalChanged && changes.title?.currentValue)) {
            this._setHtmlAttributes();
            if (titleChanged) {
                this._parseTitle();
                if (!changes.title?.isFirstChange() && this.external) {
                    this._updateTitleHtml();
                }
            }
            this._setExternalHtml();
        }
    }
    _updateTitleHtml() {
        // Remove texts from parent
        this._bindedElement.nativeElement.childNodes.forEach((node) => node.nodeType === Node.TEXT_NODE && node.remove());
        const iconWrapper = this._bindedElement.nativeElement.querySelector('.fudis-link__external__icon-wrapper');
        if (iconWrapper) {
            // Remove texts from icon wrapper
            iconWrapper.childNodes.forEach((node) => node.nodeType === Node.TEXT_NODE && node.remove());
            if (this._parsedTitle.length === 1) {
                const text = this._document.createTextNode(this._parsedTitle[0]);
                iconWrapper.prepend(text);
            }
            else {
                const textStart = this._document.createTextNode(`${this._parsedTitle[0]} `);
                const textEnd = this._document.createTextNode(this._parsedTitle[1]);
                this._bindedElement.nativeElement.prepend(textStart);
                iconWrapper.prepend(textEnd);
            }
        }
    }
    /**
     * Set size CSS class
     */
    _setSizeClass() {
        const currentSize = this._sizeCssClass;
        this._bindedElement.nativeElement.classList.remove(currentSize);
        this._sizeCssClass = `fudis-link__size__${this.size}`;
        this._bindedElement.nativeElement.classList.add(this._sizeCssClass);
    }
    /**
     * Add to remove relevant HTML attributes from binded element.
     */
    _setHtmlAttributes() {
        if (this.external) {
            this._bindedElement.nativeElement.setAttribute('target', '_blank');
            this._bindedElement.nativeElement.setAttribute('rel', 'noopener noreferrer');
            this._bindedElement.nativeElement.setAttribute('aria-label', `${this.title}, ${this._externalLinkAriaLabel.value}`);
        }
        else {
            this._bindedElement.nativeElement.removeAttribute('target');
            this._bindedElement.nativeElement.removeAttribute('rel');
            this._bindedElement.nativeElement.setAttribute('aria-label', this.title);
            const titleNode = this._document.createTextNode(this.title);
            this._bindedElement.nativeElement.replaceChildren(titleNode);
        }
    }
    _setExternalHtml() {
        if (this.external) {
            // Create HTML semantics
            const html = String.raw;
            if (this._parsedTitle.length === 1) {
                this._bindedElement.nativeElement.innerHTML = html `<span
          class="fudis-link__external__icon-wrapper"
          >${this._parsedTitle[0]}<span class="fudis-link__external__icon"></span>
        </span>`;
            }
            else {
                this._bindedElement.nativeElement.innerHTML = html `${this._parsedTitle[0]}
          <span class="fudis-link__external__icon-wrapper"
            >${this._parsedTitle[1]}<span class="fudis-link__external__icon"></span>
          </span>`;
            }
            // Create Icon Component and define properties
            this._iconComponentRef = this._viewContainerRef.createComponent(IconComponent);
            this._iconComponentRef.setInput('icon', 'new-tab');
            this._iconComponentRef.setInput('color', 'primary-dark');
            // Append Icon Component to right place in the HTML when DOM is updated
            const component = this._iconComponentRef.instance.elementRef.nativeElement;
            const observer = new MutationObserver(() => {
                const iconLocation = this._bindedElement.nativeElement.querySelector('.fudis-link__external__icon');
                if (iconLocation) {
                    iconLocation.append(component);
                    observer.disconnect();
                }
            });
            observer.observe(this._document, {
                attributes: false,
                childList: true,
                characterData: false,
                subtree: true,
            });
        }
        else {
            // If not External, detach Icon Component instance
            this._viewContainerRef.detach();
        }
    }
    /**
     * Used with external links to split the last word of the title to be paired with the Icon, so
     * that on line break, the icon sticks with the last word of the title.
     */
    _parseTitle() {
        const toArray = this.title.split(' ').filter((n) => n);
        if (toArray.length > 1) {
            const lastWord = toArray[toArray.length - 1];
            const titleStart = toArray.slice(0, -1).join(' ');
            this._parsedTitle = [titleStart, lastWord];
        }
        else {
            this._parsedTitle = [toArray[0]];
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LinkDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: FudisFocusService }, { token: FudisIdService }, { token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: LinkDirective, isStandalone: false, selector: "[fudisLink]", inputs: { size: "size", initialFocus: "initialFocus", id: "id", external: "external", title: "title" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LinkDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisLink]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.ElementRef }, { type: FudisFocusService }, { type: FudisIdService }, { type: FudisTranslationService }], propDecorators: { size: [{
                type: Input
            }], initialFocus: [{
                type: Input
            }], id: [{
                type: Input
            }], external: [{
                type: Input
            }], title: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class NotificationComponent {
    constructor(_translateService) {
        this._translateService = _translateService;
        /**
         * Notification variant
         */
        this.variant = 'warning';
    }
    focus() {
        if (this.articleElement?.nativeElement) {
            this.articleElement.nativeElement.focus();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotificationComponent, deps: [{ token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NotificationComponent, isStandalone: false, selector: "fudis-notification", inputs: { variant: "variant", ariaDescribedby: "ariaDescribedby" }, viewQueries: [{ propertyName: "articleElement", first: true, predicate: ["articleElement"], descendants: true }], ngImport: i0, template: "<article\n  #articleElement\n  tabindex=\"-1\"\n  [attr.aria-describedby]=\"ariaDescribedby\"\n  class=\"fudis-notification fudis-notification__{{ variant }}\"\n>\n  <fudis-body-text class=\"fudis-visually-hidden\">{{\n    _translateService.getTranslations()().ATTENTION\n  }}</fudis-body-text>\n  <fudis-icon *ngIf=\"variant === 'warning'\" [icon]=\"'exclamation-mark-circle'\" />\n  <fudis-icon *ngIf=\"variant === 'danger'\" [icon]=\"'alert'\" />\n  <fudis-icon *ngIf=\"variant === 'success'\" [icon]=\"'checkmark-circle'\" />\n  <fudis-icon *ngIf=\"variant === 'info'\" [icon]=\"'info-circle'\" />\n  <div class=\"fudis-notification__content\">\n    <ng-content />\n  </div>\n</article>\n", styles: [".fudis-notification:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BodyTextComponent, selector: "fudis-body-text", inputs: ["variant", "align", "lang"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotificationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-notification', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<article\n  #articleElement\n  tabindex=\"-1\"\n  [attr.aria-describedby]=\"ariaDescribedby\"\n  class=\"fudis-notification fudis-notification__{{ variant }}\"\n>\n  <fudis-body-text class=\"fudis-visually-hidden\">{{\n    _translateService.getTranslations()().ATTENTION\n  }}</fudis-body-text>\n  <fudis-icon *ngIf=\"variant === 'warning'\" [icon]=\"'exclamation-mark-circle'\" />\n  <fudis-icon *ngIf=\"variant === 'danger'\" [icon]=\"'alert'\" />\n  <fudis-icon *ngIf=\"variant === 'success'\" [icon]=\"'checkmark-circle'\" />\n  <fudis-icon *ngIf=\"variant === 'info'\" [icon]=\"'info-circle'\" />\n  <div class=\"fudis-notification__content\">\n    <ng-content />\n  </div>\n</article>\n", styles: [".fudis-notification:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }], propDecorators: { articleElement: [{
                type: ViewChild,
                args: ['articleElement']
            }], variant: [{
                type: Input
            }], ariaDescribedby: [{
                type: Input
            }] } });

class ErrorSummaryComponent {
    constructor(_errorSummaryService, _translationService) {
        this._errorSummaryService = _errorSummaryService;
        this._translationService = _translationService;
        this.handleUpdatedErrorList = new EventEmitter();
        /**
         * Visible errors
         */
        this._visibleErrorList = signal([]);
        /**
         * Focus counter to hit the correct focus field
         */
        this._numberOfFocusTries = 0;
        this._injector = inject(Injector);
    }
    /**
     * To enable clicking Error Summary links and then moving focus to corresponding form field. This
     * was needed, as not all Fudis applications use Angular Router, so alternative approach was
     * needed.
     *
     * @param event Original click event
     * @param clickedId Id of clicked link in Error Summary
     */
    handleErrorClick(event, clickedId) {
        event.preventDefault();
        const elementToFocus = this.parentComponent.querySelector(`#${clickedId}`);
        if (elementToFocus) {
            elementToFocus.focus();
        }
    }
    /**
     * Sort errors the same order they appear in the DOM
     */
    _sortErrorOrder(a, b) {
        if (a.id === b.id) {
            return 0;
        }
        if (a.element && b.element) {
            const position = a.element.compareDocumentPosition(b.element);
            if (position & Node.DOCUMENT_POSITION_FOLLOWING ||
                position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
                return -1;
            }
            else if (position & Node.DOCUMENT_POSITION_PRECEDING ||
                position & Node.DOCUMENT_POSITION_CONTAINS) {
                return 1;
            }
        }
        return 0;
    }
    /**
     * Update Error Summary content with possible parent Fieldsets, Sections and Expandables
     * (Sections)
     */
    _updateSummaryContent(content) {
        const newErrorList = [];
        const fieldsets = this._errorSummaryService.formStructure[this.formId].fieldsets;
        const sections = this._errorSummaryService.formStructure[this.formId].sections;
        Object.keys(content).forEach((errorId) => {
            Object.values(content[errorId]).forEach((error) => {
                const parentFieldset = Object.keys(fieldsets).find((fieldset) => {
                    if (this.parentComponent?.querySelector(`#${fieldset} #${errorId}`)) {
                        return fieldset;
                    }
                    return null;
                });
                const parentSection = Object.keys(sections).find((section) => {
                    if (this.parentComponent?.querySelector(`#${section} #${errorId}`)) {
                        return section;
                    }
                    return null;
                });
                const parentSectionString = parentSection ? `${sections[parentSection]} / ` : '';
                const parentFieldsetString = parentFieldset ? `${fieldsets[parentFieldset]} / ` : '';
                const cleanedError = error.replace(/[:!?]$/, '');
                const newItem = {
                    id: errorId,
                    message: `${parentSectionString}${parentFieldsetString}${cleanedError}`,
                    element: this.parentComponent.querySelector(`#${errorId}`),
                };
                newErrorList.push(newItem);
            });
        });
        const sortedList = newErrorList.sort(this._sortErrorOrder);
        this._visibleErrorList.set(sortedList);
        if (sortedList.length > 0) {
            const newOutputList = [];
            sortedList.forEach((item) => {
                newOutputList.push({ id: item.id, message: item.message });
            });
            this.handleUpdatedErrorList.emit(newOutputList);
        }
        else {
            this.handleUpdatedErrorList.emit(null);
        }
        if (this._errorSummaryService.focusToFormOnReload === this.formId) {
            this._focusToErrorSummary();
        }
    }
    /**
     * Move focus to Error Summary if errors are visible
     */
    _focusToErrorSummary() {
        if (this._focusTarget?.articleElement && this._visibleErrorList().length > 0) {
            this._numberOfFocusTries = 0;
            this._focusTarget.focus();
        }
        else if (this._numberOfFocusTries < 20) {
            setTimeout(() => {
                this._numberOfFocusTries += 1;
                this._focusToErrorSummary();
            }, 100);
        }
    }
    ngOnInit() {
        /**
         * Fetch and update current visible errors when reloadErrors() is called
         */
        toObservable(this._errorSummaryService.errorsSignal[this.formId], {
            injector: this._injector,
        }).subscribe((value) => {
            this._updateSummaryContent(value);
        });
    }
    ngAfterViewInit() {
        this._focusToErrorSummary();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorSummaryComponent, deps: [{ token: FudisInternalErrorSummaryService }, { token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ErrorSummaryComponent, isStandalone: false, selector: "fudis-error-summary", inputs: { parentComponent: "parentComponent", title: "title", formId: "formId" }, outputs: { handleUpdatedErrorList: "handleUpdatedErrorList" }, viewQueries: [{ propertyName: "_focusTarget", first: true, predicate: ["focusTarget"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"_visibleErrorList() as errors\">\n  <fudis-notification\n    *ngIf=\"errors.length > 0\"\n    class=\"fudis-error-summary\"\n    [variant]=\"'danger'\"\n    [ariaDescribedby]=\"'fudis-error-summary-title-id'\"\n    #focusTarget\n  >\n    <h2 id=\"fudis-error-summary-title-id\" class=\"fudis-error-summary__title\" aria-hidden=\"true\">{{\n      title || _translationService.getTranslations()().ERROR_SUMMARY.TITLE\n    }}</h2>\n    <ul class=\"fudis-error-summary__error-list\">\n      <li class=\"fudis-error-summary__error-list__item\" *ngFor=\"let error of errors\">\n        <a\n          fudisLink\n          href=\"\"\n          [size]=\"'md'\"\n          (click)=\"handleErrorClick($event, error.id)\"\n          [title]=\"error.message\"\n        ></a>\n      </li>\n    </ul>\n  </fudis-notification>\n</ng-container>\n", styles: [".fudis-error-summary{margin-bottom:calc(1rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LinkDirective, selector: "[fudisLink]", inputs: ["size", "initialFocus", "id", "external", "title"] }, { kind: "component", type: NotificationComponent, selector: "fudis-notification", inputs: ["variant", "ariaDescribedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorSummaryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-error-summary', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"_visibleErrorList() as errors\">\n  <fudis-notification\n    *ngIf=\"errors.length > 0\"\n    class=\"fudis-error-summary\"\n    [variant]=\"'danger'\"\n    [ariaDescribedby]=\"'fudis-error-summary-title-id'\"\n    #focusTarget\n  >\n    <h2 id=\"fudis-error-summary-title-id\" class=\"fudis-error-summary__title\" aria-hidden=\"true\">{{\n      title || _translationService.getTranslations()().ERROR_SUMMARY.TITLE\n    }}</h2>\n    <ul class=\"fudis-error-summary__error-list\">\n      <li class=\"fudis-error-summary__error-list__item\" *ngFor=\"let error of errors\">\n        <a\n          fudisLink\n          href=\"\"\n          [size]=\"'md'\"\n          (click)=\"handleErrorClick($event, error.id)\"\n          [title]=\"error.message\"\n        ></a>\n      </li>\n    </ul>\n  </fudis-notification>\n</ng-container>\n", styles: [".fudis-error-summary{margin-bottom:calc(1rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisInternalErrorSummaryService }, { type: FudisTranslationService }], propDecorators: { _focusTarget: [{
                type: ViewChild,
                args: ['focusTarget']
            }], parentComponent: [{
                type: Input,
                args: [{ required: true }]
            }], title: [{
                type: Input
            }], formId: [{
                type: Input,
                args: [{ required: true }]
            }], handleUpdatedErrorList: [{
                type: Output
            }] } });

class ExpandableActionsDirective {
    constructor() {
        this._hostClass = 'fudis-expandable-actions';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExpandableActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ExpandableActionsDirective, isStandalone: false, selector: "fudis-expandable-actions", host: { properties: { "class": "this._hostClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExpandableActionsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-expandable-actions',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });
class ExpandableContentDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExpandableContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ExpandableContentDirective, isStandalone: false, selector: "[fudisExpandableContent]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExpandableContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisExpandableContent]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

class ExpandableComponent {
    constructor(_element, _idService, _errorSummaryService) {
        this._element = _element;
        this._idService = _idService;
        this._errorSummaryService = _errorSummaryService;
        /**
         * Visual variant of the expandable
         */
        this.variant = 'regular';
        /**
         * Expandable content padding depth
         */
        this.padding = 'default';
        /**
         * Display Expandable title in the breadcrumb of Error Summary
         */
        this.errorSummaryBreadcrumb = false;
        // TODO: write test
        /**
         * If Expandable is used inside Form component, by default it will open itself when ReloadErrors
         * is called in Error Summary Service. To disable this behavior, set this to false.
         */
        this.openOnErrorSummaryReload = true;
        /**
         * Optional output function when the closed status changes
         */
        this.closedChange = new EventEmitter();
        /**
         * Internal boolean of whether the expandable is currently closed
         */
        this._closed = true;
        /**
         * Lazy loading check for expanding content
         */
        this._openedOnce = false;
        /**
         * Is info sent to Error Summary Service
         */
        this._errorSummaryInfoSent = false;
        this._injector = inject(Injector);
        this._id = this._idService.getNewId('expandable');
        this._headingId = `${this._id}-heading`;
    }
    /**
     * Expandable is initially closed by default but can be controlled by [closed] input property
     */
    set closed(value) {
        this._setClosedStatus(value);
    }
    _getParentForm() {
        this._errorSummaryService
            .getFormAncestorId(this._element.nativeElement)
            .then((parentFormId) => {
            if (parentFormId) {
                this._parentFormId = parentFormId;
                if (this.errorSummaryBreadcrumb) {
                    this._addToErrorSummary(this.title);
                }
                toObservable(this._errorSummaryService.errorSummaryVisibilityStatus[this._parentFormId], {
                    injector: this._injector,
                }).subscribe((value) => {
                    if (this.closed && this.openOnErrorSummaryReload && value) {
                        this._setClosedStatus(false);
                    }
                });
            }
        });
    }
    /**
     * Getter for closed boolean
     */
    get closed() {
        return this._closed;
    }
    ngAfterContentInit() {
        this._getParentForm();
    }
    ngOnChanges(changes) {
        if (changes.title || changes.errorSummaryBreadcrumb?.currentValue === true) {
            this._addToErrorSummary(this.title);
        }
        if (changes?.errorSummaryBreadcrumb?.currentValue === false) {
            this._removeFromErrorSummary();
        }
    }
    ngOnDestroy() {
        this._removeFromErrorSummary();
    }
    /**
     * Send error object to Error Summary Service
     */
    _addToErrorSummary(title) {
        if (this.errorSummaryBreadcrumb && this._parentFormId) {
            const errorSummaryInfo = {
                id: this._id,
                formId: this._parentFormId,
                title: title,
            };
            this._errorSummaryService.addSection(errorSummaryInfo);
            this._errorSummaryInfoSent = true;
        }
    }
    /**
     * Remove error object from Error Summary Service
     */
    _removeFromErrorSummary() {
        if (this._errorSummaryInfoSent && this._parentFormId) {
            this._errorSummaryService.removeSection(this._parentFormId, this._id);
        }
    }
    /**
     * Setter for closed boolean
     */
    _setClosedStatus(value) {
        this._closed = value ?? this._closed;
        this._openedOnce = this._openedOnce || !this._closed;
        this.closedChange.emit(this._closed);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExpandableComponent, deps: [{ token: i0.ElementRef }, { token: FudisIdService }, { token: FudisInternalErrorSummaryService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ExpandableComponent, isStandalone: false, selector: "fudis-expandable", inputs: { title: "title", level: "level", variant: "variant", padding: "padding", subTitle: "subTitle", badge: "badge", badgeText: "badgeText", errorSummaryBreadcrumb: "errorSummaryBreadcrumb", openOnErrorSummaryReload: "openOnErrorSummaryReload", closed: "closed" }, outputs: { closedChange: "closedChange" }, queries: [{ propertyName: "_content", first: true, predicate: ExpandableContentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section\n  [id]=\"_id\"\n  [attr.aria-labelledby]=\"_headingId\"\n  class=\"fudis-expandable fudis-expandable__{{ variant }}\"\n  [class.fudis-expandable--closed]=\"_closed\"\n>\n  <div class=\"fudis-expandable__header fudis-expandable__header__{{ variant }}\">\n    <div\n      role=\"heading\"\n      [attr.aria-level]=\"level\"\n      [id]=\"_headingId\"\n      class=\"fudis-expandable__header__heading\"\n    >\n      <button\n        type=\"button\"\n        [id]=\"_id + '-header-button'\"\n        class=\"fudis-expandable__header__heading__button fudis-expandable__header__heading__button__{{\n          variant\n        }}\"\n        [attr.aria-expanded]=\"!_closed\"\n        [attr.aria-controls]=\"!closed ? _id + '__content' : null\"\n        (click)=\"_setClosedStatus(!_closed)\"\n      >\n        <fudis-icon\n          class=\"fudis-expandable__header__heading__button__icon fudis-expandable__header__heading__button__icon__{{\n            variant\n          }}\"\n          [icon]=\"variant === 'lite' ? 'chevron' : 'chevron-ring-fill'\"\n          [color]=\"variant === 'lite' ? 'primary' : 'gray-dark'\"\n          [rotate]=\"_closed ? 'none' : 'cw-90'\"\n        ></fudis-icon\n        ><span class=\"fudis-expandable__header__heading__button__title\"\n          ><span class=\"fudis-expandable__header__heading__button__title__text\">{{ title }}</span>\n          <fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-expandable__header__heading__button__title__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n          /><span\n            *ngIf=\"variant !== 'lite' && subTitle\"\n            class=\"fudis-expandable__header__heading__button__title__sub-heading\"\n            >{{ subTitle }}</span\n          ></span\n        >\n      </button>\n    </div>\n    <ng-content select=\"fudis-expandable-actions\" />\n  </div>\n  <div\n    class=\"fudis-expandable__content fudis-expandable__content__padding-{{ padding }}\"\n    *ngIf=\"_openedOnce\"\n    [id]=\"_id + '__content'\"\n    [attr.aria-hidden]=\"_closed\"\n    [hidden]=\"_closed\"\n  >\n    <ng-container *ngIf=\"_content\">\n      <ng-container *ngTemplateOutlet=\"_content!.templateRef\"></ng-container>\n    </ng-container>\n  </div>\n</section>\n", styles: [".fudis-expandable{margin-bottom:calc(1rem / var(--fudis-rem-multiplier));border-top:0}.fudis-expandable--closed{border-bottom:0}.fudis-expandable__regular{border:2px solid #f1f1f1}.fudis-expandable__header{display:block;padding:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable__header__regular{background-color:#f1f1f1}.fudis-expandable__header__heading{margin:0;width:100%}.fudis-expandable__header__heading__button{border:none;background-color:transparent;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:400;display:flex;cursor:pointer;width:100%;text-align:left}.fudis-expandable__header__heading__button:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-expandable__header__heading__button__icon__regular{margin-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable__header__heading__button__title{align-self:center}.fudis-expandable__header__heading__button__title__text{margin-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable__header__heading__button__title__sub-heading{font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:300;display:block}.fudis-expandable__header__heading__button__lite{color:var(--fudis-color-primary-dark);display:inline-block;position:relative;text-decoration:underline solid;font-family:Fira Sans,sans-serif;overflow-wrap:anywhere;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;color:var(--fudis-color-primary);text-decoration:none}.fudis-expandable__header__heading__button__lite:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}@media screen and (min-width: 36em){.fudis-expandable__header{display:flex}}@media screen and (min-width: 48em){.fudis-expandable__content__padding-default{padding:calc(1.5rem / var(--fudis-rem-multiplier));padding-left:calc(2.5rem / var(--fudis-rem-multiplier))}}@media screen and (max-width: 47.99em){.fudis-expandable__content__padding-default{padding:calc(1rem / var(--fudis-rem-multiplier));padding-left:calc(1.5rem / var(--fudis-rem-multiplier))}}.fudis-expandable__content__padding-small{padding:calc(1rem / var(--fudis-rem-multiplier))}.fudis-expandable-actions{display:flex;gap:calc(.5rem / var(--fudis-rem-multiplier));margin-top:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable-actions fudis-button:first-of-type{margin-left:calc(.5rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-expandable-actions{margin-top:0;margin-left:0}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BadgeComponent, selector: "fudis-badge", inputs: ["variant", "content"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ExpandableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-expandable', encapsulation: ViewEncapsulation.None, standalone: false, template: "<section\n  [id]=\"_id\"\n  [attr.aria-labelledby]=\"_headingId\"\n  class=\"fudis-expandable fudis-expandable__{{ variant }}\"\n  [class.fudis-expandable--closed]=\"_closed\"\n>\n  <div class=\"fudis-expandable__header fudis-expandable__header__{{ variant }}\">\n    <div\n      role=\"heading\"\n      [attr.aria-level]=\"level\"\n      [id]=\"_headingId\"\n      class=\"fudis-expandable__header__heading\"\n    >\n      <button\n        type=\"button\"\n        [id]=\"_id + '-header-button'\"\n        class=\"fudis-expandable__header__heading__button fudis-expandable__header__heading__button__{{\n          variant\n        }}\"\n        [attr.aria-expanded]=\"!_closed\"\n        [attr.aria-controls]=\"!closed ? _id + '__content' : null\"\n        (click)=\"_setClosedStatus(!_closed)\"\n      >\n        <fudis-icon\n          class=\"fudis-expandable__header__heading__button__icon fudis-expandable__header__heading__button__icon__{{\n            variant\n          }}\"\n          [icon]=\"variant === 'lite' ? 'chevron' : 'chevron-ring-fill'\"\n          [color]=\"variant === 'lite' ? 'primary' : 'gray-dark'\"\n          [rotate]=\"_closed ? 'none' : 'cw-90'\"\n        ></fudis-icon\n        ><span class=\"fudis-expandable__header__heading__button__title\"\n          ><span class=\"fudis-expandable__header__heading__button__title__text\">{{ title }}</span>\n          <fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-expandable__header__heading__button__title__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n          /><span\n            *ngIf=\"variant !== 'lite' && subTitle\"\n            class=\"fudis-expandable__header__heading__button__title__sub-heading\"\n            >{{ subTitle }}</span\n          ></span\n        >\n      </button>\n    </div>\n    <ng-content select=\"fudis-expandable-actions\" />\n  </div>\n  <div\n    class=\"fudis-expandable__content fudis-expandable__content__padding-{{ padding }}\"\n    *ngIf=\"_openedOnce\"\n    [id]=\"_id + '__content'\"\n    [attr.aria-hidden]=\"_closed\"\n    [hidden]=\"_closed\"\n  >\n    <ng-container *ngIf=\"_content\">\n      <ng-container *ngTemplateOutlet=\"_content!.templateRef\"></ng-container>\n    </ng-container>\n  </div>\n</section>\n", styles: [".fudis-expandable{margin-bottom:calc(1rem / var(--fudis-rem-multiplier));border-top:0}.fudis-expandable--closed{border-bottom:0}.fudis-expandable__regular{border:2px solid #f1f1f1}.fudis-expandable__header{display:block;padding:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable__header__regular{background-color:#f1f1f1}.fudis-expandable__header__heading{margin:0;width:100%}.fudis-expandable__header__heading__button{border:none;background-color:transparent;line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:400;display:flex;cursor:pointer;width:100%;text-align:left}.fudis-expandable__header__heading__button:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-expandable__header__heading__button__icon__regular{margin-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable__header__heading__button__title{align-self:center}.fudis-expandable__header__heading__button__title__text{margin-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable__header__heading__button__title__sub-heading{font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:300;display:block}.fudis-expandable__header__heading__button__lite{color:var(--fudis-color-primary-dark);display:inline-block;position:relative;text-decoration:underline solid;font-family:Fira Sans,sans-serif;overflow-wrap:anywhere;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;color:var(--fudis-color-primary);text-decoration:none}.fudis-expandable__header__heading__button__lite:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}@media screen and (min-width: 36em){.fudis-expandable__header{display:flex}}@media screen and (min-width: 48em){.fudis-expandable__content__padding-default{padding:calc(1.5rem / var(--fudis-rem-multiplier));padding-left:calc(2.5rem / var(--fudis-rem-multiplier))}}@media screen and (max-width: 47.99em){.fudis-expandable__content__padding-default{padding:calc(1rem / var(--fudis-rem-multiplier));padding-left:calc(1.5rem / var(--fudis-rem-multiplier))}}.fudis-expandable__content__padding-small{padding:calc(1rem / var(--fudis-rem-multiplier))}.fudis-expandable-actions{display:flex;gap:calc(.5rem / var(--fudis-rem-multiplier));margin-top:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-expandable-actions fudis-button:first-of-type{margin-left:calc(.5rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-expandable-actions{margin-top:0;margin-left:0}}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FudisIdService }, { type: FudisInternalErrorSummaryService }], propDecorators: { _content: [{
                type: ContentChild,
                args: [ExpandableContentDirective]
            }], title: [{
                type: Input,
                args: [{ required: true }]
            }], level: [{
                type: Input,
                args: [{ required: true }]
            }], variant: [{
                type: Input
            }], padding: [{
                type: Input
            }], subTitle: [{
                type: Input
            }], badge: [{
                type: Input
            }], badgeText: [{
                type: Input
            }], errorSummaryBreadcrumb: [{
                type: Input
            }], openOnErrorSummaryReload: [{
                type: Input
            }], closed: [{
                type: Input
            }], closedChange: [{
                type: Output
            }] } });

class FooterContentLeftDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FooterContentLeftDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FooterContentLeftDirective, isStandalone: false, selector: "[fudisFooterContentLeft]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FooterContentLeftDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisFooterContentLeft]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
class FooterContentRightDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FooterContentRightDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FooterContentRightDirective, isStandalone: false, selector: "[fudisFooterContentRight]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FooterContentRightDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisFooterContentRight]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

/**
 * Just a wrapper component to be able to use Grid in templates using '<fudis-grid></fudis-grid>'
 * tags. Main functionality is in GridDirective
 */
class GridComponent extends GridDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GridComponent, isStandalone: false, selector: "fudis-grid", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".fudis-grid{box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr}@media screen and (min-width: 36em){.fudis-grid{width:100%}}.fudis-grid__align__start{margin-right:auto;margin-left:0}.fudis-grid__align__center{margin-right:auto;margin-left:auto}@media screen and (max-width: 35.99em){.fudis-grid__align__center{margin-right:calc(1rem / var(--fudis-rem-multiplier));margin-left:calc(1rem / var(--fudis-rem-multiplier))}}.fudis-grid__align__end{margin-right:0;margin-left:auto}@media screen and (min-width: 0){.fudis-grid__xxl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__xxl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__xxl{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 62em){.fudis-grid__xxl{max-width:calc(60rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 75em){.fudis-grid__xxl{max-width:calc(65rem / var(--fudis-rem-multiplier));gap:calc(2rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 100em){.fudis-grid__xxl{max-width:calc(96.25rem / var(--fudis-rem-multiplier));gap:calc(2rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__xl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__xl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__xl{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 62em){.fudis-grid__xl{max-width:calc(60rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 75em){.fudis-grid__xl{max-width:calc(65rem / var(--fudis-rem-multiplier));gap:calc(2rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__lg{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__lg{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__lg{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 62em){.fudis-grid__lg{max-width:calc(60rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__md{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__md{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__md{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__sm{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__sm{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}.fudis-grid__initial{width:initial}.fudis-grid__xs{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__none{row-gap:0}.fudis-grid__row-gap__xxs{row-gap:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__xs{row-gap:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__sm{row-gap:calc(1rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__md{row-gap:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__lg{row-gap:calc(2rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__xl{row-gap:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__xxl{row-gap:calc(4rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__none{column-gap:0}.fudis-grid__column-gap__xxs{column-gap:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__xs{column-gap:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__sm{column-gap:calc(1rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__md{column-gap:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__lg{column-gap:calc(2rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__xl{column-gap:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__xxl{column-gap:calc(4rem / var(--fudis-rem-multiplier))}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-grid', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n", styles: [".fudis-grid{box-sizing:border-box;display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr}@media screen and (min-width: 36em){.fudis-grid{width:100%}}.fudis-grid__align__start{margin-right:auto;margin-left:0}.fudis-grid__align__center{margin-right:auto;margin-left:auto}@media screen and (max-width: 35.99em){.fudis-grid__align__center{margin-right:calc(1rem / var(--fudis-rem-multiplier));margin-left:calc(1rem / var(--fudis-rem-multiplier))}}.fudis-grid__align__end{margin-right:0;margin-left:auto}@media screen and (min-width: 0){.fudis-grid__xxl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__xxl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__xxl{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 62em){.fudis-grid__xxl{max-width:calc(60rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 75em){.fudis-grid__xxl{max-width:calc(65rem / var(--fudis-rem-multiplier));gap:calc(2rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 100em){.fudis-grid__xxl{max-width:calc(96.25rem / var(--fudis-rem-multiplier));gap:calc(2rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__xl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__xl{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__xl{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 62em){.fudis-grid__xl{max-width:calc(60rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 75em){.fudis-grid__xl{max-width:calc(65rem / var(--fudis-rem-multiplier));gap:calc(2rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__lg{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__lg{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__lg{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 62em){.fudis-grid__lg{max-width:calc(60rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__md{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__md{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 48em){.fudis-grid__md{max-width:calc(45rem / var(--fudis-rem-multiplier));gap:calc(1.5rem / var(--fudis-rem-multiplier)) calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 0){.fudis-grid__sm{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-grid__sm{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}}.fudis-grid__initial{width:initial}.fudis-grid__xs{max-width:calc(34rem / var(--fudis-rem-multiplier));gap:calc(1rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__none{row-gap:0}.fudis-grid__row-gap__xxs{row-gap:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__xs{row-gap:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__sm{row-gap:calc(1rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__md{row-gap:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__lg{row-gap:calc(2rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__xl{row-gap:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-grid__row-gap__xxl{row-gap:calc(4rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__none{column-gap:0}.fudis-grid__column-gap__xxs{column-gap:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__xs{column-gap:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__sm{column-gap:calc(1rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__md{column-gap:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__lg{column-gap:calc(2rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__xl{column-gap:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-grid__column-gap__xxl{column-gap:calc(4rem / var(--fudis-rem-multiplier))}\n"] }]
        }] });

class GridItemDirective {
    constructor(_gridItemElement, _breakpointService) {
        this._gridItemElement = _gridItemElement;
        this._breakpointService = _breakpointService;
        /**
         * Apply CSS grid-column values for the Grid Item
         */
        this._calculatedColumns = gridItemDefault;
        /**
         * Apply horizontal CSS values for the Grid Item
         */
        this._calculatedAlignX = 'stretch';
        /**
         * Apply vertical CSS values for the Grid Item
         */
        this._calculatedAlignY = 'stretch';
        this._element = _gridItemElement.nativeElement;
        /**
         * When screen is resized check and apply new rules for Grid Item
         */
        effect(() => {
            this._breakpointService.getBreakpointState();
            if (typeof this._calculatedColumns !== 'string') {
                this._setColumns();
            }
            if (typeof this._calculatedAlignX !== 'string') {
                this._setAlignX();
            }
            if (typeof this._calculatedAlignY !== 'string') {
                this._setAlignY();
            }
        });
    }
    /**
     * Set columns for single Grid Item
     */
    set columns(value) {
        // Convert given string value to proper CSS grid-column value
        if (typeof value === 'string') {
            this._calculatedColumns = getGridCssValue(value, true);
        }
        // Convert given number value to proper CSS grid-column value. E.g. number 6 converts to 'span 6'.
        else if (typeof value === 'number') {
            this._calculatedColumns = getGridCssValue(value, true);
        }
        // Get breakpoint settings with provided values
        else {
            this._calculatedColumns = getBreakpointDataArray(value, gridItemDefault, true);
        }
    }
    /**
     * Align Grid Item horizontally
     */
    set alignSelfX(value) {
        if (typeof value === 'string') {
            this._calculatedAlignX = value;
        }
        else {
            this._calculatedAlignX = getBreakpointDataArray(value, 'stretch');
        }
    }
    /**
     * Align Grid Item vertically
     */
    set alignSelfY(value) {
        if (typeof value === 'string') {
            this._calculatedAlignY = value;
        }
        else {
            this._calculatedAlignY = getBreakpointDataArray(value, 'stretch');
        }
    }
    ngOnInit() {
        this._element.classList.add('fudis-grid-item');
        this._applyGridItemCss();
    }
    ngOnChanges() {
        this._applyGridItemCss();
    }
    /**
     * Set CSS grid-column attributes for this Grid Item element
     */
    _setColumns() {
        this._breakpointService.setStyleAttributes(this._element, 'grid-column', this._calculatedColumns);
    }
    /**
     * Set CSS justify-self attributes for this Grid Item element
     */
    _setAlignX() {
        this._breakpointService.setStyleAttributes(this._element, 'justify-self', this._calculatedAlignX);
    }
    /**
     * Set CSS align-self attributes for this Grid Item element
     */
    _setAlignY() {
        this._breakpointService.setStyleAttributes(this._element, 'align-self', this._calculatedAlignY);
    }
    /**
     * Apply CSS settings from Inputs
     */
    _applyGridItemCss() {
        this._setColumns();
        this._setAlignX();
        this._setAlignY();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridItemDirective, deps: [{ token: i0.ElementRef }, { token: FudisBreakpointService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: GridItemDirective, isStandalone: false, selector: "[fudisGridItem]", inputs: { columns: "columns", alignSelfX: "alignSelfX", alignSelfY: "alignSelfY" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridItemDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisGridItem]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FudisBreakpointService }], propDecorators: { columns: [{
                type: Input
            }], alignSelfX: [{
                type: Input
            }], alignSelfY: [{
                type: Input
            }] } });

class GridItemComponent extends GridItemDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: GridItemComponent, isStandalone: false, selector: "fudis-grid-item", usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".fudis-grid-item{box-sizing:border-box;margin:0;padding:0}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: GridItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-grid-item', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n", styles: [".fudis-grid-item{box-sizing:border-box;margin:0;padding:0}\n"] }]
        }] });

class FooterComponent {
    constructor(_translationService) {
        this._translationService = _translationService;
        /**
         * Used to apply grid columns breakpoint values for the Footer
         */
        this._columns = { sm: 2 };
        /**
         * Alternative text for the Funidata logo
         */
        this._funidataLogoAltText = new BehaviorSubject(this._translationService.getTranslations()().IMAGE.FUNIDATA_LOGO);
        /**
         * External link text for Funidata logo
         */
        this._externalLinkHelpText = new BehaviorSubject(this._translationService.getTranslations()().LINK.EXTERNAL_LINK);
        effect(() => {
            const translations = this._translationService.getTranslations()();
            this._funidataLogoAltText.next(translations.IMAGE.FUNIDATA_LOGO);
            this._externalLinkHelpText.next(translations.LINK.EXTERNAL_LINK);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FooterComponent, deps: [{ token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FooterComponent, isStandalone: false, selector: "fudis-footer", queries: [{ propertyName: "_footerContentLeft", first: true, predicate: FooterContentLeftDirective, descendants: true }, { propertyName: "_footerContentRight", first: true, predicate: FooterContentRightDirective, descendants: true }], ngImport: i0, template: "<footer class=\"fudis-footer\">\n  <fudis-grid\n    [serviceDefaults]=\"false\"\n    [columns]=\"_columns\"\n    [rowGap]=\"'md'\"\n    [classes]=\"'fudis-mt-xxl fudis-footer__content'\"\n    [align]=\"'center'\"\n    [width]=\"'xxl'\"\n  >\n    <fudis-grid-item [alignSelfX]=\"{ xs: 'center', sm: 'start' }\" class=\"fudis-footer__item\">\n      <a\n        href=\"https://www.funidata.fi/\"\n        class=\"fudis-footer__item__logo\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        [attr.aria-label]=\"(_funidataLogoAltText | async) + ' ' + (_externalLinkHelpText | async)\"\n        ><svg\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          width=\"127\"\n          height=\"24\"\n          viewBox=\"0 0 127 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Funidata logo</title>\n          <path\n            d=\"M10.5893 4.93128H3.64757V9.71953H10.3425V12.5456H3.64757V22.0295H0.642578V2.1114H10.5893V4.93128ZM16.4203 2.1114V14.1067C16.4203 15.8159 16.698 17.0685 17.2595 17.8583C18.0925 18.9998 19.2649 19.5737 20.7828 19.5737C22.3008 19.5737 23.4855 18.9998 24.3185 17.8583C24.88 17.0932 25.1577 15.8406 25.1577 14.1067V2.1114H28.1627V14.9335C28.1627 17.0315 27.5086 18.7592 26.2005 20.1229C24.7319 21.6346 22.924 22.3936 20.7828 22.3936C18.6417 22.3936 16.8399 21.6346 15.3775 20.1229C14.0694 18.7654 13.4154 17.0376 13.4154 14.9335V2.1114H16.4203V2.1114ZM32.6239 22.0357V0.753906L47.149 15.9517V2.1114H50.154V23.2451L35.635 8.08437V22.0295H32.63L32.6239 22.0357ZM57.6943 2.1114V22.0295H54.6893V2.1114H57.6943ZM74.5519 4.67829C73.5399 3.74656 72.4046 3.0925 71.1582 2.70376C69.9981 2.30885 68.4123 2.1114 66.4069 2.1114H62.2234V15.8714H65.2284V4.93128H66.5859C69.1466 4.93128 71.0903 5.53598 72.4046 6.75156C73.867 8.10905 74.5951 9.87996 74.5951 12.0643C74.5951 14.2486 73.8546 15.9887 72.3737 17.34C71.6518 17.9941 70.8435 18.4692 69.9487 18.7715C69.054 19.0554 67.931 19.1973 66.5797 19.1973H62.2172V22.0233H66.3452C68.3691 22.0233 69.9241 21.8382 71.0286 21.468C72.2071 21.0978 73.3363 20.4376 74.41 19.4935C76.5511 17.5992 77.6248 15.1248 77.6248 12.0643C77.6248 9.00376 76.5943 6.54793 74.5395 4.67212L74.5519 4.67829ZM91.7982 17.1919H83.2707L81.0493 22.0295H77.8099L87.6702 0.858803L97.1788 22.0295H93.89L91.7982 17.1919V17.1919ZM90.5703 14.3659L87.6147 7.59073L84.5171 14.3659H90.5703ZM103.726 4.93128V22.0295H100.721V4.93128H96.1422V2.1114H108.298V4.93128H103.732H103.726ZM121.256 17.1857H112.728L110.507 22.0233H107.267L117.134 0.858803L126.643 22.0295H123.354L121.262 17.1919L121.256 17.1857ZM120.028 14.3597L117.072 7.58456L113.975 14.3597H120.028Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </a>\n      <ng-container *ngIf=\"_footerContentLeft\">\n        <ng-container *ngTemplateOutlet=\"_footerContentLeft!.templateRef\" />\n      </ng-container>\n    </fudis-grid-item>\n\n    <ng-container *ngIf=\"_footerContentRight\">\n      <fudis-grid-item [alignSelfX]=\"{ xs: 'center', sm: 'end' }\" class=\"fudis-footer__item\">\n        <ng-container *ngTemplateOutlet=\"_footerContentRight!.templateRef\" />\n      </fudis-grid-item>\n    </ng-container>\n  </fudis-grid>\n</footer>\n", styles: [".fudis-footer{box-sizing:border-box;margin:0;padding:0;background-color:#f1f1f1;position:relative;text-align:center}.fudis-footer .fudis-link{color:var(--fudis-color-primary-dark);display:inline-block;position:relative;text-decoration:underline solid;font-family:Fira Sans,sans-serif;overflow-wrap:anywhere;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400}.fudis-footer .fudis-link:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-footer .fudis-link:first-of-type{margin-top:calc(1rem / var(--fudis-rem-multiplier))}.fudis-footer .fudis-link:not(:last-of-type){margin-bottom:calc(2rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 62em){.fudis-footer .fudis-link:not(:last-of-type){margin-bottom:0}}@media screen and (min-width: 36em){.fudis-footer .fudis-link:first-of-type{margin-top:0}}.fudis-footer__content{bottom:0;padding-top:calc(1.5rem / var(--fudis-rem-multiplier));padding-bottom:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-footer__item{display:flex;flex-direction:column}.fudis-footer__item__logo{margin-bottom:calc(1rem / var(--fudis-rem-multiplier));color:#000}@media screen and (min-width: 62em){.fudis-footer__item{flex-direction:row;align-items:center}.fudis-footer__item__logo{margin-right:calc(1.5rem / var(--fudis-rem-multiplier));margin-bottom:0}.fudis-footer__item .fudis-link:not(:last-of-type){margin-right:calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-footer{text-align:initial}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridComponent, selector: "fudis-grid" }, { kind: "component", type: GridItemComponent, selector: "fudis-grid-item" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FooterComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-footer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<footer class=\"fudis-footer\">\n  <fudis-grid\n    [serviceDefaults]=\"false\"\n    [columns]=\"_columns\"\n    [rowGap]=\"'md'\"\n    [classes]=\"'fudis-mt-xxl fudis-footer__content'\"\n    [align]=\"'center'\"\n    [width]=\"'xxl'\"\n  >\n    <fudis-grid-item [alignSelfX]=\"{ xs: 'center', sm: 'start' }\" class=\"fudis-footer__item\">\n      <a\n        href=\"https://www.funidata.fi/\"\n        class=\"fudis-footer__item__logo\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        [attr.aria-label]=\"(_funidataLogoAltText | async) + ' ' + (_externalLinkHelpText | async)\"\n        ><svg\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          width=\"127\"\n          height=\"24\"\n          viewBox=\"0 0 127 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <title>Funidata logo</title>\n          <path\n            d=\"M10.5893 4.93128H3.64757V9.71953H10.3425V12.5456H3.64757V22.0295H0.642578V2.1114H10.5893V4.93128ZM16.4203 2.1114V14.1067C16.4203 15.8159 16.698 17.0685 17.2595 17.8583C18.0925 18.9998 19.2649 19.5737 20.7828 19.5737C22.3008 19.5737 23.4855 18.9998 24.3185 17.8583C24.88 17.0932 25.1577 15.8406 25.1577 14.1067V2.1114H28.1627V14.9335C28.1627 17.0315 27.5086 18.7592 26.2005 20.1229C24.7319 21.6346 22.924 22.3936 20.7828 22.3936C18.6417 22.3936 16.8399 21.6346 15.3775 20.1229C14.0694 18.7654 13.4154 17.0376 13.4154 14.9335V2.1114H16.4203V2.1114ZM32.6239 22.0357V0.753906L47.149 15.9517V2.1114H50.154V23.2451L35.635 8.08437V22.0295H32.63L32.6239 22.0357ZM57.6943 2.1114V22.0295H54.6893V2.1114H57.6943ZM74.5519 4.67829C73.5399 3.74656 72.4046 3.0925 71.1582 2.70376C69.9981 2.30885 68.4123 2.1114 66.4069 2.1114H62.2234V15.8714H65.2284V4.93128H66.5859C69.1466 4.93128 71.0903 5.53598 72.4046 6.75156C73.867 8.10905 74.5951 9.87996 74.5951 12.0643C74.5951 14.2486 73.8546 15.9887 72.3737 17.34C71.6518 17.9941 70.8435 18.4692 69.9487 18.7715C69.054 19.0554 67.931 19.1973 66.5797 19.1973H62.2172V22.0233H66.3452C68.3691 22.0233 69.9241 21.8382 71.0286 21.468C72.2071 21.0978 73.3363 20.4376 74.41 19.4935C76.5511 17.5992 77.6248 15.1248 77.6248 12.0643C77.6248 9.00376 76.5943 6.54793 74.5395 4.67212L74.5519 4.67829ZM91.7982 17.1919H83.2707L81.0493 22.0295H77.8099L87.6702 0.858803L97.1788 22.0295H93.89L91.7982 17.1919V17.1919ZM90.5703 14.3659L87.6147 7.59073L84.5171 14.3659H90.5703ZM103.726 4.93128V22.0295H100.721V4.93128H96.1422V2.1114H108.298V4.93128H103.732H103.726ZM121.256 17.1857H112.728L110.507 22.0233H107.267L117.134 0.858803L126.643 22.0295H123.354L121.262 17.1919L121.256 17.1857ZM120.028 14.3597L117.072 7.58456L113.975 14.3597H120.028Z\"\n            fill=\"currentColor\"\n          ></path>\n        </svg>\n      </a>\n      <ng-container *ngIf=\"_footerContentLeft\">\n        <ng-container *ngTemplateOutlet=\"_footerContentLeft!.templateRef\" />\n      </ng-container>\n    </fudis-grid-item>\n\n    <ng-container *ngIf=\"_footerContentRight\">\n      <fudis-grid-item [alignSelfX]=\"{ xs: 'center', sm: 'end' }\" class=\"fudis-footer__item\">\n        <ng-container *ngTemplateOutlet=\"_footerContentRight!.templateRef\" />\n      </fudis-grid-item>\n    </ng-container>\n  </fudis-grid>\n</footer>\n", styles: [".fudis-footer{box-sizing:border-box;margin:0;padding:0;background-color:#f1f1f1;position:relative;text-align:center}.fudis-footer .fudis-link{color:var(--fudis-color-primary-dark);display:inline-block;position:relative;text-decoration:underline solid;font-family:Fira Sans,sans-serif;overflow-wrap:anywhere;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400}.fudis-footer .fudis-link:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-footer .fudis-link:first-of-type{margin-top:calc(1rem / var(--fudis-rem-multiplier))}.fudis-footer .fudis-link:not(:last-of-type){margin-bottom:calc(2rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 62em){.fudis-footer .fudis-link:not(:last-of-type){margin-bottom:0}}@media screen and (min-width: 36em){.fudis-footer .fudis-link:first-of-type{margin-top:0}}.fudis-footer__content{bottom:0;padding-top:calc(1.5rem / var(--fudis-rem-multiplier));padding-bottom:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-footer__item{display:flex;flex-direction:column}.fudis-footer__item__logo{margin-bottom:calc(1rem / var(--fudis-rem-multiplier));color:#000}@media screen and (min-width: 62em){.fudis-footer__item{flex-direction:row;align-items:center}.fudis-footer__item__logo{margin-right:calc(1.5rem / var(--fudis-rem-multiplier));margin-bottom:0}.fudis-footer__item .fudis-link:not(:last-of-type){margin-right:calc(1.5rem / var(--fudis-rem-multiplier))}}@media screen and (min-width: 36em){.fudis-footer{text-align:initial}}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }], propDecorators: { _footerContentLeft: [{
                type: ContentChild,
                args: [FooterContentLeftDirective]
            }], _footerContentRight: [{
                type: ContentChild,
                args: [FooterContentRightDirective]
            }] } });

/**
 * Get corresponding default variant for heading level
 */
const getHeadingVariant = (level) => {
    switch (level) {
        case 1:
            return 'xxl';
        case 2:
            return 'xl';
        case 3:
            return 'lg';
        case 4:
            return 'md';
        case 5:
            return 'sm';
        case 6:
            return 'xs';
        default:
            return 'lg';
    }
};

class HeadingComponent {
    constructor(_idService, _wrapperElement) {
        this._idService = _idService;
        this._wrapperElement = _wrapperElement;
        /**
         * Align heading
         */
        this.align = 'left';
        /**
         * Heading CSS class list
         */
        this._classList = new BehaviorSubject([]);
        /**
         * Set Heading wrapper to be "full width" if used inside Grid
         */
        _wrapperElement.nativeElement.style.gridColumn = '1/-1';
    }
    /**
     * Set CSS classes for heading
     */
    _setClasses() {
        const calcVariant = this.variant || getHeadingVariant(this.level);
        const newClasses = [
            `fudis-heading`,
            `fudis-heading__variant__${calcVariant}`,
            `fudis-heading__align__${this.align}`,
        ];
        this._classList.next(newClasses);
    }
    ngOnInit() {
        this._id = this.id ?? this._idService.getNewId('heading');
        this._setClasses();
    }
    ngOnChanges(changes) {
        if (changes.align?.currentValue !== changes.align?.previousValue ||
            changes.variant?.currentValue !== changes.variant?.previousValue ||
            changes.level?.currentValue !== changes.level?.previousValue) {
            this._setClasses();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeadingComponent, deps: [{ token: FudisIdService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HeadingComponent, isStandalone: false, selector: "fudis-heading", inputs: { level: "level", variant: "variant", id: "id", align: "align" }, viewQueries: [{ propertyName: "headingRef", first: true, predicate: ["headingRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"\n    level === 1\n      ? h1\n      : level === 2\n        ? h2\n        : level === 3\n          ? h3\n          : level === 4\n            ? h4\n            : level === 5\n              ? h5\n              : h6\n  \"\n></ng-container>\n\n<!-- From level @Input choose which h-tag to render -->\n<ng-template #h1>\n  <h1 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h1>\n</ng-template>\n\n<ng-template #h2>\n  <h2 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h2>\n</ng-template>\n\n<ng-template #h3>\n  <h3 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h3>\n</ng-template>\n\n<ng-template #h4>\n  <h4 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h4>\n</ng-template>\n\n<ng-template #h5>\n  <h5 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h5>\n</ng-template>\n\n<ng-template #h6>\n  <h6 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h6>\n</ng-template>\n\n<!-- Render content inside fudis-heading tags -->\n<ng-template #headingContent>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeadingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-heading', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container\n  *ngTemplateOutlet=\"\n    level === 1\n      ? h1\n      : level === 2\n        ? h2\n        : level === 3\n          ? h3\n          : level === 4\n            ? h4\n            : level === 5\n              ? h5\n              : h6\n  \"\n></ng-container>\n\n<!-- From level @Input choose which h-tag to render -->\n<ng-template #h1>\n  <h1 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h1>\n</ng-template>\n\n<ng-template #h2>\n  <h2 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h2>\n</ng-template>\n\n<ng-template #h3>\n  <h3 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h3>\n</ng-template>\n\n<ng-template #h4>\n  <h4 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h4>\n</ng-template>\n\n<ng-template #h5>\n  <h5 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h5>\n</ng-template>\n\n<ng-template #h6>\n  <h6 #headingRef [id]=\"_id\" tabindex=\"-1\" [class]=\"_classList | async\">\n    <ng-container *ngTemplateOutlet=\"headingContent\"></ng-container>\n  </h6>\n</ng-template>\n\n<!-- Render content inside fudis-heading tags -->\n<ng-template #headingContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: i0.ElementRef }], propDecorators: { headingRef: [{
                type: ViewChild,
                args: ['headingRef']
            }], level: [{
                type: Input,
                args: [{ required: true }]
            }], variant: [{
                type: Input
            }], id: [{
                type: Input
            }], align: [{
                type: Input
            }] } });

class FormComponent extends GridApiDirective {
    constructor(_idService, _elementRef, _errorSummaryService, _dialogParent) {
        super();
        this._idService = _idService;
        this._elementRef = _elementRef;
        this._errorSummaryService = _errorSummaryService;
        this._dialogParent = _dialogParent;
        /**
         * Set Error Summary visibility manually. Usually set true on form submit with Button binded with
         * 'fudisFormSubmit' directive.
         */
        this.errorSummaryVisible = false;
        /**
         * Each time Error Summary List is updated, this emitter will output the list
         */
        this.handleUpdatedErrorList = new EventEmitter();
        /**
         * Angular Change Detection did not trigger when we tried to update only our internal
         * errorSummaryVisible input, hence we need this "helper signal"
         */
        this._errorSummaryVisibleSignal = signal(false);
        this._injector = inject(Injector);
    }
    ngOnInit() {
        this._setFormId();
        if (!this.titleVariant) {
            this.titleVariant = getHeadingVariant(this.level);
        }
        this._errorSummaryService.registerNewForm(this.id, this.errorSummaryVisible);
        if (this._dialogParent) {
            this._dialogParent.closeButtonPositionAbsolute.set(true);
        }
        toObservable(this._errorSummaryService.errorSummaryVisibilityStatus[this.id], {
            injector: this._injector,
        }).subscribe((value) => {
            if (value !== this.errorSummaryVisible) {
                this.errorSummaryVisible = !this.errorSummaryVisible;
                this._errorSummaryVisibleSignal.set(this.errorSummaryVisible);
            }
        });
    }
    ngOnDestroy() {
        this._errorSummaryService.removeForm(this.id);
    }
    ngOnChanges(changes) {
        if (changes.errorSummaryVisible?.currentValue !== changes.errorSummaryVisible?.previousValue &&
            this.id) {
            this._errorSummaryService.setErrorSummaryVisibility(this.id, this.errorSummaryVisible);
            this._errorSummaryVisibleSignal.set(this.errorSummaryVisible);
        }
    }
    /**
     * Add or generate id with IdService
     */
    _setFormId() {
        if (this.id) {
            this._idService.addNewId('form', this.id);
        }
        else {
            this.id = this._idService.getNewId('form');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormComponent, deps: [{ token: FudisIdService }, { token: i0.ElementRef }, { token: FudisInternalErrorSummaryService }, { token: DialogComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormComponent, isStandalone: false, selector: "fudis-form", inputs: { title: "title", level: "level", id: "id", titleVariant: "titleVariant", helpText: "helpText", badge: "badge", badgeText: "badgeText", errorSummaryVisible: "errorSummaryVisible", errorSummaryTitle: "errorSummaryTitle" }, outputs: { handleUpdatedErrorList: "handleUpdatedErrorList" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form\n  fudisGrid\n  [id]=\"id\"\n  [attr.aria-describedby]=\"id + '-header'\"\n  [width]=\"width\"\n  [align]=\"align\"\n  [serviceDefaults]=\"false\"\n  [alignItemsX]=\"alignItemsX\"\n  [alignItemsY]=\"alignItemsY\"\n  [classes]=\"_dialogParent ? 'fudis-form fudis-form__dialog' : 'fudis-form fudis-form__default'\"\n  [columnGap]=\"columnGap\"\n  [rowGap]=\"'none'\"\n>\n  <div [id]=\"id + '-header'\" class=\"fudis-form__header\">\n    <div class=\"fudis-form__header__main\">\n      <div class=\"fudis-form__header__title\">\n        <fudis-heading\n          *ngIf=\"_dialogParent\"\n          class=\"fudis-form__header__title__dialog fudis-mb-xs\"\n          fudisDialogTitle\n          [variant]=\"titleVariant\"\n          [level]=\"level\"\n          >{{ title\n          }}<fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-form__header__title__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n        /></fudis-heading>\n        <fudis-heading\n          *ngIf=\"!_dialogParent\"\n          class=\"fudis-mb-xs\"\n          [variant]=\"titleVariant\"\n          [level]=\"level\"\n          >{{ title\n          }}<fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-form__header__title__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n        /></fudis-heading>\n        <fudis-body-text *ngIf=\"helpText\" class=\"fudis-mb-xs\">{{ helpText }}</fudis-body-text>\n      </div>\n      <ng-content select=\"fudis-form-header\" />\n      <ng-container *ngIf=\"!_dialogParent\">\n        <ng-container *ngTemplateOutlet=\"errorSummary\" />\n      </ng-container>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!_dialogParent\">\n    <ng-container *ngTemplateOutlet=\"actions\" />\n  </ng-container>\n  <div class=\"fudis-form__content-wrapper\">\n    <ng-container *ngIf=\"_dialogParent\">\n      <ng-container *ngTemplateOutlet=\"errorSummary\" />\n    </ng-container>\n    <ng-content select=\"fudis-form-content\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"_dialogParent\">\n    <ng-container *ngTemplateOutlet=\"actions\" />\n  </ng-container>\n</form>\n\n<ng-template #errorSummary>\n  <fudis-error-summary\n    *ngIf=\"_elementRef.nativeElement && (errorSummaryVisible || _errorSummaryVisibleSignal())\"\n    [formId]=\"id\"\n    (handleUpdatedErrorList)=\"handleUpdatedErrorList.emit($event)\"\n    [parentComponent]=\"_elementRef.nativeElement\"\n    [title]=\"errorSummaryTitle\"\n  />\n</ng-template>\n\n<ng-template #actions>\n  <ng-content select=\"fudis-form-actions\" />\n</ng-template>\n", styles: [".fudis-form__header__title__badge{margin-left:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-form__header__title__dialog{max-width:calc(100% - 2rem / var(--fudis-rem-multiplier))}.fudis-form__header__main fudis-form-header{display:block;margin-bottom:calc(1rem / var(--fudis-rem-multiplier))}.fudis-form-content{display:block}.fudis-form .fudis-form-actions{display:flex;flex-wrap:wrap}.fudis-form__default .fudis-form-actions{gap:calc(.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));margin-right:calc(.5rem / var(--fudis-rem-multiplier));margin-bottom:calc(1rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-form__default .fudis-form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-bottom:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-form__default .fudis-form-actions fudis-button:not(:first-of-type){margin-bottom:0}}.fudis-form__dialog .fudis-form-actions{justify-content:flex-end}.fudis-form__dialog .fudis-form-actions fudis-button:not(:first-of-type){margin-left:calc(.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: BadgeComponent, selector: "fudis-badge", inputs: ["variant", "content"] }, { kind: "component", type: BodyTextComponent, selector: "fudis-body-text", inputs: ["variant", "align", "lang"] }, { kind: "directive", type: DialogTitleDirective, selector: "[fudisDialogTitle]" }, { kind: "component", type: ErrorSummaryComponent, selector: "fudis-error-summary", inputs: ["parentComponent", "title", "formId"], outputs: ["handleUpdatedErrorList"] }, { kind: "directive", type: GridDirective, selector: "[fudisGrid]" }, { kind: "component", type: HeadingComponent, selector: "fudis-heading", inputs: ["level", "variant", "id", "align"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-form', encapsulation: ViewEncapsulation.None, standalone: false, template: "<form\n  fudisGrid\n  [id]=\"id\"\n  [attr.aria-describedby]=\"id + '-header'\"\n  [width]=\"width\"\n  [align]=\"align\"\n  [serviceDefaults]=\"false\"\n  [alignItemsX]=\"alignItemsX\"\n  [alignItemsY]=\"alignItemsY\"\n  [classes]=\"_dialogParent ? 'fudis-form fudis-form__dialog' : 'fudis-form fudis-form__default'\"\n  [columnGap]=\"columnGap\"\n  [rowGap]=\"'none'\"\n>\n  <div [id]=\"id + '-header'\" class=\"fudis-form__header\">\n    <div class=\"fudis-form__header__main\">\n      <div class=\"fudis-form__header__title\">\n        <fudis-heading\n          *ngIf=\"_dialogParent\"\n          class=\"fudis-form__header__title__dialog fudis-mb-xs\"\n          fudisDialogTitle\n          [variant]=\"titleVariant\"\n          [level]=\"level\"\n          >{{ title\n          }}<fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-form__header__title__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n        /></fudis-heading>\n        <fudis-heading\n          *ngIf=\"!_dialogParent\"\n          class=\"fudis-mb-xs\"\n          [variant]=\"titleVariant\"\n          [level]=\"level\"\n          >{{ title\n          }}<fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-form__header__title__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n        /></fudis-heading>\n        <fudis-body-text *ngIf=\"helpText\" class=\"fudis-mb-xs\">{{ helpText }}</fudis-body-text>\n      </div>\n      <ng-content select=\"fudis-form-header\" />\n      <ng-container *ngIf=\"!_dialogParent\">\n        <ng-container *ngTemplateOutlet=\"errorSummary\" />\n      </ng-container>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!_dialogParent\">\n    <ng-container *ngTemplateOutlet=\"actions\" />\n  </ng-container>\n  <div class=\"fudis-form__content-wrapper\">\n    <ng-container *ngIf=\"_dialogParent\">\n      <ng-container *ngTemplateOutlet=\"errorSummary\" />\n    </ng-container>\n    <ng-content select=\"fudis-form-content\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"_dialogParent\">\n    <ng-container *ngTemplateOutlet=\"actions\" />\n  </ng-container>\n</form>\n\n<ng-template #errorSummary>\n  <fudis-error-summary\n    *ngIf=\"_elementRef.nativeElement && (errorSummaryVisible || _errorSummaryVisibleSignal())\"\n    [formId]=\"id\"\n    (handleUpdatedErrorList)=\"handleUpdatedErrorList.emit($event)\"\n    [parentComponent]=\"_elementRef.nativeElement\"\n    [title]=\"errorSummaryTitle\"\n  />\n</ng-template>\n\n<ng-template #actions>\n  <ng-content select=\"fudis-form-actions\" />\n</ng-template>\n", styles: [".fudis-form__header__title__badge{margin-left:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-form__header__title__dialog{max-width:calc(100% - 2rem / var(--fudis-rem-multiplier))}.fudis-form__header__main fudis-form-header{display:block;margin-bottom:calc(1rem / var(--fudis-rem-multiplier))}.fudis-form-content{display:block}.fudis-form .fudis-form-actions{display:flex;flex-wrap:wrap}.fudis-form__default .fudis-form-actions{gap:calc(.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));margin-right:calc(.5rem / var(--fudis-rem-multiplier));margin-bottom:calc(1rem / var(--fudis-rem-multiplier))}@media screen and (min-width: 36em){.fudis-form__default .fudis-form-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-bottom:calc(1.5rem / var(--fudis-rem-multiplier))}.fudis-form__default .fudis-form-actions fudis-button:not(:first-of-type){margin-bottom:0}}.fudis-form__dialog .fudis-form-actions{justify-content:flex-end}.fudis-form__dialog .fudis-form-actions fudis-button:not(:first-of-type){margin-left:calc(.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: i0.ElementRef }, { type: FudisInternalErrorSummaryService }, { type: DialogComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }], propDecorators: { title: [{
                type: Input,
                args: [{ required: true }]
            }], level: [{
                type: Input,
                args: [{ required: true }]
            }], id: [{
                type: Input
            }], titleVariant: [{
                type: Input
            }], helpText: [{
                type: Input
            }], badge: [{
                type: Input
            }], badgeText: [{
                type: Input
            }], errorSummaryVisible: [{
                type: Input
            }], errorSummaryTitle: [{
                type: Input
            }], handleUpdatedErrorList: [{
                type: Output
            }] } });

class HorizontalRuleComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HorizontalRuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HorizontalRuleComponent, isStandalone: false, selector: "fudis-hr", ngImport: i0, template: "<hr class=\"fudis-hr\" aria-hidden=\"true\" />\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HorizontalRuleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-hr', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<hr class=\"fudis-hr\" aria-hidden=\"true\" />\n" }]
        }] });

/**
 * Utility function to test, if two objects have the exactly same properties
 *
 * @param x First object
 * @param y Second object
 * @returns Boolean
 */
const areObjectsDeepEquals = (x, y) => {
    const ok = Object.keys;
    const tx = typeof x;
    const ty = typeof y;
    return x && y && tx === 'object' && tx === ty
        ? ok(x).length === ok(y).length && ok(x).every((key) => areObjectsDeepEquals(x[key], y[key]))
        : x === y;
};

/**
 * Function to loop array of options and join their labels to a single string
 *
 * @param values Array of selected Options
 * @returns
 */
const joinInputValues = (values) => {
    const label = [];
    values.forEach((item) => {
        const labelToPush = item.label.includes(',') ? `'${item.label}'` : item.label;
        label.push(labelToPush);
    });
    const joinedValues = label.join(', ');
    return joinedValues;
};
/**
 * Add or remove a value from current list and returned updated one
 *
 * @param currentList
 * @param valueToUpdate
 * @param visible
 * @returns Updated List
 */
const setVisibleOptionsList = (currentList, valueToUpdate, visible) => {
    const listToReturn = [...currentList];
    const valueExists = listToReturn.includes(valueToUpdate);
    if (visible && !valueExists) {
        listToReturn.push(valueToUpdate);
    }
    else if (valueExists && !visible) {
        const index = listToReturn.indexOf(valueToUpdate);
        listToReturn.splice(index, 1);
    }
    return listToReturn;
};

// TODO: Write tests for all Content Directives in this file
/**
 * A marker directive used to tag the template that will be rendered inside the Select options
 * components
 */
class SelectOptionsDirective {
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SelectOptionsDirective, isStandalone: false, selector: "[fudisSelectOptions]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisSelectOptions]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }] });

class SelectBaseDirective extends ControlComponentBaseDirective {
    constructor(_document, _focusService, _idService) {
        super(_idService, _focusService);
        this._document = _document;
        /**
         * Set dropdown size (should follow the given input element size)
         */
        this.size = 'lg';
        /**
         * Determine if Select has autocompletion filter for user typed text When set to:
         *
         * - Dropdown: default, normal select dropdown
         * - AutocompleteDropdown": dropdown with autocomplete input field
         * - AutocompleteType: autocomplete but user must type 3 letters before any results are displayed
         */
        this.variant = 'dropdown';
        /**
         * Enable / disable button, which clears user selection when there is a selected value
         */
        this.selectionClearButton = true;
        /**
         * By default Autocomplete filters options loaded to the DOM based on user input. When this is set
         * to 'false', filtering is disabled and all options available in DOM are displayed regardless of
         * user's input. Disabling can be useful, if application wants to implement their own filtering
         * logic. E. g. get user's input, run a backend search and create list of options for the Select.
         */
        this.autocompleteFilter = true;
        /**
         * By default, Autocomplete variant will display "No results found" text when there are 0 options
         * matching. When combined with 'autocompleteFilter' false, application can set their own
         * 'Fetching options...' etc. text while their own filtering is in progress.
         */
        this.autocompleteNoResultsText = null;
        /**
         * Value output event on selection change
         */
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.selectionUpdate = new EventEmitter();
        /**
         * Output for number of visible options after filtering results
         */
        this.visibleOptionsUpdate = new EventEmitter();
        /**
         * Output for number of visible options after filtering results
         */
        this.filterTextUpdate = new EventEmitter();
        /**
         * CSS selector for querying focus states
         */
        this.focusSelector = '.fudis-select-option__focusable';
        /**
         * For setting dropdown open / closed
         */
        this._dropdownOpen = signal(false);
        /**
         * Signal to Select & MultiselectOption for listening autocomplete filter text changes
         */
        this._autocompleteFilterText = signal('');
        /**
         * Lazy loading check for expanding content, unless component control gets values from
         * application, then set to true automatically, so that comparing available options match given
         * control value.
         */
        this._optionsLoadedOnce = false;
        /**
         * Used when filtering autocomplete results to check if 'No results found' text is visible
         */
        this._visibleOptions = [];
        /**
         * Status of input focus
         */
        this._inputFocused = false;
        /**
         * Used to handle exceptions when mouse click event fires before / after focus event or user has
         * clicked autocomplete clear button
         */
        this._preventDropdownReopen = false;
        /**
         * Focus try counter
         */
        this._focusTryCounter = 0;
        /**
         * Array to store visible options while options are loading.
         */
        this._visibleOptionsTemp = [];
        /**
         * Currently focused option
         */
        this._focusedOption = null;
        /**
         * If clear button is focused
         */
        this._clearButtonFocused = false;
        /**
         * If click event's target is Select's input field
         */
        this._mouseUpOnInput = false;
        /**
         * Used to not update visible options to HTML template before some delay has passed in case new
         * options are still loading
         */
        this._optionLoadInterval = null;
        /**
         * If click event originated from Icon used inside input field
         */
        this._clickFromIcon = false;
        /**
         * Keyboard button pressed down
         */
        this._keyDown = null;
        /**
         * Used to pass info, that Clear Button was clicked
         */
        this._clearButtonClickTrigger = signal(false);
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.control) {
                this._required.next(FudisValidatorUtilities.required(this.control));
            }
        });
    }
    ngOnChanges(changes) {
        if (changes.control?.currentValue !== changes.control?.previousValue) {
            this._updateValueAndValidityTrigger.next();
            this._updateComponentStateFromControlValue();
            if (this.control.value) {
                this._optionsLoadedOnce = true;
            }
            this._subscription?.unsubscribe();
            this._subscription = this.control.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((value) => {
                this._updateValueAndValidityTrigger.next();
                if (value) {
                    this._optionsLoadedOnce = true;
                }
                this._updateComponentStateFromControlValue();
            });
        }
        if (changes.variant?.currentValue !== changes.variant?.previousValue &&
            changes.variant?.currentValue === 'dropdown' &&
            !changes.variant.firstChange) {
            this.setAutocompleteFilterText('');
        }
        if (changes.autocompleteFilter?.currentValue !== changes.autocompleteFilter?.previousValue &&
            !changes.autocompleteFilter?.currentValue) {
            this._autocompleteFilterText.set(this._autocompleteFilterText());
        }
    }
    /**
     * @returns Signal value of autocomplete filter text
     */
    getAutocompleteFilterText() {
        return this._autocompleteFilterText.asReadonly();
    }
    /**
     * Open dropdown
     */
    openDropdown() {
        if (!this.control.disabled && !this.disabled) {
            this._optionsLoadedOnce = true;
            this._dropdownOpen.set(true);
        }
    }
    /**
     * Close dropdown
     *
     * @param focusToInput: When dropdown closes, focus or not to the input
     * @param preventDropdownReopen: For cases, when closing command comes from outside eg. clicking
     *   an option in the dropdownlist. There's no need to reopen the dropdown when focusing back to
     *   the input, which usually triggers opening the dropdown.
     */
    closeDropdown(focusToInput = true, preventDropdownReopen = false) {
        this._dropdownOpen.set(false);
        this._preventDropdownReopen = preventDropdownReopen;
        if (focusToInput) {
            this._focusToSelectInput();
        }
    }
    /**
     * Each option sends information to parent if they are visible or not
     *
     * @param value Option value
     * @param visible Is this option visible or not
     */
    setOptionVisibility(value, visible) {
        this._latestVisibleOption = value;
        this._visibleOptionsTemp = setVisibleOptionsList(this._visibleOptionsTemp, value, visible);
        if (!this._optionLoadInterval) {
            this._optionsLoadDelay().then((resolve) => {
                if (resolve) {
                    this._visibleOptions = this._visibleOptionsTemp;
                    this.visibleOptionsUpdate.emit(this._visibleOptions.length);
                }
            });
        }
    }
    /**
     * Add or remove currently focused option. Called from SelectOptionBase.
     */
    setFocusedOption(id, type) {
        if (type === 'add') {
            this._focusedOption = id;
        }
        else {
            this._focusedOption = null;
        }
    }
    /**
     * Promise which determines, if some of the components used in this Select has focus or not.
     *
     * @param event FocusEvent
     * @returns
     */
    componentFocused(event) {
        return new Promise((resolve) => {
            let counter = 0;
            const nextTarget = event?.relatedTarget;
            const focusCheckInterval = setInterval(() => {
                const focused = !!this._selectRef.nativeElement.contains(this._document.activeElement) ||
                    !!this._selectRef.nativeElement.contains(nextTarget);
                // If focus has moved another element inside Select
                if (focused || this._mouseDownInsideComponent) {
                    clearInterval(focusCheckInterval);
                    this._mouseDownInsideComponent = false;
                    resolve(true);
                    // If focus target is null
                }
                else if (!nextTarget) {
                    clearInterval(focusCheckInterval);
                    resolve(false);
                    // Increase counter, and try again. This is needed usually with click events as between previous element blur and next element focus click event is "somewhere else"
                }
                else if (counter <= 100) {
                    counter = counter + 50;
                }
                else {
                    // Else resolve boolean check after two tries, if any relevant element is focused
                    clearInterval(focusCheckInterval);
                    resolve(!!this._focusedOption || this._inputFocused || this._clearButtonFocused);
                }
            }, 50);
        });
    }
    /**
     * When Clear button is clicked
     */
    _clearButtonClick() {
        if (!this.control.disabled && !this.disabled) {
            this._clearButtonClickTrigger.set(true);
            this._setControlNull();
            this._focusToSelectInput();
        }
    }
    /**
     * Set control value to null Control value should reset even when user input does not match any
     * option value (i.e. control value is null), so that dropdown shows options correctly
     */
    _setControlNull() {
        if (this.control.value) {
            this.control.patchValue(null);
            this.selectionUpdate.emit(null);
            this.setAutocompleteFilterText('');
        }
        else {
            this.control.patchValue(null);
            this.setAutocompleteFilterText('');
        }
    }
    /**
     * To handle input focus
     */
    _selectInputFocus(event) {
        this._inputFocused = true;
        const openDropdown = this.variant === 'dropdown' ||
            this.variant === 'autocompleteDropdown' ||
            (this.variant === 'autocompleteType' && this._autocompleteFilterText() !== '');
        if (!this._preventDropdownReopen &&
            openDropdown &&
            !this._mouseDownInsideComponent &&
            !this._dropdownOpen()) {
            this.openDropdown();
        }
        else if (this._clickFromIcon) {
            if (this._dropdownOpen()) {
                this.closeDropdown();
            }
            else {
                this.openDropdown();
            }
        }
        this._preventDropdownReopen = false;
        this.onFocus(event);
    }
    /**
     * To handle input field blur events
     *
     * @param event FocusEvent
     */
    _inputBlur(event) {
        this.componentFocused(event).then((value) => {
            if (!value) {
                this.closeDropdown(false);
            }
        });
        this._inputFocused = false;
        this.control.markAsTouched();
    }
    /**
     * To handle click events for input
     */
    _clickInput() {
        this._preventDropdownReopen = true;
        if (this._inputFocused || this._mouseUpOnInput) {
            if (this.variant === 'dropdown') {
                this._toggleDropdown();
            }
            else {
                this.openDropdown();
            }
        }
        this._focusToSelectInput();
    }
    /**
     * Register pressed key inside input field. Used to check that both key down and key up originated
     * from same source.
     */
    _inputKeyDown(event) {
        this._keyDown = event.key;
        // Prevent scrolling
        if (event.key === 'ArrowDown') {
            event.preventDefault();
        }
    }
    /**
     * Handle keypress for dropdown select
     *
     * @param event KeyboardEvent
     * @param focusSelector CSS selector to focus to on ArrowDown event
     */
    _inputKeyUp(event) {
        const { key } = event;
        if (key === this._keyDown) {
            switch (key) {
                case ' ':
                    if (this.variant === 'dropdown') {
                        event.preventDefault();
                        this._toggleDropdown();
                    }
                    break;
                case 'Enter':
                    event.preventDefault();
                    if (this._visibleOptions.length === 1) {
                        this._focusToFirstOption(true);
                    }
                    else {
                        this._toggleDropdown();
                    }
                    break;
                case 'ArrowDown':
                    event.preventDefault();
                    if (!this._dropdownOpen()) {
                        this._toggleDropdown();
                    }
                    if (this._inputFocused) {
                        this._focusToFirstOption();
                    }
                    break;
                case 'Tab':
                    break;
                default:
                    event.preventDefault();
            }
        }
        this._keyDown = null;
    }
    /**
     * Generate html id for parent FudisSelect
     */
    _setParentId(type) {
        if (this.id && type === 'select') {
            this._idService.addNewGrandParentId('select', this.id);
        }
        else if (type === 'select') {
            this.id = this._idService.getNewGrandParentId('select');
        }
        else if (this.id && type === 'multiselect') {
            this._idService.addNewGrandParentId('multiselect', this.id);
        }
        else {
            this.id = this._idService.getNewGrandParentId('multiselect');
        }
    }
    /**
     * Toggle dropdown
     */
    _toggleDropdown() {
        if (this._dropdownOpen()) {
            this.closeDropdown();
        }
        else {
            this.openDropdown();
        }
    }
    /**
     * Resolve a promise after delay if there hasn't been new options
     *
     * @returns Boolean
     */
    _optionsLoadDelay() {
        let tempLatestOptions;
        return new Promise((resolve) => {
            this._optionLoadInterval = setInterval(() => {
                if (tempLatestOptions === this._latestVisibleOption) {
                    if (this._optionLoadInterval) {
                        clearInterval(this._optionLoadInterval);
                        this._optionLoadInterval = null;
                    }
                    resolve(true);
                }
                else {
                    tempLatestOptions = this._latestVisibleOption;
                }
            }, 50);
        });
    }
    /**
     * Set Clear button's focus state to false
     */
    _setClearButtonFocusFalse() {
        this._clearButtonFocused = false;
    }
    /**
     * Set focus state of Clear Button and determine if Dropdown should be closed when this function
     * is called
     *
     * @param event FocusEvent
     * @param state
     */
    _setClearButtonFocusState(event, state) {
        this._clearButtonFocused = state;
        if (!state) {
            this.componentFocused(event).then((value) => {
                if (!value) {
                    this.closeDropdown(false);
                }
            });
        }
    }
    /**
     * Update input filter text
     *
     * @param text String to set as filter text
     * @param nullCheck True by default, check if control should be set as null
     */
    setAutocompleteFilterText(text, nullCheck = true) {
        if (this._autocompleteFilterText() !== text) {
            this._autocompleteFilterText.set(text);
            this.filterTextUpdate.emit(text);
        }
        if (nullCheck) {
            this._checkIfAutocompleteValueNull(text);
        }
    }
    /**
     * Checks if currently typed filter text is not same as control label value
     *
     * @param text Filter text value emitted from autocomplete
     */
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _checkIfAutocompleteValueNull(text) { }
    /**
     * To focus on first option when dropdown opens
     *
     * @param cssfocusSelector CSS class to focus to
     */
    _focusToFirstOption(clickFirstOption) {
        const firstOption = this._dropdownRef?.dropdownElement.nativeElement.querySelector(this.focusSelector);
        if (firstOption) {
            firstOption.focus();
            if (clickFirstOption) {
                firstOption.click();
            }
            if (this._document.activeElement !== firstOption) {
                setTimeout(() => {
                    firstOption.focus();
                    if (clickFirstOption) {
                        firstOption.click();
                    }
                }, 0);
            }
        }
        else if (this._focusTryCounter < 20) {
            setTimeout(() => {
                this._focusTryCounter += 1;
                this._focusToFirstOption();
            }, 100);
        }
    }
    /**
     * When blurring away from Dropdown, check if this Select has focus
     */
    _dropdownBlur(event) {
        this.componentFocused(event).then((value) => {
            if (!value) {
                this.closeDropdown(false);
            }
        });
    }
    /**
     * Browser focus logic differs. E. g. Firefox tries to focus to Dropdown menu wrapper. This
     * function determines that if it should focus to first option or back to input field.
     */
    _dropdownFocus(event) {
        const focusFromInputOrClearButton = event.relatedTarget === this._inputRef?.nativeElement ||
            this._selectIconsRef.nativeElement.contains(event.relatedTarget);
        if (focusFromInputOrClearButton) {
            this._focusToFirstOption();
        }
        else {
            this._focusToSelectInput();
        }
    }
    /**
     * Focus to input field
     */
    _focusToSelectInput() {
        this._inputRef?.nativeElement.focus();
    }
    /**
     * Function declaration overridden and implemented by Select and Multiselect
     */
    _updateComponentStateFromControlValue() { }
    /**
     * When pressing keyboard Esc, focus to Select input and close dropdown
     *
     * @param event
     */
    _handleEscapePress(event) {
        if (this._dropdownOpen()) {
            event.preventDefault();
            this.closeDropdown(true, true);
        }
    }
    /**
     * When user clicks, set status whether click is inside or outside the Select element
     *
     * @param targetElement
     */
    _handleWindowClick(targetElement) {
        this._mouseDownInsideComponent = false;
        if (this._dropdownOpen() && !this._selectRef.nativeElement.contains(targetElement)) {
            this.closeDropdown(false);
        }
    }
    _handleMouseDown() {
        this._mouseDownInsideComponent = true;
    }
    _handleMouseUp(targetElement) {
        this._clickFromIcon =
            this._selectRef.nativeElement.contains(targetElement) &&
                !!targetElement.closest('.fudis-select-icons__container');
        this._mouseUpOnInput =
            targetElement &&
                (!!this._inputRef?.nativeElement.contains(targetElement) || this._clickFromIcon);
        if (this._clickFromIcon) {
            if (!this.control.disabled) {
                this._focusToSelectInput();
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectBaseDirective, deps: [{ token: DOCUMENT }, { token: FudisFocusService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SelectBaseDirective, isStandalone: false, selector: "[fudisSelectBase]", inputs: { size: "size", placeholder: "placeholder", variant: "variant", selectionClearButton: "selectionClearButton", autocompleteFilter: "autocompleteFilter", autocompleteHelpText: "autocompleteHelpText", autocompleteNoResultsText: "autocompleteNoResultsText" }, outputs: { selectionUpdate: "selectionUpdate", visibleOptionsUpdate: "visibleOptionsUpdate", filterTextUpdate: "filterTextUpdate" }, host: { listeners: { "window:keydown.escape": "_handleEscapePress($event)", "document:mouseup": "_handleWindowClick($event.target)", "mousedown": "_handleMouseDown($event.target)", "mouseup": "_handleMouseUp($event.target)" } }, queries: [{ propertyName: "_selectOptionsDirective", first: true, predicate: SelectOptionsDirective, descendants: true }], viewQueries: [{ propertyName: "_dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "_selectIconsRef", first: true, predicate: ["selectIconsRef"], descendants: true }, { propertyName: "_selectRef", first: true, predicate: ["selectRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisSelectBase]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: FudisFocusService }, { type: FudisIdService }], propDecorators: { _dropdownRef: [{
                type: ViewChild,
                args: ['dropdownRef']
            }], _selectIconsRef: [{
                type: ViewChild,
                args: ['selectIconsRef']
            }], _selectOptionsDirective: [{
                type: ContentChild,
                args: [SelectOptionsDirective]
            }], _selectRef: [{
                type: ViewChild,
                args: ['selectRef']
            }], size: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], variant: [{
                type: Input
            }], selectionClearButton: [{
                type: Input
            }], autocompleteFilter: [{
                type: Input
            }], autocompleteHelpText: [{
                type: Input
            }], autocompleteNoResultsText: [{
                type: Input
            }], selectionUpdate: [{
                type: Output
            }], visibleOptionsUpdate: [{
                type: Output
            }], filterTextUpdate: [{
                type: Output
            }], _handleEscapePress: [{
                type: HostListener,
                args: ['window:keydown.escape', ['$event']]
            }], _handleWindowClick: [{
                type: HostListener,
                args: ['document:mouseup', ['$event.target']]
            }], _handleMouseDown: [{
                type: HostListener,
                args: ['mousedown', ['$event.target']]
            }], _handleMouseUp: [{
                type: HostListener,
                args: ['mouseup', ['$event.target']]
            }] } });

/* eslint-disable @typescript-eslint/no-explicit-any */
class SelectBaseControlValueAccessorDirective {
    constructor() {
        this.onChanged = () => { };
        this.onTouched = () => { };
        this.onValidate = () => { };
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    writeValue(value) { }
    registerOnChange(fn) {
        this.onChanged = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    validate(control) {
        if (control.invalid) {
            return control.errors;
        }
        else {
            return null;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectBaseControlValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SelectBaseControlValueAccessorDirective, isStandalone: false, selector: "[fudisSelectBaseControlValueAccessor]", providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: SelectBaseControlValueAccessorDirective,
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: SelectBaseControlValueAccessorDirective,
                multi: true,
            },
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectBaseControlValueAccessorDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisSelectBaseControlValueAccessor]',
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: SelectBaseControlValueAccessorDirective,
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: SelectBaseControlValueAccessorDirective,
                            multi: true,
                        },
                    ],
                    standalone: false,
                }]
        }], ctorParameters: () => [] });
class SelectControlValueAccessorDirective extends SelectBaseControlValueAccessorDirective {
    constructor(_elementRef, _renderer) {
        super();
        this._elementRef = _elementRef;
        this._renderer = _renderer;
    }
    ngOnChanges(changes) {
        if (changes.filterText?.currentValue !== changes.filterText?.previousValue) {
            this.writeValue();
        }
    }
    writeValue(value) {
        const valueToSet = value?.label || null;
        if (valueToSet) {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'value', valueToSet);
            if (this._elementRef.nativeElement.value !== valueToSet) {
                this._elementRef.nativeElement.value = valueToSet;
            }
        }
        else if (this.filterText) {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'value', this.filterText);
            if (this._elementRef.nativeElement.value !== this.filterText) {
                this._elementRef.nativeElement.value = this.filterText;
            }
        }
        else {
            this._renderer.removeAttribute(this._elementRef.nativeElement, 'value');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectControlValueAccessorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SelectControlValueAccessorDirective, isStandalone: false, selector: "[fudisSelectControlValueAccessor]", inputs: { filterText: "filterText" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: SelectControlValueAccessorDirective,
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: SelectControlValueAccessorDirective,
                multi: true,
            },
        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectControlValueAccessorDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisSelectControlValueAccessor]',
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: SelectControlValueAccessorDirective,
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: SelectControlValueAccessorDirective,
                            multi: true,
                        },
                    ],
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { filterText: [{
                type: Input
            }] } });
class MultiselectControlValueAccessorDirective extends SelectBaseControlValueAccessorDirective {
    constructor(_document, _elementRef, _renderer) {
        super();
        this._document = _document;
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this.enableAutocomplete = false;
        this.handleSortedSelectedOptions = new EventEmitter();
        /**
         * When selecting / deselecting options, variable for storing them in the order of their id's
         * (usually the DOM order)
         */
        this._selectedOptions = null;
    }
    ngAfterViewInit() {
        this.writeValue(this._selectedOptions);
    }
    writeValue(value) {
        this._selectedOptions = value;
        this._setVisibleLabel(value);
    }
    _setVisibleLabel(value) {
        const dropdown = this._document.getElementById(`${this.id}-dropdown`);
        if (value) {
            const sortedSelectedOptions = dropdown
                ? [...value].sort(this._sortSelectedOptionsDOMOrder(dropdown, this.id))
                : [...value];
            this.handleSortedSelectedOptions.emit(sortedSelectedOptions);
            if (!this.enableAutocomplete) {
                const labelToSet = joinInputValues(sortedSelectedOptions);
                this._renderer.setAttribute(this._elementRef.nativeElement, 'value', labelToSet);
            }
        }
        else {
            this._renderer.removeAttribute(this._elementRef.nativeElement, 'value');
            this.handleSortedSelectedOptions.emit(null);
        }
    }
    /**
     * Sort selected options the same order they appear in the DOM
     */
    _sortSelectedOptionsDOMOrder(dropdown, id) {
        return function (a, b) {
            const aElementId = FudisIdService.createSelectOptionId(id, a.label);
            const bElementId = FudisIdService.createSelectOptionId(id, b.label);
            if (aElementId === bElementId) {
                return 0;
            }
            if (dropdown) {
                const firstEl = dropdown.querySelector(`#${aElementId}`);
                const secondEl = dropdown.querySelector(`#${bElementId}`);
                if (firstEl && secondEl) {
                    const position = firstEl.compareDocumentPosition(secondEl);
                    if (position & Node.DOCUMENT_POSITION_FOLLOWING ||
                        position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
                        return -1;
                    }
                    else if (position & Node.DOCUMENT_POSITION_PRECEDING ||
                        position & Node.DOCUMENT_POSITION_CONTAINS) {
                        return 1;
                    }
                }
            }
            return 0;
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectControlValueAccessorDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: MultiselectControlValueAccessorDirective, isStandalone: false, selector: "[fudisMultiselectControlValueAccessor]", inputs: { id: "id", enableAutocomplete: "enableAutocomplete" }, outputs: { handleSortedSelectedOptions: "handleSortedSelectedOptions" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: MultiselectControlValueAccessorDirective,
                multi: true,
            },
            {
                provide: NG_VALIDATORS,
                useExisting: MultiselectControlValueAccessorDirective,
                multi: true,
            },
        ], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectControlValueAccessorDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisMultiselectControlValueAccessor]',
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: MultiselectControlValueAccessorDirective,
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: MultiselectControlValueAccessorDirective,
                            multi: true,
                        },
                    ],
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { id: [{
                type: Input
            }], enableAutocomplete: [{
                type: Input
            }], handleSortedSelectedOptions: [{
                type: Output
            }] } });

class SelectAutocompleteBaseDirective {
    constructor(_elementRef) {
        this._elementRef = _elementRef;
        /**
         * To enable autocomplete
         */
        this.enableAutocomplete = false;
        /**
         * Output event for updating parent's filter text signal
         */
        this.handleFilterTextUpdate = new EventEmitter();
        /**
         * Output event for opening parent dropdown
         */
        this.handleDropdownOpen = new EventEmitter();
        /**
         * Output event for closing parent dropdown
         */
        this.handleDropdownClose = new EventEmitter();
        /**
         * Output event for closing parent dropdown
         */
        this.handleClearButtonReset = new EventEmitter();
        /**
         * Output event for input focus
         */
        this.handleFocus = new EventEmitter();
        /**
         * Output event for input blur
         */
        this.handleBlur = new EventEmitter();
        /**
         * If Focus came from related clear button
         */
        this._focusFromClearButton = false;
        /**
         * Currently typed input text
         */
        this._inputText = null;
        /**
         * If input is focused or not
         */
        this._focused = false;
    }
    _handleFocus(event) {
        this._focused = true;
        if (event.relatedTarget?.getAttribute('id') === `${this.id}-clear-button`) {
            this._focusFromClearButton = true;
        }
        this.handleFocus.emit({ event: event, focusFromClearButton: this._focusFromClearButton });
    }
    _handleBlur(event) {
        this._focused = false;
        this.handleBlur.emit(event);
    }
    _handleKeyDown(event) {
        if (event.target) {
            this._keyDown = event.key;
        }
    }
    _handleKeyUp(event) {
        if (this.enableAutocomplete) {
            if (this._keyDown) {
                const newValue = event.target.value;
                if (newValue !== this._inputText) {
                    this._inputText = newValue;
                    if (newValue.length >= this.typeThreshold) {
                        this.handleFilterTextUpdate.emit(newValue);
                        this.handleDropdownOpen.emit();
                    }
                    else {
                        this.handleDropdownClose.emit();
                        this.handleFilterTextUpdate.emit('');
                    }
                }
            }
            else if (this._focused &&
                this._focusFromClearButton &&
                (event.key === 'Enter' || event.key === ' ')) {
                this._elementRef.nativeElement.value = '';
                this.handleFilterTextUpdate.emit('');
                if (this.typeThreshold === 0) {
                    this.handleDropdownOpen.emit();
                }
                else {
                    this.handleDropdownClose.emit();
                }
            }
            this._focusFromClearButton = false;
            this._keyDown = null;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectAutocompleteBaseDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SelectAutocompleteBaseDirective, isStandalone: false, selector: "[fudisSelectAutocompleteBase]", inputs: { enableAutocomplete: "enableAutocomplete", typeThreshold: "typeThreshold", id: "id", clearButtonClick: "clearButtonClick" }, outputs: { handleFilterTextUpdate: "handleFilterTextUpdate", handleDropdownOpen: "handleDropdownOpen", handleDropdownClose: "handleDropdownClose", handleClearButtonReset: "handleClearButtonReset", handleFocus: "handleFocus", handleBlur: "handleBlur" }, host: { listeners: { "focus": "_handleFocus($event)", "blur": "_handleBlur($event)", "keydown": "_handleKeyDown($event)", "keyup": "_handleKeyUp($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectAutocompleteBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisSelectAutocompleteBase]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enableAutocomplete: [{
                type: Input
            }], typeThreshold: [{
                type: Input,
                args: [{ required: true }]
            }], id: [{
                type: Input
            }], clearButtonClick: [{
                type: Input
            }], handleFilterTextUpdate: [{
                type: Output
            }], handleDropdownOpen: [{
                type: Output
            }], handleDropdownClose: [{
                type: Output
            }], handleClearButtonReset: [{
                type: Output
            }], handleFocus: [{
                type: Output
            }], handleBlur: [{
                type: Output
            }], _handleFocus: [{
                type: HostListener,
                args: ['focus', ['$event']]
            }], _handleBlur: [{
                type: HostListener,
                args: ['blur', ['$event']]
            }], _handleKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }], _handleKeyUp: [{
                type: HostListener,
                args: ['keyup', ['$event']]
            }] } });
class SelectAutocompleteDirective extends SelectAutocompleteBaseDirective {
    constructor(_elementRef) {
        super(_elementRef);
    }
    ngOnChanges(changes) {
        if (this.enableAutocomplete) {
            const selectedLabel = changes.selectedLabel?.currentValue;
            const clearButtonClick = changes.clearButtonClick?.currentValue;
            if (clearButtonClick && clearButtonClick !== changes.clearButtonClick?.previousValue) {
                // Clear Button click
                this._elementRef.nativeElement.value = '';
                this.handleClearButtonReset.emit();
            }
            else if (
            // Selected label is proper value
            selectedLabel &&
                changes.selectedLabel?.currentValue !== changes.selectedLabel?.previousValue) {
                this._elementRef.nativeElement.value = selectedLabel;
            }
            else if (changes.selectedLabel && !selectedLabel && !this._focused) {
                // Selected label is null, but focus is not on input
                this._elementRef.nativeElement.value = '';
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectAutocompleteDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SelectAutocompleteDirective, isStandalone: false, selector: "[fudisSelectAutocomplete]", inputs: { selectedLabel: "selectedLabel" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectAutocompleteDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisSelectAutocomplete]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectedLabel: [{
                type: Input
            }] } });
class MultiselectAutocompleteDirective extends SelectAutocompleteBaseDirective {
    constructor(_elementRef) {
        super(_elementRef);
    }
    ngOnChanges(changes) {
        if (this.enableAutocomplete) {
            if (changes.clearButtonClick?.currentValue &&
                changes.clearButtonClick?.currentValue !== changes.clearButtonClick?.previousValue) {
                // Clear Button click
                this._elementRef.nativeElement.value = '';
                this.handleClearButtonReset.emit();
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectAutocompleteDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: MultiselectAutocompleteDirective, isStandalone: false, selector: "[fudisMultiselectAutocomplete]", usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectAutocompleteDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisMultiselectAutocomplete]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }] });

class SelectDropdownComponent extends DropdownBaseDirective {
    constructor(_translationService) {
        super();
        this._translationService = _translationService;
        /**
         * By default, Autocomplete variant will display "No results found" text when there are 0 options
         * matching. When combined with 'autocompleteFilter' false, application can set their own
         * 'Fetching options...' etc. text while their own filtering is in progress.
         */
        this.autocompleteNoResultsText = null;
        /**
         * Assign Select dropdown to contain single-select or multiselect options (with checkboxes)
         */
        this.multiselect = false;
        /**
         * Set dropdown size
         */
        this.size = 'lg';
        /**
         * Set dropdown open status
         */
        this.open = false;
        /**
         * Boolean which toggles status updates for screen readers about changed option results
         */
        this._displayStatus = new BehaviorSubject(false);
        /**
         * Internal translated label for situations where no results with current filters were found
         */
        this._translationNoResultsFound = new BehaviorSubject('');
        /**
         * Internal translated label for number of visible results
         */
        this._translationResults = new BehaviorSubject('');
        /**
         * Internal translated label for number of visible results
         */
        this._translationShowing = new BehaviorSubject('');
        effect(() => {
            const translations = _translationService.getTranslations()().SELECT.AUTOCOMPLETE;
            this._translationNoResultsFound.next(translations.NO_RESULTS);
            this._translationResults.next(translations.RESULTS);
            this._translationShowing.next(translations.SHOWING);
        });
    }
    ngOnChanges(changes) {
        const newFilterText = changes.filterText?.currentValue;
        const newResults = changes.results?.currentValue;
        if (newFilterText !== changes.filterText?.previousValue ||
            newResults !== changes.results?.previousValue) {
            this._displayStatus.next(false);
            setTimeout(() => {
                if (newFilterText === this.filterText || newResults === 0) {
                    this._displayStatus.next(true);
                }
            }, 500);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectDropdownComponent, deps: [{ token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectDropdownComponent, isStandalone: false, selector: "fudis-select-dropdown", inputs: { selectVariant: "selectVariant", results: "results", autocompleteHelpText: "autocompleteHelpText", autocompleteNoResultsText: "autocompleteNoResultsText", filterText: "filterText", multiselect: "multiselect", parentId: "parentId", size: "size", open: "open" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  #dropdownElement\n  [class.fudis-select-dropdown--hidden]=\"selectVariant === 'autocompleteType' && !filterText\"\n  class=\"fudis-select-dropdown fudis-input-size__{{ size }}\"\n  [class.fudis-select-dropdown--open]=\"open\"\n  [class.fudis-select-dropdown__multiselect]=\"multiselect\"\n  [attr.id]=\"parentId + '-dropdown'\"\n  [attr.aria-labelledby]=\"parentId + '-label'\"\n  [attr.aria-multiselectable]=\"multiselect || null\"\n  (focus)=\"_dropdownFocus($event)\"\n  (blur)=\"_dropdownBlur($event)\"\n  role=\"listbox\"\n>\n  <ng-container *ngIf=\"selectVariant !== 'dropdown' && open && filterText\">\n    <fudis-body-text\n      *ngIf=\"autocompleteHelpText !== false\"\n      [class.fudis-select-dropdown__help-text--hidden]=\"!results\"\n      class=\"fudis-select-dropdown__help-text fudis-select-dropdown__help-text__first\"\n      [variant]=\"'md-light'\"\n      ><ng-container *ngTemplateOutlet=\"helpText\"\n    /></fudis-body-text>\n    <fudis-body-text\n      class=\"fudis-select-dropdown__help-text fudis-select-dropdown__help-text__last\"\n      [class.fudis-select-dropdown__help-text--hidden]=\"results\"\n      [variant]=\"'md-light'\"\n      ><ng-container *ngTemplateOutlet=\"noResults\" />\n    </fudis-body-text>\n    <span\n      *ngIf=\"autocompleteHelpText !== false && (_displayStatus | async) && results && filterText\"\n      class=\"fudis-visually-hidden\"\n      role=\"alert\"\n      ><ng-container *ngTemplateOutlet=\"helpText\"\n    /></span>\n    <span *ngIf=\"!results && (_displayStatus | async)\" class=\"fudis-visually-hidden\" role=\"alert\"\n      ><ng-container *ngTemplateOutlet=\"noResults\"\n    /></span>\n  </ng-container>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #helpText>\n  <ng-container *ngIf=\"autocompleteHelpText\">{{ autocompleteHelpText }}</ng-container\n  ><ng-container *ngIf=\"!autocompleteHelpText\"\n    >{{ _translationShowing | async }} {{ results }} {{ _translationResults | async }}</ng-container\n  >\n</ng-template>\n\n<ng-template #noResults>\n  <ng-container *ngIf=\"autocompleteNoResultsText\">{{ autocompleteNoResultsText }}</ng-container>\n  <ng-container *ngIf=\"!autocompleteNoResultsText\">{{\n    _translationNoResultsFound | async\n  }}</ng-container>\n</ng-template>\n", styles: [".fudis-select-dropdown{box-sizing:border-box;margin:0;padding:0;background-color:#fff;z-index:100;border:1px solid #484848;display:none;position:absolute;flex-direction:column;width:100%;max-height:calc(4rem / var(--fudis-rem-multiplier) * 4);overflow:auto}.fudis-select-dropdown:focus-visible{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-select-dropdown__right{left:0}.fudis-select-dropdown__left{right:0}.fudis-select-dropdown__center{right:initial;left:initial}.fudis-select-dropdown--open{display:flex}.fudis-select-dropdown--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BodyTextComponent, selector: "fudis-body-text", inputs: ["variant", "align", "lang"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectDropdownComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-select-dropdown', standalone: false, template: "<div\n  #dropdownElement\n  [class.fudis-select-dropdown--hidden]=\"selectVariant === 'autocompleteType' && !filterText\"\n  class=\"fudis-select-dropdown fudis-input-size__{{ size }}\"\n  [class.fudis-select-dropdown--open]=\"open\"\n  [class.fudis-select-dropdown__multiselect]=\"multiselect\"\n  [attr.id]=\"parentId + '-dropdown'\"\n  [attr.aria-labelledby]=\"parentId + '-label'\"\n  [attr.aria-multiselectable]=\"multiselect || null\"\n  (focus)=\"_dropdownFocus($event)\"\n  (blur)=\"_dropdownBlur($event)\"\n  role=\"listbox\"\n>\n  <ng-container *ngIf=\"selectVariant !== 'dropdown' && open && filterText\">\n    <fudis-body-text\n      *ngIf=\"autocompleteHelpText !== false\"\n      [class.fudis-select-dropdown__help-text--hidden]=\"!results\"\n      class=\"fudis-select-dropdown__help-text fudis-select-dropdown__help-text__first\"\n      [variant]=\"'md-light'\"\n      ><ng-container *ngTemplateOutlet=\"helpText\"\n    /></fudis-body-text>\n    <fudis-body-text\n      class=\"fudis-select-dropdown__help-text fudis-select-dropdown__help-text__last\"\n      [class.fudis-select-dropdown__help-text--hidden]=\"results\"\n      [variant]=\"'md-light'\"\n      ><ng-container *ngTemplateOutlet=\"noResults\" />\n    </fudis-body-text>\n    <span\n      *ngIf=\"autocompleteHelpText !== false && (_displayStatus | async) && results && filterText\"\n      class=\"fudis-visually-hidden\"\n      role=\"alert\"\n      ><ng-container *ngTemplateOutlet=\"helpText\"\n    /></span>\n    <span *ngIf=\"!results && (_displayStatus | async)\" class=\"fudis-visually-hidden\" role=\"alert\"\n      ><ng-container *ngTemplateOutlet=\"noResults\"\n    /></span>\n  </ng-container>\n  <ng-content></ng-content>\n</div>\n\n<ng-template #helpText>\n  <ng-container *ngIf=\"autocompleteHelpText\">{{ autocompleteHelpText }}</ng-container\n  ><ng-container *ngIf=\"!autocompleteHelpText\"\n    >{{ _translationShowing | async }} {{ results }} {{ _translationResults | async }}</ng-container\n  >\n</ng-template>\n\n<ng-template #noResults>\n  <ng-container *ngIf=\"autocompleteNoResultsText\">{{ autocompleteNoResultsText }}</ng-container>\n  <ng-container *ngIf=\"!autocompleteNoResultsText\">{{\n    _translationNoResultsFound | async\n  }}</ng-container>\n</ng-template>\n", styles: [".fudis-select-dropdown{box-sizing:border-box;margin:0;padding:0;background-color:#fff;z-index:100;border:1px solid #484848;display:none;position:absolute;flex-direction:column;width:100%;max-height:calc(4rem / var(--fudis-rem-multiplier) * 4);overflow:auto}.fudis-select-dropdown:focus-visible{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-select-dropdown__right{left:0}.fudis-select-dropdown__left{right:0}.fudis-select-dropdown__center{right:initial;left:initial}.fudis-select-dropdown--open{display:flex}.fudis-select-dropdown--hidden{display:none}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }], propDecorators: { selectVariant: [{
                type: Input,
                args: [{ required: true }]
            }], results: [{
                type: Input
            }], autocompleteHelpText: [{
                type: Input
            }], autocompleteNoResultsText: [{
                type: Input
            }], filterText: [{
                type: Input
            }], multiselect: [{
                type: Input
            }], parentId: [{
                type: Input
            }], size: [{
                type: Input
            }], open: [{
                type: Input
            }] } });

class SelectIconsComponent {
    constructor(_translationService) {
        this._translationService = _translationService;
        /**
         * Output event for Clear Button click
         */
        this.handleClearButtonClick = new EventEmitter();
        /**
         * Output event for Clear Button focus
         */
        this.handleClearButtonFocus = new EventEmitter();
        /**
         * Output event for Clear Button blur
         */
        this.handleClearButtonBlur = new EventEmitter();
        /**
         * Output event for Clear Button destroy
         */
        this.handleClearButtonDestroy = new EventEmitter();
        /**
         * Observable for status if parent control has value
         */
        this._controlValue = new BehaviorSubject(false);
        /**
         * Translated aria-label for autocomplete close icon button which clears the input
         */
        this._translationClearFilterText = new BehaviorSubject('');
        this._destroyRef = inject(DestroyRef);
        effect(() => {
            this._translationClearFilterText.next(_translationService.getTranslations()().SELECT.AUTOCOMPLETE.CLEAR);
        });
    }
    /**
     * Click handler for Clear Button
     */
    _clearButtonClick(event) {
        this.handleClearButtonClick.emit(event);
    }
    /**
     * Focus handler for Clear Button
     */
    _handleClearButtonFocus(event) {
        this.handleClearButtonFocus.emit(event);
    }
    /**
     * Blur handler for Clear Button
     */
    _handleClearButtonBlur(event) {
        this.handleClearButtonBlur.emit(event);
    }
    ngOnChanges(changes) {
        if (changes.parentControl?.currentValue !== changes.parentControl?.previousValue) {
            this._controlValue.next(!!changes.parentControl?.currentValue?.value);
            this._subscription?.unsubscribe();
            this._subscription = this.parentControl.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((value) => {
                this._controlValue.next(!!value);
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectIconsComponent, deps: [{ token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectIconsComponent, isStandalone: false, selector: "fudis-select-icons", inputs: { dropdownOpen: "dropdownOpen", parentVariant: "parentVariant", clearButton: "clearButton", disabled: "disabled", filterText: "filterText", parentControl: "parentControl", parentId: "parentId" }, outputs: { handleClearButtonClick: "handleClearButtonClick", handleClearButtonFocus: "handleClearButtonFocus", handleClearButtonBlur: "handleClearButtonBlur", handleClearButtonDestroy: "handleClearButtonDestroy" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fudis-select-icons__container\">\n  <fudis-icon\n    *ngIf=\"\n      parentVariant !== 'autocompleteType' &&\n      (!clearButton || ((_controlValue | async) === false && !filterText))\n    \"\n    class=\"fudis-select-icons__icon\"\n    [class.fudis-select-icons__icon--disabled]=\"disabled\"\n    [icon]=\"'chevron'\"\n    [rotate]=\"dropdownOpen ? 'ccw-90' : 'cw-90'\"\n  />\n  <fudis-icon\n    *ngIf=\"\n      (parentVariant === 'autocompleteType' && !filterText && (_controlValue | async) === false) ||\n      (parentVariant === 'autocompleteType' && !clearButton)\n    \"\n    class=\"fudis-select-icons__icon\"\n    [class.fudis-select-icons__icon--disabled]=\"disabled\"\n    [icon]=\"'search'\"\n  />\n</div>\n\n<ng-container *ngIf=\"clearButton\">\n  <ng-container *ngIf=\"_translationClearFilterText | async as clearText\">\n    <fudis-button\n      [class.fudis-select-icons__icon--disabled]=\"disabled\"\n      [class.fudis-select-icons__icon--hidden]=\"\n        !(\n          (parentVariant === 'dropdown' && (_controlValue | async)) ||\n          (parentVariant === 'autocompleteDropdown' && (filterText || (_controlValue | async))) ||\n          (parentVariant === 'autocompleteType' && (filterText || (_controlValue | async)))\n        )\n      \"\n      (handleClick)=\"_clearButtonClick($event)\"\n      (handleDestroy)=\"handleClearButtonDestroy.emit()\"\n      (handleFocus)=\"_handleClearButtonFocus($event)\"\n      (handleBlur)=\"_handleClearButtonBlur($event)\"\n      [id]=\"parentId + '-clear-button'\"\n      [size]=\"'icon-only'\"\n      [variant]=\"'tertiary'\"\n      [icon]=\"'close'\"\n      [label]=\"clearText\"\n      [labelHidden]=\"true\"\n      [disabled]=\"disabled\"\n    />\n  </ng-container>\n</ng-container>\n", styles: [".fudis-select-icons__icon--disabled{pointer-events:none}.fudis-select-icons__icon--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "fudis-button", inputs: ["label", "variant", "size", "type", "labelHidden", "ariaLabel", "disabled", "icon", "iconRotate", "id", "asMenuButton"], outputs: ["handleClick", "handleFocus", "handleBlur", "handleDestroy"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectIconsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-select-icons', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"fudis-select-icons__container\">\n  <fudis-icon\n    *ngIf=\"\n      parentVariant !== 'autocompleteType' &&\n      (!clearButton || ((_controlValue | async) === false && !filterText))\n    \"\n    class=\"fudis-select-icons__icon\"\n    [class.fudis-select-icons__icon--disabled]=\"disabled\"\n    [icon]=\"'chevron'\"\n    [rotate]=\"dropdownOpen ? 'ccw-90' : 'cw-90'\"\n  />\n  <fudis-icon\n    *ngIf=\"\n      (parentVariant === 'autocompleteType' && !filterText && (_controlValue | async) === false) ||\n      (parentVariant === 'autocompleteType' && !clearButton)\n    \"\n    class=\"fudis-select-icons__icon\"\n    [class.fudis-select-icons__icon--disabled]=\"disabled\"\n    [icon]=\"'search'\"\n  />\n</div>\n\n<ng-container *ngIf=\"clearButton\">\n  <ng-container *ngIf=\"_translationClearFilterText | async as clearText\">\n    <fudis-button\n      [class.fudis-select-icons__icon--disabled]=\"disabled\"\n      [class.fudis-select-icons__icon--hidden]=\"\n        !(\n          (parentVariant === 'dropdown' && (_controlValue | async)) ||\n          (parentVariant === 'autocompleteDropdown' && (filterText || (_controlValue | async))) ||\n          (parentVariant === 'autocompleteType' && (filterText || (_controlValue | async)))\n        )\n      \"\n      (handleClick)=\"_clearButtonClick($event)\"\n      (handleDestroy)=\"handleClearButtonDestroy.emit()\"\n      (handleFocus)=\"_handleClearButtonFocus($event)\"\n      (handleBlur)=\"_handleClearButtonBlur($event)\"\n      [id]=\"parentId + '-clear-button'\"\n      [size]=\"'icon-only'\"\n      [variant]=\"'tertiary'\"\n      [icon]=\"'close'\"\n      [label]=\"clearText\"\n      [labelHidden]=\"true\"\n      [disabled]=\"disabled\"\n    />\n  </ng-container>\n</ng-container>\n", styles: [".fudis-select-icons__icon--disabled{pointer-events:none}.fudis-select-icons__icon--hidden{display:none}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }], propDecorators: { dropdownOpen: [{
                type: Input
            }], parentVariant: [{
                type: Input
            }], clearButton: [{
                type: Input
            }], disabled: [{
                type: Input
            }], filterText: [{
                type: Input
            }], parentControl: [{
                type: Input
            }], parentId: [{
                type: Input
            }], handleClearButtonClick: [{
                type: Output
            }], handleClearButtonFocus: [{
                type: Output
            }], handleClearButtonBlur: [{
                type: Output
            }], handleClearButtonDestroy: [{
                type: Output
            }] } });

class SelectComponent extends SelectBaseDirective {
    constructor(_document, _idService, _focusService) {
        super(_document, _focusService, _idService);
        /**
         * Value output event on selection change
         */
        this.selectionUpdate = new EventEmitter();
        /**
         * Create hashed option id for Select active descendant
         */
        this.activeDescendant = FudisIdService.createSelectOptionId;
    }
    ngOnInit() {
        this._setParentId('select');
    }
    /**
     * Handler for triggered option selection change
     *
     * @param value Option to be selected
     * @param disableSignalEmit Disable signal update to reduce unneeded state updates
     */
    handleSelectionChange(value) {
        // Check if option clicked is not the same as already selected one. If they are different, then trigger state changes in component and control values
        const equalValues = areObjectsDeepEquals(value, this.control.value);
        if (!equalValues) {
            this.control.patchValue(value);
            this.selectionUpdate.emit(value);
        }
    }
    /**
     * Checks if currently typed filter text is not same as control label value
     *
     * @param text Filter text value emitted from autocomplete
     */
    _checkIfAutocompleteValueNull(text) {
        if (this.control.value && text.toLowerCase() !== this.control.value?.label?.toLowerCase()) {
            this.selectionUpdate.emit(null);
            this.control.patchValue(null);
        }
    }
    /**
     * If control value is updated from the Application, update component's state accordingly
     */
    _updateComponentStateFromControlValue() {
        const currentLabel = this.control.value?.label;
        if (this.variant !== 'dropdown') {
            if (currentLabel) {
                this.setAutocompleteFilterText(currentLabel);
            }
            else if (!this._inputFocused) {
                this.setAutocompleteFilterText('');
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, deps: [{ token: DOCUMENT }, { token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectComponent, isStandalone: false, selector: "fudis-select", inputs: { control: "control" }, outputs: { selectionUpdate: "selectionUpdate" }, viewQueries: [{ propertyName: "selectCVA", first: true, predicate: SelectControlValueAccessorDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "@let dropdownOpen = _dropdownOpen();\n@let autocompleteFilterText = _autocompleteFilterText();\n\n<div class=\"fudis-select fudis-input-size__{{ size }}\" [id]=\"id + '-main-wrapper'\">\n  <fudis-label\n    [text]=\"label\"\n    [id]=\"id + '-label'\"\n    [for]=\"id + '-dropdown'\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  >\n  </fudis-label>\n  <div #selectRef>\n    <div class=\"fudis-select__input-wrapper fudis-input-size__{{ size }}\">\n      <input\n        #inputRef\n        fudisSelectControlValueAccessor\n        fudisSelectAutocomplete\n        [id]=\"id\"\n        [attr.id]=\"id\"\n        [formControl]=\"control\"\n        [class.fudis-select__input__dropdown]=\"variant === 'dropdown'\"\n        [class.fudis-select-autocomplete]=\"variant !== 'dropdown'\"\n        class=\"fudis-form-input fudis-select__input\"\n        [class.fudis-form-input--touched]=\"_afterViewInitDone() && control.touched\"\n        (click)=\"!control.disabled && !disabled && _clickInput()\"\n        (focus)=\"_selectInputFocus($event)\"\n        (blur)=\"_inputBlur($event)\"\n        (keydown)=\"_inputKeyDown($event)\"\n        (keyup)=\"_inputKeyUp($event)\"\n        [enableAutocomplete]=\"variant !== 'dropdown'\"\n        [selectedLabel]=\"control.value ? control.value.label : null\"\n        [typeThreshold]=\"variant === 'autocompleteType' ? 3 : 0\"\n        [filterText]=\"autocompleteFilterText\"\n        [clearButtonClick]=\"_clearButtonClickTrigger()\"\n        (handleDropdownOpen)=\"openDropdown()\"\n        (handleDropdownClose)=\"closeDropdown()\"\n        (handleClearButtonReset)=\"_clearButtonClickTrigger.set(false)\"\n        (handleFilterTextUpdate)=\"setAutocompleteFilterText($event)\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-haspopup=\"listbox\"\n        role=\"combobox\"\n        [attr.readonly]=\"variant === 'dropdown' ? true : null\"\n        [attr.aria-autocomplete]=\"variant === 'dropdown' ? null : 'list'\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-controls]=\"id + '-dropdown'\"\n        [attr.aria-activedescendant]=\"\n          control.value ? activeDescendant(id, control.value.label) : undefined\n        \"\n        [attr.tabindex]=\"!control.disabled && !disabled ? null : -1\"\n        [attr.aria-expanded]=\"dropdownOpen\"\n        [attr.aria-disabled]=\"control.disabled || disabled || null\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-labelledby]=\"id + '-label'\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n      />\n      <div #selectIconsRef class=\"fudis-select__input-wrapper__icons\">\n        <fudis-select-icons\n          [filterText]=\"!!autocompleteFilterText\"\n          [parentControl]=\"control\"\n          [parentVariant]=\"variant\"\n          [dropdownOpen]=\"dropdownOpen\"\n          [parentId]=\"id\"\n          (handleClearButtonClick)=\"_clearButtonClick()\"\n          (handleClearButtonFocus)=\"_setClearButtonFocusState($event, true)\"\n          (handleClearButtonBlur)=\"_setClearButtonFocusState($event, false)\"\n          (handleClearButtonDestroy)=\"_setClearButtonFocusFalse()\"\n          [clearButton]=\"selectionClearButton\"\n          [disabled]=\"control.disabled || disabled\"\n        />\n      </div>\n    </div>\n    <fudis-select-dropdown\n      *ngIf=\"_optionsLoadedOnce && !control.disabled && !disabled\"\n      #dropdownRef\n      [open]=\"dropdownOpen\"\n      [selectVariant]=\"variant\"\n      [results]=\"_visibleOptions.length\"\n      [autocompleteHelpText]=\"autocompleteHelpText\"\n      [autocompleteNoResultsText]=\"autocompleteNoResultsText\"\n      [filterText]=\"autocompleteFilterText\"\n      [size]=\"size\"\n      [parentId]=\"id\"\n      [size]=\"size\"\n      (handleBlur)=\"_dropdownBlur($event)\"\n      (handleFocus)=\"_dropdownFocus($event)\"\n    >\n      <ng-container *ngIf=\"_selectOptionsDirective\">\n        <ng-container *ngTemplateOutlet=\"_selectOptionsDirective!.templateRef\" />\n      </ng-container>\n    </fudis-select-dropdown>\n  </div>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n", styles: [".fudis-select{position:relative;width:100%}.fudis-select__input-wrapper{position:relative}.fudis-select__input-wrapper__icons{position:absolute;top:50%;right:calc(.25rem / var(--fudis-rem-multiplier));transform:translateY(-50%)}.fudis-select__input{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;border-radius:2px;box-sizing:border-box;padding:calc(.25rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier)) calc(.25rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier));max-height:calc(2.5rem / var(--fudis-rem-multiplier));overflow:hidden;text-overflow:ellipsis;line-height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-select__input::placeholder{color:#727272}.fudis-select__input:focus,.fudis-select__input:focus-visible{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-select__input__label,.fudis-select__input__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fudis-select__input__label--hidden,.fudis-select__input__placeholder--hidden{display:none}@media screen and (max-width: 35.99em){.fudis-select__input__label,.fudis-select__input__placeholder{max-width:calc(100vw - 5.5rem / var(--fudis-rem-multiplier))}}.fudis-select__input__placeholder{color:#727272}.fudis-select__input__dropdown{cursor:default;caret-color:transparent}.fudis-select.fudis-input-size__xs .fudis-select__input{padding-left:calc(.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "component", type: LabelComponent, selector: "fudis-label", inputs: ["id", "text", "for", "required", "parentSize"] }, { kind: "directive", type: SelectAutocompleteDirective, selector: "[fudisSelectAutocomplete]", inputs: ["selectedLabel"] }, { kind: "directive", type: SelectControlValueAccessorDirective, selector: "[fudisSelectControlValueAccessor]", inputs: ["filterText"] }, { kind: "component", type: SelectDropdownComponent, selector: "fudis-select-dropdown", inputs: ["selectVariant", "results", "autocompleteHelpText", "autocompleteNoResultsText", "filterText", "multiselect", "parentId", "size", "open"] }, { kind: "component", type: SelectIconsComponent, selector: "fudis-select-icons", inputs: ["dropdownOpen", "parentVariant", "clearButton", "disabled", "filterText", "parentControl", "parentId"], outputs: ["handleClearButtonClick", "handleClearButtonFocus", "handleClearButtonBlur", "handleClearButtonDestroy"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-select', encapsulation: ViewEncapsulation.None, standalone: false, template: "@let dropdownOpen = _dropdownOpen();\n@let autocompleteFilterText = _autocompleteFilterText();\n\n<div class=\"fudis-select fudis-input-size__{{ size }}\" [id]=\"id + '-main-wrapper'\">\n  <fudis-label\n    [text]=\"label\"\n    [id]=\"id + '-label'\"\n    [for]=\"id + '-dropdown'\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  >\n  </fudis-label>\n  <div #selectRef>\n    <div class=\"fudis-select__input-wrapper fudis-input-size__{{ size }}\">\n      <input\n        #inputRef\n        fudisSelectControlValueAccessor\n        fudisSelectAutocomplete\n        [id]=\"id\"\n        [attr.id]=\"id\"\n        [formControl]=\"control\"\n        [class.fudis-select__input__dropdown]=\"variant === 'dropdown'\"\n        [class.fudis-select-autocomplete]=\"variant !== 'dropdown'\"\n        class=\"fudis-form-input fudis-select__input\"\n        [class.fudis-form-input--touched]=\"_afterViewInitDone() && control.touched\"\n        (click)=\"!control.disabled && !disabled && _clickInput()\"\n        (focus)=\"_selectInputFocus($event)\"\n        (blur)=\"_inputBlur($event)\"\n        (keydown)=\"_inputKeyDown($event)\"\n        (keyup)=\"_inputKeyUp($event)\"\n        [enableAutocomplete]=\"variant !== 'dropdown'\"\n        [selectedLabel]=\"control.value ? control.value.label : null\"\n        [typeThreshold]=\"variant === 'autocompleteType' ? 3 : 0\"\n        [filterText]=\"autocompleteFilterText\"\n        [clearButtonClick]=\"_clearButtonClickTrigger()\"\n        (handleDropdownOpen)=\"openDropdown()\"\n        (handleDropdownClose)=\"closeDropdown()\"\n        (handleClearButtonReset)=\"_clearButtonClickTrigger.set(false)\"\n        (handleFilterTextUpdate)=\"setAutocompleteFilterText($event)\"\n        type=\"text\"\n        autocomplete=\"off\"\n        aria-haspopup=\"listbox\"\n        role=\"combobox\"\n        [attr.readonly]=\"variant === 'dropdown' ? true : null\"\n        [attr.aria-autocomplete]=\"variant === 'dropdown' ? null : 'list'\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-controls]=\"id + '-dropdown'\"\n        [attr.aria-activedescendant]=\"\n          control.value ? activeDescendant(id, control.value.label) : undefined\n        \"\n        [attr.tabindex]=\"!control.disabled && !disabled ? null : -1\"\n        [attr.aria-expanded]=\"dropdownOpen\"\n        [attr.aria-disabled]=\"control.disabled || disabled || null\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-labelledby]=\"id + '-label'\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n      />\n      <div #selectIconsRef class=\"fudis-select__input-wrapper__icons\">\n        <fudis-select-icons\n          [filterText]=\"!!autocompleteFilterText\"\n          [parentControl]=\"control\"\n          [parentVariant]=\"variant\"\n          [dropdownOpen]=\"dropdownOpen\"\n          [parentId]=\"id\"\n          (handleClearButtonClick)=\"_clearButtonClick()\"\n          (handleClearButtonFocus)=\"_setClearButtonFocusState($event, true)\"\n          (handleClearButtonBlur)=\"_setClearButtonFocusState($event, false)\"\n          (handleClearButtonDestroy)=\"_setClearButtonFocusFalse()\"\n          [clearButton]=\"selectionClearButton\"\n          [disabled]=\"control.disabled || disabled\"\n        />\n      </div>\n    </div>\n    <fudis-select-dropdown\n      *ngIf=\"_optionsLoadedOnce && !control.disabled && !disabled\"\n      #dropdownRef\n      [open]=\"dropdownOpen\"\n      [selectVariant]=\"variant\"\n      [results]=\"_visibleOptions.length\"\n      [autocompleteHelpText]=\"autocompleteHelpText\"\n      [autocompleteNoResultsText]=\"autocompleteNoResultsText\"\n      [filterText]=\"autocompleteFilterText\"\n      [size]=\"size\"\n      [parentId]=\"id\"\n      [size]=\"size\"\n      (handleBlur)=\"_dropdownBlur($event)\"\n      (handleFocus)=\"_dropdownFocus($event)\"\n    >\n      <ng-container *ngIf=\"_selectOptionsDirective\">\n        <ng-container *ngTemplateOutlet=\"_selectOptionsDirective!.templateRef\" />\n      </ng-container>\n    </fudis-select-dropdown>\n  </div>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n", styles: [".fudis-select{position:relative;width:100%}.fudis-select__input-wrapper{position:relative}.fudis-select__input-wrapper__icons{position:absolute;top:50%;right:calc(.25rem / var(--fudis-rem-multiplier));transform:translateY(-50%)}.fudis-select__input{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;border-radius:2px;box-sizing:border-box;padding:calc(.25rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier)) calc(.25rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier));max-height:calc(2.5rem / var(--fudis-rem-multiplier));overflow:hidden;text-overflow:ellipsis;line-height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-select__input::placeholder{color:#727272}.fudis-select__input:focus,.fudis-select__input:focus-visible{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-select__input__label,.fudis-select__input__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fudis-select__input__label--hidden,.fudis-select__input__placeholder--hidden{display:none}@media screen and (max-width: 35.99em){.fudis-select__input__label,.fudis-select__input__placeholder{max-width:calc(100vw - 5.5rem / var(--fudis-rem-multiplier))}}.fudis-select__input__placeholder{color:#727272}.fudis-select__input__dropdown{cursor:default;caret-color:transparent}.fudis-select.fudis-input-size__xs .fudis-select__input{padding-left:calc(.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: FudisIdService }, { type: FudisFocusService }], propDecorators: { selectCVA: [{
                type: ViewChild,
                args: [SelectControlValueAccessorDirective]
            }], control: [{
                type: Input,
                args: [{ required: true }]
            }], selectionUpdate: [{
                type: Output
            }] } });

class MultiselectChipListComponent {
    constructor() {
        /**
         * Output for removed chip index in selectedItems
         */
        this.handleClick = new EventEmitter();
        /**
         * If focus is in some of the chip buttons
         */
        this._focused = false;
    }
    /**
     * Focus setter
     */
    _setFocus(value) {
        this._focused = value;
    }
    /**
     * Focuses to the sibling and emits clicked index
     *
     * @param index Clicked index
     */
    _clickChip(clickedOption, index) {
        this.handleClick.emit(clickedOption);
        setTimeout(() => {
            if (index === 0 && this._chipListRef.nativeElement.children[0]) {
                this._chipListRef.nativeElement.children[0].focus();
            }
            else if (this._chipListRef.nativeElement.children[index - 1]) {
                this._chipListRef.nativeElement.children[index - 1].focus();
            }
        }, 50);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MultiselectChipListComponent, isStandalone: false, selector: "fudis-multiselect-chip-list", inputs: { selectedItems: "selectedItems", parentId: "parentId" }, outputs: { handleClick: "handleClick" }, viewQueries: [{ propertyName: "_chipListRef", first: true, predicate: ["chipListRef"], descendants: true }], ngImport: i0, template: "<ul #chipListRef class=\"fudis-multiselect-chip-list\" [attr.id]=\"parentId + '-selected-items'\">\n  <button\n    *ngFor=\"let item of selectedItems; let index = index\"\n    class=\"fudis-multiselect-chip-list__button\"\n    [attr.aria-describedby]=\"parentId + '-remove-items'\"\n    (focus)=\"_setFocus(true)\"\n    (blur)=\"_setFocus(false)\"\n    (click)=\"_focused && _clickChip(item, index)\"\n  >\n    <fudis-icon [icon]=\"'close'\" [color]=\"'white'\"></fudis-icon>\n    {{ item.label }}\n  </button>\n</ul>\n", styles: [".fudis-multiselect-chip-list{box-sizing:border-box;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(.25rem / var(--fudis-rem-multiplier));padding-top:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-multiselect-chip-list__button{background-color:#484848;color:#fff;text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;border:none;box-sizing:border-box;margin:0;padding:0;display:block;cursor:pointer;padding:0 calc(.5rem / var(--fudis-rem-multiplier)) 0 0}.fudis-multiselect-chip-list__button:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectChipListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-multiselect-chip-list', standalone: false, template: "<ul #chipListRef class=\"fudis-multiselect-chip-list\" [attr.id]=\"parentId + '-selected-items'\">\n  <button\n    *ngFor=\"let item of selectedItems; let index = index\"\n    class=\"fudis-multiselect-chip-list__button\"\n    [attr.aria-describedby]=\"parentId + '-remove-items'\"\n    (focus)=\"_setFocus(true)\"\n    (blur)=\"_setFocus(false)\"\n    (click)=\"_focused && _clickChip(item, index)\"\n  >\n    <fudis-icon [icon]=\"'close'\" [color]=\"'white'\"></fudis-icon>\n    {{ item.label }}\n  </button>\n</ul>\n", styles: [".fudis-multiselect-chip-list{box-sizing:border-box;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(.25rem / var(--fudis-rem-multiplier));padding-top:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-multiselect-chip-list__button{background-color:#484848;color:#fff;text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;border:none;box-sizing:border-box;margin:0;padding:0;display:block;cursor:pointer;padding:0 calc(.5rem / var(--fudis-rem-multiplier)) 0 0}.fudis-multiselect-chip-list__button:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}\n"] }]
        }], propDecorators: { _chipListRef: [{
                type: ViewChild,
                args: ['chipListRef']
            }], selectedItems: [{
                type: Input
            }], parentId: [{
                type: Input
            }], handleClick: [{
                type: Output
            }] } });

class MultiselectComponent extends SelectBaseDirective {
    constructor(_document, _translationService, _idService, _focusService) {
        super(_document, _focusService, _idService);
        this._translationService = _translationService;
        /**
         * Hide or show selection chips rendered below input
         */
        this.showSelectionChips = true;
        /**
         * Value output event on selection change
         */
        this.selectionUpdate = new EventEmitter();
        /**
         * When app language and option labels are changed, selected Multiselect Options push themselves
         * here, which will be then used to update visible UI labels managed by MultiselectCVA
         */
        this.selectedOptionsFromLangChange = [];
        /**
         * When selecting / deselecting options, variable for storing them in the order of their id's
         * (usually the DOM order)
         */
        this._sortedSelectedOptions = signal(null);
    }
    /**
     * Set component's id and subscribe to value changes for form control coming from application
     */
    ngOnInit() {
        this._setParentId('multiselect');
    }
    /**
     * Handler for adding / removing selections
     *
     * @param option FudisSelectOption to handle
     * @param type Add or remove multiselect option
     */
    handleMultiSelectionChange(option, type) {
        let updatedValue = this.control.value;
        if (type === 'remove' && updatedValue) {
            updatedValue = updatedValue.filter((item) => {
                return item.value !== option.value;
            });
        }
        else if (!updatedValue) {
            updatedValue = [option];
        }
        else if (type === 'add') {
            updatedValue.push(option);
        }
        if (updatedValue?.length === 0) {
            this.selectionUpdate.emit(null);
            this.control.patchValue(null);
        }
        else {
            this.selectionUpdate.emit(updatedValue);
            this.control.patchValue(updatedValue);
        }
    }
    _updateSortedSelectedOptions(newValue) {
        this._sortedSelectedOptions.set(newValue);
    }
    /**
     * Handle chip remove. If there are no selections done, focus back to input on last item removal.
     *
     * @param option Removed option
     */
    _handleRemoveChip(option) {
        this.handleMultiSelectionChange(option, 'remove');
        if (!this.control.value) {
            this._focusToSelectInput();
            this.setAutocompleteFilterText('');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectComponent, deps: [{ token: DOCUMENT }, { token: FudisTranslationService }, { token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MultiselectComponent, isStandalone: false, selector: "fudis-multiselect", inputs: { control: "control", showSelectionChips: "showSelectionChips" }, outputs: { selectionUpdate: "selectionUpdate" }, viewQueries: [{ propertyName: "_multiselectCVA", first: true, predicate: MultiselectControlValueAccessorDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "@let dropdownOpen = _dropdownOpen();\n@let sortedSelectedOptions = _sortedSelectedOptions();\n@let autocompleteFilterText = _autocompleteFilterText();\n\n<div\n  role=\"application\"\n  class=\"fudis-select fudis-input-size__{{ size }}\"\n  [id]=\"id + '-main-wrapper'\"\n>\n  <fudis-label\n    [text]=\"label\"\n    [id]=\"id + '-label'\"\n    [for]=\"id + '-dropdown'\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  >\n  </fudis-label>\n  <div #selectRef>\n    <div class=\"fudis-select__input-wrapper\">\n      <input\n        #inputRef\n        fudisMultiselectControlValueAccessor\n        fudisMultiselectAutocomplete\n        [id]=\"id\"\n        [formControl]=\"control\"\n        class=\"fudis-form-input fudis-select__input\"\n        [class.fudis-select__input__dropdown]=\"variant === 'dropdown'\"\n        [class.fudis-select-autocomplete]=\"variant !== 'dropdown'\"\n        [class.fudis-form-input--touched]=\"_afterViewInitDone() && control.touched\"\n        (click)=\"!control.disabled && !disabled && _clickInput()\"\n        (focus)=\"_selectInputFocus($event)\"\n        (blur)=\"_inputBlur($event)\"\n        (keydown)=\"_inputKeyDown($event)\"\n        (keyup)=\"_inputKeyUp($event)\"\n        [enableAutocomplete]=\"variant !== 'dropdown'\"\n        [typeThreshold]=\"variant === 'autocompleteType' ? 3 : 0\"\n        [clearButtonClick]=\"_clearButtonClickTrigger()\"\n        (handleSortedSelectedOptions)=\"_updateSortedSelectedOptions($event)\"\n        (handleClearButtonReset)=\"_clearButtonClickTrigger.set(false)\"\n        (handleDropdownOpen)=\"openDropdown()\"\n        (handleDropdownClose)=\"closeDropdown()\"\n        (handleFilterTextUpdate)=\"setAutocompleteFilterText($event)\"\n        type=\"text\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.id]=\"id\"\n        [attr.readonly]=\"variant === 'dropdown' ? true : null\"\n        [attr.aria-autocomplete]=\"variant === 'dropdown' ? null : 'list'\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-controls]=\"id + '-dropdown'\"\n        [attr.tabindex]=\"!control.disabled && !disabled ? null : -1\"\n        [attr.aria-expanded]=\"dropdownOpen\"\n        [attr.aria-disabled]=\"control.disabled || disabled\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-labelledby]=\"id + '-label'\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n      />\n      <div class=\"fudis-select__input-wrapper__icons\">\n        <fudis-select-icons\n          *ngIf=\"size !== 'xs'\"\n          [filterText]=\"!!autocompleteFilterText\"\n          [parentControl]=\"control\"\n          [parentVariant]=\"variant\"\n          [parentId]=\"id\"\n          [dropdownOpen]=\"dropdownOpen\"\n          (handleClearButtonClick)=\"_clearButtonClick()\"\n          (handleClearButtonFocus)=\"_setClearButtonFocusState($event, true)\"\n          (handleClearButtonBlur)=\"_setClearButtonFocusState($event, false)\"\n          [clearButton]=\"selectionClearButton\"\n          [disabled]=\"control.disabled || disabled\"\n        />\n      </div>\n    </div>\n    <fudis-select-dropdown\n      *ngIf=\"_optionsLoadedOnce && !control.disabled && !disabled\"\n      #dropdownRef\n      [open]=\"dropdownOpen\"\n      [selectVariant]=\"variant\"\n      [results]=\"_visibleOptions.length\"\n      [autocompleteNoResultsText]=\"autocompleteNoResultsText\"\n      [autocompleteHelpText]=\"autocompleteHelpText\"\n      [filterText]=\"autocompleteFilterText\"\n      [multiselect]=\"true\"\n      [parentId]=\"id\"\n      [size]=\"size\"\n    >\n      <ng-container *ngIf=\"_selectOptionsDirective\">\n        <ng-container *ngTemplateOutlet=\"_selectOptionsDirective!.templateRef\" />\n      </ng-container>\n    </fudis-select-dropdown>\n  </div>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\"\n  /></fudis-guidance>\n\n  <ng-container *ngIf=\"showSelectionChips && sortedSelectedOptions && control.enabled && !disabled\">\n    <span [attr.id]=\"id + '-remove-items'\" class=\"fudis-visually-hidden\">{{\n      _translationService.getTranslations()().SELECT.MULTISELECT.REMOVE_ITEM\n    }}</span>\n    <fudis-multiselect-chip-list\n      [selectedItems]=\"sortedSelectedOptions\"\n      [parentId]=\"id\"\n      (handleClick)=\"_handleRemoveChip($event)\"\n    />\n  </ng-container>\n</div>\n", styles: [".fudis-select{position:relative;width:100%}.fudis-select__input-wrapper{position:relative}.fudis-select__input-wrapper__icons{position:absolute;top:50%;right:calc(.25rem / var(--fudis-rem-multiplier));transform:translateY(-50%)}.fudis-select__input{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;border-radius:2px;box-sizing:border-box;padding:calc(.25rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier)) calc(.25rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier));max-height:calc(2.5rem / var(--fudis-rem-multiplier));overflow:hidden;text-overflow:ellipsis;line-height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-select__input::placeholder{color:#727272}.fudis-select__input:focus,.fudis-select__input:focus-visible{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-select__input__label,.fudis-select__input__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fudis-select__input__label--hidden,.fudis-select__input__placeholder--hidden{display:none}@media screen and (max-width: 35.99em){.fudis-select__input__label,.fudis-select__input__placeholder{max-width:calc(100vw - 5.5rem / var(--fudis-rem-multiplier))}}.fudis-select__input__placeholder{color:#727272}.fudis-select__input__dropdown{cursor:default;caret-color:transparent}.fudis-select.fudis-input-size__xs .fudis-select__input{padding-left:calc(.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "component", type: LabelComponent, selector: "fudis-label", inputs: ["id", "text", "for", "required", "parentSize"] }, { kind: "component", type: MultiselectChipListComponent, selector: "fudis-multiselect-chip-list", inputs: ["selectedItems", "parentId"], outputs: ["handleClick"] }, { kind: "directive", type: MultiselectAutocompleteDirective, selector: "[fudisMultiselectAutocomplete]" }, { kind: "directive", type: MultiselectControlValueAccessorDirective, selector: "[fudisMultiselectControlValueAccessor]", inputs: ["id", "enableAutocomplete"], outputs: ["handleSortedSelectedOptions"] }, { kind: "component", type: SelectDropdownComponent, selector: "fudis-select-dropdown", inputs: ["selectVariant", "results", "autocompleteHelpText", "autocompleteNoResultsText", "filterText", "multiselect", "parentId", "size", "open"] }, { kind: "component", type: SelectIconsComponent, selector: "fudis-select-icons", inputs: ["dropdownOpen", "parentVariant", "clearButton", "disabled", "filterText", "parentControl", "parentId"], outputs: ["handleClearButtonClick", "handleClearButtonFocus", "handleClearButtonBlur", "handleClearButtonDestroy"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-multiselect', standalone: false, template: "@let dropdownOpen = _dropdownOpen();\n@let sortedSelectedOptions = _sortedSelectedOptions();\n@let autocompleteFilterText = _autocompleteFilterText();\n\n<div\n  role=\"application\"\n  class=\"fudis-select fudis-input-size__{{ size }}\"\n  [id]=\"id + '-main-wrapper'\"\n>\n  <fudis-label\n    [text]=\"label\"\n    [id]=\"id + '-label'\"\n    [for]=\"id + '-dropdown'\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  >\n  </fudis-label>\n  <div #selectRef>\n    <div class=\"fudis-select__input-wrapper\">\n      <input\n        #inputRef\n        fudisMultiselectControlValueAccessor\n        fudisMultiselectAutocomplete\n        [id]=\"id\"\n        [formControl]=\"control\"\n        class=\"fudis-form-input fudis-select__input\"\n        [class.fudis-select__input__dropdown]=\"variant === 'dropdown'\"\n        [class.fudis-select-autocomplete]=\"variant !== 'dropdown'\"\n        [class.fudis-form-input--touched]=\"_afterViewInitDone() && control.touched\"\n        (click)=\"!control.disabled && !disabled && _clickInput()\"\n        (focus)=\"_selectInputFocus($event)\"\n        (blur)=\"_inputBlur($event)\"\n        (keydown)=\"_inputKeyDown($event)\"\n        (keyup)=\"_inputKeyUp($event)\"\n        [enableAutocomplete]=\"variant !== 'dropdown'\"\n        [typeThreshold]=\"variant === 'autocompleteType' ? 3 : 0\"\n        [clearButtonClick]=\"_clearButtonClickTrigger()\"\n        (handleSortedSelectedOptions)=\"_updateSortedSelectedOptions($event)\"\n        (handleClearButtonReset)=\"_clearButtonClickTrigger.set(false)\"\n        (handleDropdownOpen)=\"openDropdown()\"\n        (handleDropdownClose)=\"closeDropdown()\"\n        (handleFilterTextUpdate)=\"setAutocompleteFilterText($event)\"\n        type=\"text\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.id]=\"id\"\n        [attr.readonly]=\"variant === 'dropdown' ? true : null\"\n        [attr.aria-autocomplete]=\"variant === 'dropdown' ? null : 'list'\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-controls]=\"id + '-dropdown'\"\n        [attr.tabindex]=\"!control.disabled && !disabled ? null : -1\"\n        [attr.aria-expanded]=\"dropdownOpen\"\n        [attr.aria-disabled]=\"control.disabled || disabled\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-labelledby]=\"id + '-label'\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n      />\n      <div class=\"fudis-select__input-wrapper__icons\">\n        <fudis-select-icons\n          *ngIf=\"size !== 'xs'\"\n          [filterText]=\"!!autocompleteFilterText\"\n          [parentControl]=\"control\"\n          [parentVariant]=\"variant\"\n          [parentId]=\"id\"\n          [dropdownOpen]=\"dropdownOpen\"\n          (handleClearButtonClick)=\"_clearButtonClick()\"\n          (handleClearButtonFocus)=\"_setClearButtonFocusState($event, true)\"\n          (handleClearButtonBlur)=\"_setClearButtonFocusState($event, false)\"\n          [clearButton]=\"selectionClearButton\"\n          [disabled]=\"control.disabled || disabled\"\n        />\n      </div>\n    </div>\n    <fudis-select-dropdown\n      *ngIf=\"_optionsLoadedOnce && !control.disabled && !disabled\"\n      #dropdownRef\n      [open]=\"dropdownOpen\"\n      [selectVariant]=\"variant\"\n      [results]=\"_visibleOptions.length\"\n      [autocompleteNoResultsText]=\"autocompleteNoResultsText\"\n      [autocompleteHelpText]=\"autocompleteHelpText\"\n      [filterText]=\"autocompleteFilterText\"\n      [multiselect]=\"true\"\n      [parentId]=\"id\"\n      [size]=\"size\"\n    >\n      <ng-container *ngIf=\"_selectOptionsDirective\">\n        <ng-container *ngTemplateOutlet=\"_selectOptionsDirective!.templateRef\" />\n      </ng-container>\n    </fudis-select-dropdown>\n  </div>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\"\n  /></fudis-guidance>\n\n  <ng-container *ngIf=\"showSelectionChips && sortedSelectedOptions && control.enabled && !disabled\">\n    <span [attr.id]=\"id + '-remove-items'\" class=\"fudis-visually-hidden\">{{\n      _translationService.getTranslations()().SELECT.MULTISELECT.REMOVE_ITEM\n    }}</span>\n    <fudis-multiselect-chip-list\n      [selectedItems]=\"sortedSelectedOptions\"\n      [parentId]=\"id\"\n      (handleClick)=\"_handleRemoveChip($event)\"\n    />\n  </ng-container>\n</div>\n", styles: [".fudis-select{position:relative;width:100%}.fudis-select__input-wrapper{position:relative}.fudis-select__input-wrapper__icons{position:absolute;top:50%;right:calc(.25rem / var(--fudis-rem-multiplier));transform:translateY(-50%)}.fudis-select__input{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;border-radius:2px;box-sizing:border-box;padding:calc(.25rem / var(--fudis-rem-multiplier)) calc(2rem / var(--fudis-rem-multiplier)) calc(.25rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier));max-height:calc(2.5rem / var(--fudis-rem-multiplier));overflow:hidden;text-overflow:ellipsis;line-height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-select__input::placeholder{color:#727272}.fudis-select__input:focus,.fudis-select__input:focus-visible{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-select__input__label,.fudis-select__input__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fudis-select__input__label--hidden,.fudis-select__input__placeholder--hidden{display:none}@media screen and (max-width: 35.99em){.fudis-select__input__label,.fudis-select__input__placeholder{max-width:calc(100vw - 5.5rem / var(--fudis-rem-multiplier))}}.fudis-select__input__placeholder{color:#727272}.fudis-select__input__dropdown{cursor:default;caret-color:transparent}.fudis-select.fudis-input-size__xs .fudis-select__input{padding-left:calc(.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: FudisTranslationService }, { type: FudisIdService }, { type: FudisFocusService }], propDecorators: { _multiselectCVA: [{
                type: ViewChild,
                args: [MultiselectControlValueAccessorDirective]
            }], control: [{
                type: Input,
                args: [{ required: true }]
            }], showSelectionChips: [{
                type: Input
            }], selectionUpdate: [{
                type: Output
            }] } });

class SelectGroupComponent {
    constructor(_idService, _parentSelect, _parentMultiselect) {
        this._idService = _idService;
        this._parentSelect = _parentSelect;
        this._parentMultiselect = _parentMultiselect;
        /**
         * Used when filtering autocomplete results to check if 'No results found' text is visible
         */
        this._visibleOptions = [];
        if (_parentSelect) {
            this.id = this._idService.getNewGroupId('select', this._parentSelect.id);
        }
        else if (_parentMultiselect) {
            this.id = this._idService.getNewGroupId('multiselect', this._parentMultiselect.id);
        }
    }
    /**
     * Called from SelectOption and MultiselectOption to set if the option is visible or not
     *
     * @param value Value of option
     * @param visible State of option's visibility
     */
    setOptionVisibility(value, visible) {
        this._visibleOptions = setVisibleOptionsList(this._visibleOptions, value, visible);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectGroupComponent, deps: [{ token: FudisIdService }, { token: SelectComponent, host: true, optional: true }, { token: MultiselectComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectGroupComponent, isStandalone: false, selector: "fudis-select-group, fudis-multiselect-group", inputs: { label: "label" }, ngImport: i0, template: "<div\n  class=\"fudis-select-group\"\n  [class.fudis-select-group--hidden]=\"_visibleOptions.length === 0\"\n  [attr.aria-labelledby]=\"id\"\n  role=\"group\"\n>\n  <span class=\"fudis-select-group__label\" [attr.aria-hidden]=\"true\" [attr.id]=\"id\">{{\n    label\n  }}</span>\n  <ng-content></ng-content>\n</div>\n", styles: [".fudis-select-group__label{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:300;color:#727272;box-sizing:border-box;display:flex;align-items:center;border-top:1px solid #d4d4d4;padding-left:calc(.5rem / var(--fudis-rem-multiplier));min-height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-select-group--hidden{display:none;visibility:hidden}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-select-group, fudis-multiselect-group', standalone: false, template: "<div\n  class=\"fudis-select-group\"\n  [class.fudis-select-group--hidden]=\"_visibleOptions.length === 0\"\n  [attr.aria-labelledby]=\"id\"\n  role=\"group\"\n>\n  <span class=\"fudis-select-group__label\" [attr.aria-hidden]=\"true\" [attr.id]=\"id\">{{\n    label\n  }}</span>\n  <ng-content></ng-content>\n</div>\n", styles: [".fudis-select-group__label{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:300;color:#727272;box-sizing:border-box;display:flex;align-items:center;border-top:1px solid #d4d4d4;padding-left:calc(.5rem / var(--fudis-rem-multiplier));min-height:calc(2rem / var(--fudis-rem-multiplier))}.fudis-select-group--hidden{display:none;visibility:hidden}\n"] }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: SelectComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: MultiselectComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }], propDecorators: { label: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class SelectOptionBaseDirective extends DropdownItemBaseDirective {
    constructor(_document, _parentGroup, _translationService, _idService) {
        super(_document);
        this._parentGroup = _parentGroup;
        this._translationService = _translationService;
        this._idService = _idService;
        /**
         * State of option visibility
         */
        this._optionVisible = true;
        /**
         * Focus state
         */
        this._focused = false;
    }
    /**
     * Get visibility status of this option
     */
    get visible() {
        return this._optionVisible;
    }
    /**
     * User focus handler
     */
    _focus() {
        this._focused = true;
        this._parent.setFocusedOption(this._id, 'add');
    }
    /**
     * For autocompletes, compare if current filter text is contained in this option's label. If not,
     * hide the option from the dropdown list.
     *
     * @param filterText Autocomplete filter text from parent
     */
    _isOptionVisible(filterText) {
        if (this.data) {
            const labelMatch = filterText && this.data.label.toLowerCase().includes(filterText.toLowerCase())
                ? true
                : !filterText;
            const subLabelMatch = filterText && this.data.subLabel?.toLowerCase().includes(filterText.toLowerCase())
                ? true
                : !filterText;
            this._optionVisible = labelMatch || subLabelMatch;
            this._updateVisibilityToParents(this._optionVisible);
        }
    }
    /**
     * Update option visibility to parent component
     */
    _updateVisibilityToParents(visible) {
        this._parent.setOptionVisibility(this._id, visible);
        if (this._parentGroup) {
            this._parentGroup.setOptionVisibility(this._id, visible);
        }
    }
    /**
     * Handler for keydown keyboard events
     *
     * @param event Keyboard event
     */
    _keyDown(event) {
        event.preventDefault();
        if ((event.key === 'Enter' || event.key === ' ') && !this.data.disabled) {
            this._clickOption(event);
        }
        else if (event.key === 'Tab') {
            this._parent.focusToInput();
            this._parent.closeDropdown();
        }
        else if (event.key !== ' ') {
            this._baseHandleKeyDown(event, this._optionInputRef, this._parent.focusSelector);
        }
    }
    /**
     * Handler for blurring out from focused option
     *
     * @param event FocusEvent to emit
     */
    _blur(event) {
        this._focused = false;
        this._parent.setFocusedOption(this._id, 'remove');
        this.handleBlur.emit(event);
        this._parent.componentFocused(event).then((value) => {
            if (!value) {
                this._parent.closeDropdown(false);
            }
        });
    }
    /**
     * Boilerplate function to be overriden by SelectOption's and MultiselectOption's own
     * implementations
     */
    // eslint-disable-next-line
    _checkVisibilityFromFilterText(filterText) { }
    /**
     * Boilerplate function to be overriden by SelectOption's and MultiselectOption's own
     * implementations
     */
    // eslint-disable-next-line
    _clickOption(event) { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionBaseDirective, deps: [{ token: DOCUMENT }, { token: SelectGroupComponent, host: true, optional: true }, { token: FudisTranslationService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SelectOptionBaseDirective, isStandalone: false, selector: "[fudisSelectOptionBase]", inputs: { data: "data" }, viewQueries: [{ propertyName: "_optionInputRef", first: true, predicate: ["optionInputRef"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisSelectOptionBase]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: SelectGroupComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: FudisTranslationService }, { type: FudisIdService }], propDecorators: { _optionInputRef: [{
                type: ViewChild,
                args: ['optionInputRef']
            }], data: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class SelectOptionComponent extends SelectOptionBaseDirective {
    constructor(_document, _parentSelect, _parentGroup, _translationService, _idService) {
        super(_document, _parentGroup, _translationService, _idService);
        this._parentSelect = _parentSelect;
        this._parent = _parentSelect;
        toObservable(this._parent.getAutocompleteFilterText())
            .pipe(takeUntilDestroyed())
            .subscribe((filterText) => {
            this._checkVisibilityFromFilterText(filterText);
        });
    }
    ngOnChanges(changes) {
        if (changes.data?.currentValue !== changes.data?.previousValue) {
            const newOptionId = this._idService.getNewSelectOptionId(this.data.label, 'select', this._parent.id, this._parentGroup?.id);
            if (this._id && this._id !== newOptionId)
                this.clearParentOptionVisibility();
            this._id = newOptionId;
            this._checkVisibilityFromFilterText(this._parent.getAutocompleteFilterText()());
            if (changes.data?.currentValue && changes.data.currentValue !== changes.data.previousValue) {
                this._checkIfLabelRequiresUpdate(changes.data.currentValue);
            }
        }
    }
    ngOnDestroy() {
        this.clearParentOptionVisibility();
    }
    clearParentOptionVisibility() {
        this._parentSelect.setOptionVisibility(this._id, false);
        this._parentGroup?.setOptionVisibility(this._id, false);
    }
    /**
     * Click handler for Select Option click
     *
     * @param event Event emitted
     */
    _clickOption(event) {
        if (!this.data.disabled) {
            this._parentSelect.handleSelectionChange(this.data);
            this.handleClick.emit(event);
        }
        this._parent.closeDropdown(true, true);
    }
    _checkVisibilityFromFilterText(filterText) {
        if (this._parent.variant !== 'dropdown' && this._parent.autocompleteFilter) {
            this._isOptionVisible(filterText);
            this._isOptionTyped(filterText);
        }
        else {
            this._isOptionVisible('');
        }
    }
    /**
     * When option is changed, it will not change Form Control's value, which is intended, but visible
     * label should be updated
     */
    _checkIfLabelRequiresUpdate(newData) {
        const controlValue = this._parent?.control.value;
        if (controlValue?.value === newData.value) {
            this._parent.selectCVA?.writeValue(newData);
            this._parent.setAutocompleteFilterText(newData.label, false);
        }
    }
    /**
     * Used with autocomplete to check if filter text matches this option. If yes, then trigger
     * selection change in the parent
     *
     * @param filterText Autocomplete filter text from parent
     */
    _isOptionTyped(filterText) {
        if (!this.data?.disabled && this.data?.label?.toLowerCase() === filterText?.toLowerCase()) {
            if (this._parent.control.value?.value !== this.data.value) {
                this._parentSelect.handleSelectionChange(this.data);
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionComponent, deps: [{ token: DOCUMENT }, { token: SelectComponent, host: true }, { token: SelectGroupComponent, host: true, optional: true }, { token: FudisTranslationService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SelectOptionComponent, isStandalone: false, selector: "fudis-select-option", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!--\n\tSingleselect option\n-->\n<div\n  #optionInputRef\n  class=\"fudis-select-option\"\n  [class.fudis-select-option__focusable]=\"_optionVisible\"\n  [class.fudis-select-option__xs]=\"_parent.size === 'xs'\"\n  [class.fudis-select-option--disabled]=\"data.disabled\"\n  [class.fudis-select-option--selected]=\"_parentSelect.control.value?.value === data.value\"\n  [attr.aria-selected]=\"_parentSelect.control.value?.value === data.value\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"_id\"\n  [attr.aria-disabled]=\"data.disabled || null\"\n  (focus)=\"_focus()\"\n  (keydown)=\"_keyDown($event)\"\n  (blur)=\"_blur($event)\"\n  (click)=\"!data.disabled && _clickOption($event)\"\n>\n  <div class=\"fudis-select-option__label\">\n    <span class=\"fudis-select-option__label__main\">{{ data.label }}</span>\n    <span *ngIf=\"data.subLabel\" class=\"fudis-select-option__label__sub\">{{ data.subLabel }}</span>\n  </div>\n  <fudis-icon\n    *ngIf=\"!data.disabled && _parentSelect.control.value?.value === data.value\"\n    [icon]=\"_parent.size === 'xs' ? 'check-small' : 'check'\"\n    [color]=\"'primary'\"\n  />\n  <span *ngIf=\"data.disabled\" class=\"fudis-select-option__label fudis-select-option__disabled-text\">\n    ({{ _translationService.getTranslations()().SELECT.DISABLED }})</span\n  >\n</div>\n", styles: [".fudis-select-option{box-sizing:border-box;margin:0;padding:0;text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;background-color:transparent;color:#484848;border:none;display:flex;position:relative;align-items:flex-start;justify-content:space-between;cursor:pointer;padding-left:calc(1rem / var(--fudis-rem-multiplier));width:100%;min-height:calc(2rem / var(--fudis-rem-multiplier));overflow:hidden;text-align:left}.fudis-select-option:not(.fudis-select-option__focusable){display:none;visibility:hidden}.fudis-select-option:not([aria-disabled=true]):hover{background-color:var(--fudis-color-primary-light)}.fudis-select-option:not([aria-disabled=true]):focus-visible,.fudis-select-option:not([aria-disabled=true]):focus{background-color:var(--fudis-color-primary-light);outline:2px dashed #484848;outline-offset:-2px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-select-option:not([aria-disabled=true]):active{background-color:var(--fudis-color-primary);color:#fff}.fudis-select-option--disabled{background-color:#f1f1f1;color:#727272;cursor:default}.fudis-select-option__xs{align-items:center;padding:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-select-option__focusable,.fudis-select-option--visible{display:flex;visibility:visible}.fudis-select-option__disabled-text{padding-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-select-option__label{margin:calc(.5rem / var(--fudis-rem-multiplier)) 0;line-height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-select-option__label__main{display:block}.fudis-select-option__label__sub{text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;display:block;margin-top:calc(.25rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-select-option', standalone: false, template: "<!--\n\tSingleselect option\n-->\n<div\n  #optionInputRef\n  class=\"fudis-select-option\"\n  [class.fudis-select-option__focusable]=\"_optionVisible\"\n  [class.fudis-select-option__xs]=\"_parent.size === 'xs'\"\n  [class.fudis-select-option--disabled]=\"data.disabled\"\n  [class.fudis-select-option--selected]=\"_parentSelect.control.value?.value === data.value\"\n  [attr.aria-selected]=\"_parentSelect.control.value?.value === data.value\"\n  role=\"option\"\n  tabindex=\"-1\"\n  [attr.id]=\"_id\"\n  [attr.aria-disabled]=\"data.disabled || null\"\n  (focus)=\"_focus()\"\n  (keydown)=\"_keyDown($event)\"\n  (blur)=\"_blur($event)\"\n  (click)=\"!data.disabled && _clickOption($event)\"\n>\n  <div class=\"fudis-select-option__label\">\n    <span class=\"fudis-select-option__label__main\">{{ data.label }}</span>\n    <span *ngIf=\"data.subLabel\" class=\"fudis-select-option__label__sub\">{{ data.subLabel }}</span>\n  </div>\n  <fudis-icon\n    *ngIf=\"!data.disabled && _parentSelect.control.value?.value === data.value\"\n    [icon]=\"_parent.size === 'xs' ? 'check-small' : 'check'\"\n    [color]=\"'primary'\"\n  />\n  <span *ngIf=\"data.disabled\" class=\"fudis-select-option__label fudis-select-option__disabled-text\">\n    ({{ _translationService.getTranslations()().SELECT.DISABLED }})</span\n  >\n</div>\n", styles: [".fudis-select-option{box-sizing:border-box;margin:0;padding:0;text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;background-color:transparent;color:#484848;border:none;display:flex;position:relative;align-items:flex-start;justify-content:space-between;cursor:pointer;padding-left:calc(1rem / var(--fudis-rem-multiplier));width:100%;min-height:calc(2rem / var(--fudis-rem-multiplier));overflow:hidden;text-align:left}.fudis-select-option:not(.fudis-select-option__focusable){display:none;visibility:hidden}.fudis-select-option:not([aria-disabled=true]):hover{background-color:var(--fudis-color-primary-light)}.fudis-select-option:not([aria-disabled=true]):focus-visible,.fudis-select-option:not([aria-disabled=true]):focus{background-color:var(--fudis-color-primary-light);outline:2px dashed #484848;outline-offset:-2px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-select-option:not([aria-disabled=true]):active{background-color:var(--fudis-color-primary);color:#fff}.fudis-select-option--disabled{background-color:#f1f1f1;color:#727272;cursor:default}.fudis-select-option__xs{align-items:center;padding:calc(.25rem / var(--fudis-rem-multiplier))}.fudis-select-option__focusable,.fudis-select-option--visible{display:flex;visibility:visible}.fudis-select-option__disabled-text{padding-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-select-option__label{margin:calc(.5rem / var(--fudis-rem-multiplier)) 0;line-height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-select-option__label__main{display:block}.fudis-select-option__label__sub{text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;display:block;margin-top:calc(.25rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: SelectComponent, decorators: [{
                    type: Host
                }] }, { type: SelectGroupComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: FudisTranslationService }, { type: FudisIdService }] });

class LocalizedTextGroupComponent extends GroupComponentBaseDirective {
    constructor(_translationService, _idService, _focusService) {
        super(_idService, _focusService);
        this._translationService = _translationService;
        /**
         * Option list for language Selection. To pair controls with corresponding Select option,
         * FormControl's name must match with the controlName defined here. E.g. by default "{controlName:
         * 'en', label: 'EN'}" pairs with Form Group's "en: new FormControl('')"
         */
        this.options = [
            { controlName: 'fi', label: 'FI' },
            { controlName: 'sv', label: 'SV' },
            { controlName: 'en', label: 'EN' },
        ];
        /**
         * Available sizes for the input - defaults to large.
         */
        this.size = 'lg';
        /**
         * Form element to display. Defaults to text-input
         */
        this.variant = 'text-input';
        /**
         * Min length for HTML attribute and for character indicator in guidance
         */
        this._minLength = new BehaviorSubject(null);
        /**
         * Max length for HTML attribute and for character indicator in guidance
         */
        this._maxLength = new BehaviorSubject(null);
        /**
         * Control for language option Select
         */
        this._selectControl = new FormControl(null);
        /**
         * Updated options list after changes
         */
        this._selectOptions = [];
        /**
         * Fudis translation
         */
        this._languageLabel = new BehaviorSubject(this._translationService.getTranslations()().INPUT_WITH_LANGUAGE_OPTIONS.LANGUAGE);
        effect(() => {
            const translations = _translationService.getTranslations()();
            this._languageLabel.next(translations.INPUT_WITH_LANGUAGE_OPTIONS.LANGUAGE);
            this._missingLanguage = translations.INPUT_WITH_LANGUAGE_OPTIONS.MISSING;
            if (this.options) {
                this._updateSelectOptions();
            }
        });
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.formGroup && this._selectControl.value) {
                this._checkHtmlAttributes(this._selectControl.value.value);
                this._updateSelectOptions();
            }
        });
    }
    /**
     * When Form Control value changes, update Select Options accordingly with or without Missing text
     */
    _updateSelectOptions() {
        const newOptions = [];
        this.options.forEach((option) => {
            let newOption = null;
            if (this.formGroup.controls[option.controlName].invalid ||
                !this.formGroup.controls[option.controlName].value) {
                newOption = {
                    value: option.controlName,
                    label: `${option.label} (${this._missingLanguage})`,
                };
            }
            else {
                newOption = { value: option.controlName, label: option.label };
            }
            newOptions.push(newOption);
            if (option.controlName === this._selectControl?.value?.value) {
                this._selectControl.patchValue(newOption);
            }
        });
        this._selectOptions = newOptions;
    }
    /**
     * On init and when Select option changes, check if now visible input should be marked as
     * required.
     */
    _isInputRequired(control) {
        const groupRequiredError = this.formGroup?.errors?.['oneRequired'];
        const controlRequiredValidator = FudisValidatorUtilities.required(control);
        const groupRequiredValidator = FudisValidatorUtilities.oneRequiredOrMin(this.formGroup);
        const nonEmptyControls = Object.keys(this.formGroup.controls).filter((control) => {
            return this.formGroup.controls[control].value;
        });
        if (controlRequiredValidator ||
            groupRequiredError ||
            (nonEmptyControls.length === 1 && control.value && groupRequiredValidator)) {
            return true;
        }
        return false;
    }
    _checkHtmlAttributes(controlName) {
        const control = this.formGroup.controls[controlName];
        this._minLength.next(FudisValidatorUtilities.minLength(control));
        this._maxLength.next(FudisValidatorUtilities.maxLength(control));
        this._required.next(this._isInputRequired(control));
    }
    ngOnInit() {
        this._setComponentId('localized-text-group');
    }
    ngOnChanges(changes) {
        if (changes.formGroup?.currentValue !== changes.formGroup?.previousValue) {
            this._subscription?.unsubscribe();
            this._subscription = this.formGroup.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(() => this._updateValueAndValidityTrigger.next());
            this._updateSelectOptions();
            this._selectControl.patchValue(this._selectOptions[0]);
            this._checkHtmlAttributes(this._selectOptions[0].value);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalizedTextGroupComponent, deps: [{ token: FudisTranslationService }, { token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LocalizedTextGroupComponent, isStandalone: false, selector: "fudis-localized-text-group", inputs: { formGroup: "formGroup", options: "options", size: "size", variant: "variant" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p *ngIf=\"_selectControl.value\" [attr.id]=\"id + '-group-label'\" class=\"fudis-visually-hidden\">{{\n  label\n}}</p>\n<div\n  *ngIf=\"_selectControl.value\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"id + '-group-label'\"\n  class=\"fudis-localized-text-group fudis-input-size__{{ size }}\"\n>\n  <div class=\"fudis-localized-text-group__inputs\">\n    <fudis-label\n      [for]=\"id\"\n      [text]=\"label\"\n      [id]=\"id + '-label'\"\n      [required]=\"_required | async\"\n      [parentSize]=\"size\"\n      [popoverText]=\"popoverText\"\n      [popoverPosition]=\"popoverPosition\"\n      [popoverTriggerLabel]=\"popoverTriggerLabel\"\n    />\n    <ng-container *ngFor=\"let control of formGroup.controls | keyvalue; let index = index\">\n      <input\n        *ngIf=\"variant === 'text-input' && control.key === _selectControl.value.value\"\n        #inputRef\n        class=\"fudis-form-input fudis-localized-text-group__inputs__text\"\n        [class.fudis-form-input--touched]=\"\n          $any(formGroup).controls[control.key].touched || formGroup.touched\n        \"\n        [attr.aria-invalid]=\"(formGroup.invalid && formGroup.touched) || null\"\n        [attr.aria-label]=\"\n          ariaLabel\n            ? label + ', ' + _selectControl.value.label + ariaLabel\n            : label + ', ' + _selectControl.value.label\n        \"\n        [attr.minlength]=\"_minLength | async\"\n        [attr.maxlength]=\"_maxLength | async\"\n        [formControl]=\"$any(formGroup).controls[control.key]\"\n        (keyup)=\"_updateSelectOptions(); handleKeyUp.emit($event)\"\n        (blur)=\"handleBlur.emit($event)\"\n        (focus)=\"onFocus($event)\"\n        [id]=\"id\"\n        [attr.tabindex]=\"disabled ? -1 : null\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-disabled]=\"\n          formGroup.disabled || $any(formGroup).controls[control.key].disabled || disabled || null\n        \"\n        [readonly]=\"\n          formGroup.disabled || $any(formGroup).controls[control.key].disabled || disabled || null\n        \"\n      />\n      <textarea\n        #inputRef\n        *ngIf=\"variant === 'text-area' && control.key === _selectControl.value.value\"\n        class=\"fudis-form-input fudis-localized-text-group__inputs__area\"\n        [class.fudis-form-input--touched]=\"\n          $any(formGroup).controls[control.key].touched || formGroup.touched\n        \"\n        [attr.aria-invalid]=\"(formGroup.invalid && formGroup.touched) || null\"\n        [attr.aria-label]=\"\n          ariaLabel\n            ? label + ', ' + _selectControl.value.label + ariaLabel\n            : label + ', ' + _selectControl.value.label\n        \"\n        [attr.minlength]=\"_minLength | async\"\n        [attr.maxlength]=\"_maxLength | async\"\n        [formControl]=\"$any(formGroup).controls[control.key]\"\n        (keyup)=\"_updateSelectOptions(); handleKeyUp.emit($event)\"\n        (blur)=\"handleBlur.emit($event)\"\n        (focus)=\"onFocus($event)\"\n        [id]=\"id\"\n        [attr.tabindex]=\"disabled ? -1 : null\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-disabled]=\"$any(formGroup).controls[control.key].disabled || disabled || null\"\n        [readonly]=\"$any(formGroup).controls[control.key].disabled || disabled || null\"\n      >\n      </textarea>\n    </ng-container>\n    <fudis-guidance\n      *ngIf=\"!disableGuidance\"\n      [inputLabel]=\"label\"\n      [maxLength]=\"_maxLength | async\"\n      [helpText]=\"helpText\"\n      [formGroup]=\"formGroup\"\n      [for]=\"id\"\n      [selectedOption]=\"_selectControl.value.value\"\n    >\n      <ng-content select=\"fudis-error-message\"\n    /></fudis-guidance>\n  </div>\n  <fudis-select\n    *ngIf=\"_languageLabel | async as label\"\n    class=\"fudis-localized-text-group__select\"\n    [disabled]=\"this.formGroup.disabled || disabled\"\n    [label]=\"label\"\n    [selectionClearButton]=\"false\"\n    (selectionUpdate)=\"_checkHtmlAttributes($event?.value)\"\n    [control]=\"_selectControl\"\n    [size]=\"'xs'\"\n    [id]=\"id + '_language-select'\"\n  >\n    <ng-template fudisSelectOptions>\n      <fudis-select-option\n        *ngFor=\"let option of _selectOptions\"\n        [data]=\"{ value: option.value, label: option.label, disabled: option.disabled }\"\n      />\n    </ng-template>\n  </fudis-select>\n</div>\n", styles: [".fudis-localized-text-group{box-sizing:border-box;margin:0;padding:0;display:flex;align-items:baseline}.fudis-localized-text-group__inputs{margin-right:calc(.25rem / var(--fudis-rem-multiplier));width:100%}.fudis-localized-text-group__inputs__text{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;border-radius:2px;box-sizing:border-box;padding:calc(.25rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-localized-text-group__inputs__text:focus{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-localized-text-group__inputs__area{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;box-sizing:border-box;display:block;padding:calc(.25rem / var(--fudis-rem-multiplier));width:100%;height:calc(5rem / var(--fudis-rem-multiplier));resize:vertical}.fudis-localized-text-group__inputs__area:focus{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-localized-text-group__select{min-width:calc(5.75rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "component", type: LabelComponent, selector: "fudis-label", inputs: ["id", "text", "for", "required", "parentSize"] }, { kind: "component", type: SelectComponent, selector: "fudis-select", inputs: ["control"], outputs: ["selectionUpdate"] }, { kind: "directive", type: SelectOptionsDirective, selector: "[fudisSelectOptions]" }, { kind: "component", type: SelectOptionComponent, selector: "fudis-select-option" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalizedTextGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-localized-text-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<p *ngIf=\"_selectControl.value\" [attr.id]=\"id + '-group-label'\" class=\"fudis-visually-hidden\">{{\n  label\n}}</p>\n<div\n  *ngIf=\"_selectControl.value\"\n  role=\"group\"\n  [attr.aria-labelledby]=\"id + '-group-label'\"\n  class=\"fudis-localized-text-group fudis-input-size__{{ size }}\"\n>\n  <div class=\"fudis-localized-text-group__inputs\">\n    <fudis-label\n      [for]=\"id\"\n      [text]=\"label\"\n      [id]=\"id + '-label'\"\n      [required]=\"_required | async\"\n      [parentSize]=\"size\"\n      [popoverText]=\"popoverText\"\n      [popoverPosition]=\"popoverPosition\"\n      [popoverTriggerLabel]=\"popoverTriggerLabel\"\n    />\n    <ng-container *ngFor=\"let control of formGroup.controls | keyvalue; let index = index\">\n      <input\n        *ngIf=\"variant === 'text-input' && control.key === _selectControl.value.value\"\n        #inputRef\n        class=\"fudis-form-input fudis-localized-text-group__inputs__text\"\n        [class.fudis-form-input--touched]=\"\n          $any(formGroup).controls[control.key].touched || formGroup.touched\n        \"\n        [attr.aria-invalid]=\"(formGroup.invalid && formGroup.touched) || null\"\n        [attr.aria-label]=\"\n          ariaLabel\n            ? label + ', ' + _selectControl.value.label + ariaLabel\n            : label + ', ' + _selectControl.value.label\n        \"\n        [attr.minlength]=\"_minLength | async\"\n        [attr.maxlength]=\"_maxLength | async\"\n        [formControl]=\"$any(formGroup).controls[control.key]\"\n        (keyup)=\"_updateSelectOptions(); handleKeyUp.emit($event)\"\n        (blur)=\"handleBlur.emit($event)\"\n        (focus)=\"onFocus($event)\"\n        [id]=\"id\"\n        [attr.tabindex]=\"disabled ? -1 : null\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-disabled]=\"\n          formGroup.disabled || $any(formGroup).controls[control.key].disabled || disabled || null\n        \"\n        [readonly]=\"\n          formGroup.disabled || $any(formGroup).controls[control.key].disabled || disabled || null\n        \"\n      />\n      <textarea\n        #inputRef\n        *ngIf=\"variant === 'text-area' && control.key === _selectControl.value.value\"\n        class=\"fudis-form-input fudis-localized-text-group__inputs__area\"\n        [class.fudis-form-input--touched]=\"\n          $any(formGroup).controls[control.key].touched || formGroup.touched\n        \"\n        [attr.aria-invalid]=\"(formGroup.invalid && formGroup.touched) || null\"\n        [attr.aria-label]=\"\n          ariaLabel\n            ? label + ', ' + _selectControl.value.label + ariaLabel\n            : label + ', ' + _selectControl.value.label\n        \"\n        [attr.minlength]=\"_minLength | async\"\n        [attr.maxlength]=\"_maxLength | async\"\n        [formControl]=\"$any(formGroup).controls[control.key]\"\n        (keyup)=\"_updateSelectOptions(); handleKeyUp.emit($event)\"\n        (blur)=\"handleBlur.emit($event)\"\n        (focus)=\"onFocus($event)\"\n        [id]=\"id\"\n        [attr.tabindex]=\"disabled ? -1 : null\"\n        [attr.aria-describedby]=\"id + '_guidance'\"\n        [attr.required]=\"(_required | async) || null\"\n        [attr.aria-disabled]=\"$any(formGroup).controls[control.key].disabled || disabled || null\"\n        [readonly]=\"$any(formGroup).controls[control.key].disabled || disabled || null\"\n      >\n      </textarea>\n    </ng-container>\n    <fudis-guidance\n      *ngIf=\"!disableGuidance\"\n      [inputLabel]=\"label\"\n      [maxLength]=\"_maxLength | async\"\n      [helpText]=\"helpText\"\n      [formGroup]=\"formGroup\"\n      [for]=\"id\"\n      [selectedOption]=\"_selectControl.value.value\"\n    >\n      <ng-content select=\"fudis-error-message\"\n    /></fudis-guidance>\n  </div>\n  <fudis-select\n    *ngIf=\"_languageLabel | async as label\"\n    class=\"fudis-localized-text-group__select\"\n    [disabled]=\"this.formGroup.disabled || disabled\"\n    [label]=\"label\"\n    [selectionClearButton]=\"false\"\n    (selectionUpdate)=\"_checkHtmlAttributes($event?.value)\"\n    [control]=\"_selectControl\"\n    [size]=\"'xs'\"\n    [id]=\"id + '_language-select'\"\n  >\n    <ng-template fudisSelectOptions>\n      <fudis-select-option\n        *ngFor=\"let option of _selectOptions\"\n        [data]=\"{ value: option.value, label: option.label, disabled: option.disabled }\"\n      />\n    </ng-template>\n  </fudis-select>\n</div>\n", styles: [".fudis-localized-text-group{box-sizing:border-box;margin:0;padding:0;display:flex;align-items:baseline}.fudis-localized-text-group__inputs{margin-right:calc(.25rem / var(--fudis-rem-multiplier));width:100%}.fudis-localized-text-group__inputs__text{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;border-radius:2px;box-sizing:border-box;padding:calc(.25rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));width:100%;height:calc(2.5rem / var(--fudis-rem-multiplier))}.fudis-localized-text-group__inputs__text:focus{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-localized-text-group__inputs__area{line-height:calc(1.25rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(1rem / var(--fudis-rem-multiplier));font-weight:300;box-sizing:border-box;display:block;padding:calc(.25rem / var(--fudis-rem-multiplier));width:100%;height:calc(5rem / var(--fudis-rem-multiplier));resize:vertical}.fudis-localized-text-group__inputs__area:focus{border:1px solid #1076db;outline:2px solid #1076db;outline-offset:-2px;box-shadow:0 0 0 1px #fff}.fudis-localized-text-group__select{min-width:calc(5.75rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: FudisTranslationService }, { type: FudisIdService }, { type: FudisFocusService }], propDecorators: { formGroup: [{
                type: Input,
                args: [{ required: true }]
            }], options: [{
                type: Input
            }], size: [{
                type: Input
            }], variant: [{
                type: Input
            }] } });

class MultiselectOptionComponent extends SelectOptionBaseDirective {
    static { this.instanceCounter = 0; }
    constructor(_document, _parentMultiselect, _parentGroup, _idService, _translationService) {
        super(_document, _parentGroup, _translationService, _idService);
        this._parentMultiselect = _parentMultiselect;
        MultiselectOptionComponent.instanceCounter++;
        this.componentInstanceId = MultiselectOptionComponent.instanceCounter.toString();
        this._parent = this._parentMultiselect;
        _parentMultiselect.control.valueChanges.pipe(takeUntilDestroyed()).subscribe((newValue) => {
            this._isOptionChecked(newValue);
        });
        toObservable(this._parent.getAutocompleteFilterText())
            .pipe(takeUntilDestroyed())
            .subscribe((filterText) => {
            this._checkVisibilityFromFilterText(filterText);
        });
    }
    ngOnChanges(changes) {
        if (changes.data?.currentValue !== changes.data?.previousValue) {
            const newOptionId = this._idService.getNewSelectOptionId(this.data.label, 'multiselect', this._parent.id, this._parentGroup?.id);
            if (this._id && this._id !== newOptionId)
                this.clearParentOptionVisibility();
            this._id = newOptionId;
            this._checkVisibilityFromFilterText(this._parent.getAutocompleteFilterText()());
            const parentControlValue = this._parentMultiselect.control.value;
            if (parentControlValue && parentControlValue.length !== 0) {
                this._isOptionChecked(parentControlValue);
            }
            else {
                this.checked = false;
            }
            if (changes.data?.currentValue && changes.data.currentValue !== changes.data.previousValue) {
                this._checkIfLabelRequiresUpdate(changes.data?.currentValue);
            }
        }
    }
    ngOnDestroy() {
        this.clearParentOptionVisibility();
    }
    clearParentOptionVisibility() {
        this._parentMultiselect.setOptionVisibility(this._id, false);
        this._parentGroup?.setOptionVisibility(this._id, false);
    }
    /**
     * Click handler for clicking the option
     *
     * @param event Event
     */
    _clickOption(event) {
        if (!this.data.disabled) {
            if (!this.checked) {
                this._parentMultiselect.handleMultiSelectionChange(this.data, 'add');
            }
            else {
                this._parentMultiselect.handleMultiSelectionChange(this.data, 'remove');
            }
            this.handleClick.emit(event);
            this.handleChecked.emit();
        }
    }
    _checkVisibilityFromFilterText(filterText) {
        if (this._parent.variant !== 'dropdown' && this._parent.autocompleteFilter) {
            this._isOptionVisible(filterText);
        }
        else {
            this._isOptionVisible('');
        }
    }
    /**
     * Checks if this option is checked or not and updates parents state accordingly
     *
     * @param options Currently selected options
     */
    _isOptionChecked(options) {
        if (this.data) {
            const result = options?.find((option) => option.value === this.data.value);
            this.checked = !!result;
        }
    }
    /**
     * When option is changed, it will not change Form Control's value, which is intended, but visible
     * label should be updated
     */
    _checkIfLabelRequiresUpdate(newData) {
        const controlValue = this._parent?.control.value;
        const foundMatch = controlValue?.find((selectedOption) => {
            return selectedOption.value === newData.value;
        });
        if (foundMatch) {
            this._parent.selectedOptionsFromLangChange.push(newData);
            if (this._parent.selectedOptionsFromLangChange.length === this._parent.control.value?.length) {
                this._parent._multiselectCVA?.writeValue(this._parent.selectedOptionsFromLangChange);
                this._parent.selectedOptionsFromLangChange = [];
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectOptionComponent, deps: [{ token: DOCUMENT }, { token: MultiselectComponent, host: true }, { token: SelectGroupComponent, host: true, optional: true }, { token: FudisIdService }, { token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MultiselectOptionComponent, isStandalone: false, selector: "fudis-multiselect-option", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"fudis-multiselect-option\"\n  [attr.id]=\"_id\"\n  tabindex=\"-1\"\n  [class.fudis-multiselect-option--visible]=\"_optionVisible\"\n  [class.fudis-multiselect-option--checked]=\"checked\"\n  [class.fudis-multiselect-option--focused]=\"_focused\"\n  [class.fudis-multiselect-option--disabled]=\"data.disabled\"\n>\n  <label\n    [attr.for]=\"_id + '-checkbox-input-' + componentInstanceId\"\n    class=\"fudis-multiselect-option__label\"\n    [class.fudis-multiselect-option__label--focus]=\"_focused\"\n    [class.fudis-multiselect-option__label--checked]=\"checked\"\n  >\n    <div\n      class=\"fudis-multiselect-option__label__checkbox\"\n      [class.fudis-multiselect-option__label__checkbox--disabled]=\"data.disabled\"\n    >\n      <input\n        #optionInputRef\n        [class.fudis-select-option__focusable]=\"_optionVisible\"\n        type=\"checkbox\"\n        class=\"fudis-multiselect-option__label__checkbox__input\"\n        role=\"option\"\n        [attr.id]=\"_id + '-checkbox-input-' + componentInstanceId\"\n        [attr.aria-disabled]=\"data.disabled || null\"\n        (click)=\"!data.disabled && _clickOption($event)\"\n        [attr.aria-selected]=\"checked\"\n        (focus)=\"_focus()\"\n        (keydown)=\"_keyDown($event)\"\n        (blur)=\"_blur($event)\"\n      />\n      <fudis-icon\n        class=\"fudis-multiselect-option__label__checkbox__icon\"\n        *ngIf=\"checked\"\n        [icon]=\"'check'\"\n      />\n    </div>\n    <div class=\"fudis-multiselect-option__label__text\">\n      <span class=\"fudis-multiselect-option__label__text__main\">{{ data.label }}</span>\n      <span *ngIf=\"data.subLabel\" class=\"fudis-multiselect-option__label__text__sub\">{{\n        data.subLabel\n      }}</span>\n\n      <span *ngIf=\"data.disabled\" class=\"fudis-multiselect-option__label__text__disabled\">\n        ({{ _translationService.getTranslations()().SELECT.DISABLED }})</span\n      >\n    </div>\n  </label>\n</div>\n", styles: [".fudis-multiselect-option{color:#484848;width:auto}.fudis-multiselect-option:not(.fudis-multiselect-option--visible){display:none;visibility:hidden}.fudis-multiselect-option:hover:not(:has(.fudis-multiselect-option__label__checkbox__input[aria-disabled=true])){background-color:var(--fudis-color-primary-light)}.fudis-multiselect-option__disabled-text{padding-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label{text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;display:flex;align-items:flex-start;margin-bottom:0;padding:calc(.5rem / var(--fudis-rem-multiplier)) calc(.5rem / var(--fudis-rem-multiplier)) calc(.5rem / var(--fudis-rem-multiplier)) 0}.fudis-multiselect-option__label__checkbox{border:1px solid #727272;background-color:#fff;display:flex;position:absolute;align-items:center;justify-content:center;margin-left:calc(.5rem / var(--fudis-rem-multiplier));border-radius:0;cursor:pointer;width:calc(1rem / var(--fudis-rem-multiplier));height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label__checkbox--disabled{border:1px dashed #727272;background-color:#f1f1f1;cursor:default}.fudis-multiselect-option__label__checkbox__icon{transform:scale(.85)}.fudis-multiselect-option__label__checkbox__input{box-sizing:border-box;margin:0;padding:0;appearance:none;display:grid;position:absolute;place-content:center}.fudis-multiselect-option__label__checkbox__input:not([aria-disabled=true]):focus{outline:2px solid var(--fudis-color-primary);outline-offset:-2px;outline-offset:-1px;width:calc(1.25rem / var(--fudis-rem-multiplier));height:calc(1.25rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label__text{position:relative;margin-left:calc(2rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label__text__main{display:block}.fudis-multiselect-option__label__text__sub{text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;display:block;margin-top:2px;margin-bottom:2px}.fudis-multiselect-option__label__text__disabled{display:block}.fudis-multiselect-option--checked{color:#fff;background-color:var(--fudis-color-primary)}.fudis-multiselect-option--checked:hover{color:#484848}.fudis-multiselect-option--disabled{background-color:#f1f1f1;color:#727272;cursor:default}.fudis-multiselect-option--focused{background-color:var(--fudis-color-primary-light);color:#484848}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MultiselectOptionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-multiselect-option', standalone: false, template: "<div\n  class=\"fudis-multiselect-option\"\n  [attr.id]=\"_id\"\n  tabindex=\"-1\"\n  [class.fudis-multiselect-option--visible]=\"_optionVisible\"\n  [class.fudis-multiselect-option--checked]=\"checked\"\n  [class.fudis-multiselect-option--focused]=\"_focused\"\n  [class.fudis-multiselect-option--disabled]=\"data.disabled\"\n>\n  <label\n    [attr.for]=\"_id + '-checkbox-input-' + componentInstanceId\"\n    class=\"fudis-multiselect-option__label\"\n    [class.fudis-multiselect-option__label--focus]=\"_focused\"\n    [class.fudis-multiselect-option__label--checked]=\"checked\"\n  >\n    <div\n      class=\"fudis-multiselect-option__label__checkbox\"\n      [class.fudis-multiselect-option__label__checkbox--disabled]=\"data.disabled\"\n    >\n      <input\n        #optionInputRef\n        [class.fudis-select-option__focusable]=\"_optionVisible\"\n        type=\"checkbox\"\n        class=\"fudis-multiselect-option__label__checkbox__input\"\n        role=\"option\"\n        [attr.id]=\"_id + '-checkbox-input-' + componentInstanceId\"\n        [attr.aria-disabled]=\"data.disabled || null\"\n        (click)=\"!data.disabled && _clickOption($event)\"\n        [attr.aria-selected]=\"checked\"\n        (focus)=\"_focus()\"\n        (keydown)=\"_keyDown($event)\"\n        (blur)=\"_blur($event)\"\n      />\n      <fudis-icon\n        class=\"fudis-multiselect-option__label__checkbox__icon\"\n        *ngIf=\"checked\"\n        [icon]=\"'check'\"\n      />\n    </div>\n    <div class=\"fudis-multiselect-option__label__text\">\n      <span class=\"fudis-multiselect-option__label__text__main\">{{ data.label }}</span>\n      <span *ngIf=\"data.subLabel\" class=\"fudis-multiselect-option__label__text__sub\">{{\n        data.subLabel\n      }}</span>\n\n      <span *ngIf=\"data.disabled\" class=\"fudis-multiselect-option__label__text__disabled\">\n        ({{ _translationService.getTranslations()().SELECT.DISABLED }})</span\n      >\n    </div>\n  </label>\n</div>\n", styles: [".fudis-multiselect-option{color:#484848;width:auto}.fudis-multiselect-option:not(.fudis-multiselect-option--visible){display:none;visibility:hidden}.fudis-multiselect-option:hover:not(:has(.fudis-multiselect-option__label__checkbox__input[aria-disabled=true])){background-color:var(--fudis-color-primary-light)}.fudis-multiselect-option__disabled-text{padding-right:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label{text-transform:initial;line-height:calc(1.125rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.875rem / var(--fudis-rem-multiplier));font-weight:400;display:flex;align-items:flex-start;margin-bottom:0;padding:calc(.5rem / var(--fudis-rem-multiplier)) calc(.5rem / var(--fudis-rem-multiplier)) calc(.5rem / var(--fudis-rem-multiplier)) 0}.fudis-multiselect-option__label__checkbox{border:1px solid #727272;background-color:#fff;display:flex;position:absolute;align-items:center;justify-content:center;margin-left:calc(.5rem / var(--fudis-rem-multiplier));border-radius:0;cursor:pointer;width:calc(1rem / var(--fudis-rem-multiplier));height:calc(1rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label__checkbox--disabled{border:1px dashed #727272;background-color:#f1f1f1;cursor:default}.fudis-multiselect-option__label__checkbox__icon{transform:scale(.85)}.fudis-multiselect-option__label__checkbox__input{box-sizing:border-box;margin:0;padding:0;appearance:none;display:grid;position:absolute;place-content:center}.fudis-multiselect-option__label__checkbox__input:not([aria-disabled=true]):focus{outline:2px solid var(--fudis-color-primary);outline-offset:-2px;outline-offset:-1px;width:calc(1.25rem / var(--fudis-rem-multiplier));height:calc(1.25rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label__text{position:relative;margin-left:calc(2rem / var(--fudis-rem-multiplier))}.fudis-multiselect-option__label__text__main{display:block}.fudis-multiselect-option__label__text__sub{text-transform:initial;line-height:calc(1rem / var(--fudis-rem-multiplier));font-family:Fira Sans,sans-serif;font-size:calc(.75rem / var(--fudis-rem-multiplier));font-weight:400;display:block;margin-top:2px;margin-bottom:2px}.fudis-multiselect-option__label__text__disabled{display:block}.fudis-multiselect-option--checked{color:#fff;background-color:var(--fudis-color-primary)}.fudis-multiselect-option--checked:hover{color:#484848}.fudis-multiselect-option--disabled{background-color:#f1f1f1;color:#727272;cursor:default}.fudis-multiselect-option--focused{background-color:var(--fudis-color-primary-light);color:#484848}\n"] }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: MultiselectComponent, decorators: [{
                    type: Host
                }] }, { type: SelectGroupComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: FudisIdService }, { type: FudisTranslationService }] });

class RadioButtonGroupComponent extends ControlComponentBaseDirective {
    constructor(_document, _focusService, _idService) {
        super(_idService, _focusService);
        this._document = _document;
        /**
         * Width of Radio Button Group
         */
        this.size = 'lg';
        /**
         * Emit form control and changed option when one option is clicked
         */
        this.handleChange = new EventEmitter();
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.control) {
                this._required.next(FudisValidatorUtilities.required(this.control));
            }
        });
    }
    ngOnInit() {
        this._setParentComponentId('radio-button-group');
        this._updateValueAndValidityTrigger.next();
    }
    /**
     * Add value and validity check when control value changes
     */
    ngOnChanges(changes) {
        if (changes.control?.currentValue !== changes.control?.previousValue) {
            this._subscription?.unsubscribe();
            this._subscription = this.control.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(() => this._updateValueAndValidityTrigger.next());
        }
    }
    ngAfterViewInit() {
        super.ngAfterViewInit();
        /**
         * For Screen reader users bind guidance text to first radio child input
         */
        const firstRadio = this._getFirstEnabledRadio();
        const guidanceId = this._guidance?.['_id'];
        if (firstRadio && guidanceId) {
            firstRadio.setAttribute('aria-describedby', guidanceId);
        }
    }
    /**
     * Return first radio child input when it is not disabled
     */
    _getFirstEnabledRadio() {
        const radioIds = this._idService.getAllChildrenIds('radio-button-group', this.id);
        if (!radioIds?.length)
            return null;
        const radio = this._document.getElementById(radioIds[0]);
        if (!(radio instanceof HTMLInputElement) || radio.disabled) {
            return null;
        }
        return radio;
    }
    triggerEmit(id, label) {
        const data = {
            option: {
                id: id,
                label: label,
                value: this.control?.value,
            },
            control: this.control,
        };
        this.handleChange.emit(data);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioButtonGroupComponent, deps: [{ token: DOCUMENT }, { token: FudisFocusService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RadioButtonGroupComponent, isStandalone: false, selector: "fudis-radio-button-group", inputs: { size: "size" }, outputs: { handleChange: "handleChange" }, viewQueries: [{ propertyName: "_guidance", first: true, predicate: ["radioButtonGroupGuidance"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fudis-fieldset\n  class=\"fudis-radio-button-group\"\n  [id]=\"id\"\n  [labelSize]=\"'sm'\"\n  [label]=\"label\"\n  [required]=\"_required | async\"\n  [errorSummaryBreadcrumb]=\"false\"\n  [inputSize]=\"size\"\n  [popoverText]=\"popoverText\"\n  [popoverPosition]=\"popoverPosition\"\n  [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  [initialFocus]=\"initialFocus\"\n  [syncLegendHeight]=\"true\"\n>\n  <fudis-fieldset-content>\n    <ng-content select=\"fudis-radio-button\" />\n    <fudis-guidance\n      #radioButtonGroupGuidance\n      *ngIf=\"control && !disableGuidance\"\n      [inputLabel]=\"label\"\n      [helpText]=\"helpText\"\n      [for]=\"id + '-legend'\"\n      [control]=\"control\"\n      [groupHelpTextHidden]=\"true\"\n    >\n      <ng-content select=\"fudis-error-message\" />\n    </fudis-guidance>\n  </fudis-fieldset-content>\n</fudis-fieldset>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldsetContentDirective, selector: "fudis-fieldset-content" }, { kind: "component", type: FieldSetComponent, selector: "fudis-fieldset", inputs: ["label", "width", "inputSize", "align", "initialFocus", "errorSummaryBreadcrumb", "required", "labelSize", "id", "helpText", "syncLegendHeight"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-radio-button-group', standalone: false, template: "<fudis-fieldset\n  class=\"fudis-radio-button-group\"\n  [id]=\"id\"\n  [labelSize]=\"'sm'\"\n  [label]=\"label\"\n  [required]=\"_required | async\"\n  [errorSummaryBreadcrumb]=\"false\"\n  [inputSize]=\"size\"\n  [popoverText]=\"popoverText\"\n  [popoverPosition]=\"popoverPosition\"\n  [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  [initialFocus]=\"initialFocus\"\n  [syncLegendHeight]=\"true\"\n>\n  <fudis-fieldset-content>\n    <ng-content select=\"fudis-radio-button\" />\n    <fudis-guidance\n      #radioButtonGroupGuidance\n      *ngIf=\"control && !disableGuidance\"\n      [inputLabel]=\"label\"\n      [helpText]=\"helpText\"\n      [for]=\"id + '-legend'\"\n      [control]=\"control\"\n      [groupHelpTextHidden]=\"true\"\n    >\n      <ng-content select=\"fudis-error-message\" />\n    </fudis-guidance>\n  </fudis-fieldset-content>\n</fudis-fieldset>\n" }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: FudisFocusService }, { type: FudisIdService }], propDecorators: { _guidance: [{
                type: ViewChild,
                args: ['radioButtonGroupGuidance']
            }], size: [{
                type: Input
            }], handleChange: [{
                type: Output
            }] } });

class RadioButtonComponent {
    constructor(_idService, _parentGroup) {
        this._idService = _idService;
        this._parentGroup = _parentGroup;
        /**
         * Emits changed Radio button option and form control.
         */
        this.handleChange = new EventEmitter();
    }
    /**
     * Selected Radio Button change
     */
    _onChange() {
        const optionToEmit = {
            id: this._id,
            label: this.label,
            value: this._parentGroup?.control.value,
        };
        /**
         * This Radio button's emit
         */
        this.handleChange.emit({ option: optionToEmit, control: this._parentGroup.control });
        /**
         * Call parent's function, which triggers Radio Button Group's emit
         */
        this._parentGroup.triggerEmit(this._id, this.label);
    }
    ngOnInit() {
        if (this._id) {
            this._idService.addNewChildId('radio-button-group', this._parentGroup.id, this._id);
        }
        else {
            this._id = this._idService.getNewChildId('radio-button-group', this._parentGroup.id);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioButtonComponent, deps: [{ token: FudisIdService }, { token: RadioButtonGroupComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RadioButtonComponent, isStandalone: false, selector: "fudis-radio-button", inputs: { value: "value", label: "label" }, outputs: { handleChange: "handleChange" }, ngImport: i0, template: "<ng-container *ngIf=\"_parentGroup?.control\">\n  <label\n    class=\"fudis-radio-button\"\n    [attr.for]=\"_id\"\n    [class.fudis-radio-button--disabled]=\"_parentGroup.disabled\"\n  >\n    <input\n      type=\"radio\"\n      class=\"fudis-radio-button__input\"\n      [class.fudis-radio-button__input--disabled]=\"\n        _parentGroup.control.disabled || _parentGroup.disabled || null\n      \"\n      [id]=\"_id\"\n      [formControl]=\"_parentGroup.control\"\n      [value]=\"value\"\n      [name]=\"_parentGroup.id\"\n      [attr.tabindex]=\"_parentGroup.control.disabled || _parentGroup.disabled ? -1 : null\"\n      [attr.aria-disabled]=\"_parentGroup.control.disabled || _parentGroup.disabled || null\"\n      [attr.aria-invalid]=\"(_parentGroup.control.touched && _parentGroup.control.invalid) || null\"\n      (focus)=\"_parentGroup.onFocus($event)\"\n      (keyup)=\"_parentGroup.handleKeyUp.emit($event)\"\n      (blur)=\"_parentGroup.handleBlur.emit($event)\"\n      (change)=\"_onChange()\"\n    />\n    <div class=\"fudis-radio-button__content\">\n      <div class=\"fudis-radio-button__content-wrapper\">\n        <div\n          class=\"fudis-radio-button__content__control\"\n          [class.fudis-radio-button__content__control--invalid]=\"\n            _parentGroup.control.touched && _parentGroup.control.invalid\n          \"\n          [class.fudis-radio-button__content__control--disabled]=\"\n            _parentGroup.control.disabled || _parentGroup.disabled\n          \"\n        >\n          <span\n            *ngIf=\"_parentGroup.control.value === value\"\n            class=\"fudis-radio-button__content__control__indicator\"\n          ></span>\n        </div>\n      </div>\n      <span class=\"fudis-radio-button__label\">{{ label }}</span>\n    </div>\n  </label>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-radio-button', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container *ngIf=\"_parentGroup?.control\">\n  <label\n    class=\"fudis-radio-button\"\n    [attr.for]=\"_id\"\n    [class.fudis-radio-button--disabled]=\"_parentGroup.disabled\"\n  >\n    <input\n      type=\"radio\"\n      class=\"fudis-radio-button__input\"\n      [class.fudis-radio-button__input--disabled]=\"\n        _parentGroup.control.disabled || _parentGroup.disabled || null\n      \"\n      [id]=\"_id\"\n      [formControl]=\"_parentGroup.control\"\n      [value]=\"value\"\n      [name]=\"_parentGroup.id\"\n      [attr.tabindex]=\"_parentGroup.control.disabled || _parentGroup.disabled ? -1 : null\"\n      [attr.aria-disabled]=\"_parentGroup.control.disabled || _parentGroup.disabled || null\"\n      [attr.aria-invalid]=\"(_parentGroup.control.touched && _parentGroup.control.invalid) || null\"\n      (focus)=\"_parentGroup.onFocus($event)\"\n      (keyup)=\"_parentGroup.handleKeyUp.emit($event)\"\n      (blur)=\"_parentGroup.handleBlur.emit($event)\"\n      (change)=\"_onChange()\"\n    />\n    <div class=\"fudis-radio-button__content\">\n      <div class=\"fudis-radio-button__content-wrapper\">\n        <div\n          class=\"fudis-radio-button__content__control\"\n          [class.fudis-radio-button__content__control--invalid]=\"\n            _parentGroup.control.touched && _parentGroup.control.invalid\n          \"\n          [class.fudis-radio-button__content__control--disabled]=\"\n            _parentGroup.control.disabled || _parentGroup.disabled\n          \"\n        >\n          <span\n            *ngIf=\"_parentGroup.control.value === value\"\n            class=\"fudis-radio-button__content__control__indicator\"\n          ></span>\n        </div>\n      </div>\n      <span class=\"fudis-radio-button__label\">{{ label }}</span>\n    </div>\n  </label>\n</ng-container>\n" }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: RadioButtonGroupComponent, decorators: [{
                    type: Host
                }] }], propDecorators: { value: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], handleChange: [{
                type: Output
            }] } });

class SectionComponent extends PopoverApiDirective {
    constructor(_element, _idService, _errorSummaryService) {
        super();
        this._element = _element;
        this._idService = _idService;
        this._errorSummaryService = _errorSummaryService;
        /**
         * Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
         *
         * - Xxl = Default value. Viewports of 1600px and larger
         * - Xl = Viewports smaller than 1600px
         * - Lg = Viewports smaller than 1200px
         * - Md = Viewports smaller than 992px
         * - Sm = Viewports smaller than 768px
         * - Xs = Viewports smaller than 576px
         */
        this.width = 'initial';
        /**
         * Alignment of Grid component inside its parent
         */
        this.align = 'start';
        /**
         * Is section title shown in error summary breadcrumb
         */
        this.errorSummaryBreadcrumb = false;
        /**
         * Section CSS class list
         */
        this._classList = new BehaviorSubject('');
        /**
         * Is info sent to error summary service
         */
        this._errorSummaryInfoSent = false;
    }
    ngOnInit() {
        this._setSectionId();
        if (!this.titleVariant) {
            this.titleVariant = getHeadingVariant(this.level);
        }
        this._headingId = `${this.id}-heading`;
        this._classList.next(this._getClasses());
        this._addToErrorSummary();
    }
    ngAfterContentInit() {
        this._errorSummaryService
            .getFormAncestorId(this._element.nativeElement)
            .then((parentFormId) => {
            if (parentFormId) {
                this._parentFormId = parentFormId;
                this._addToErrorSummary();
            }
        });
    }
    ngOnChanges(changes) {
        if (changes.classes?.currentValue !== changes.classes?.previousValue) {
            this._classList.next(this._getClasses());
        }
        if (changes.title?.currentValue !== changes.title?.previousValue && this.id) {
            this._addToErrorSummary();
        }
    }
    ngOnDestroy() {
        this._removeFromErrorSummary();
    }
    /**
     * Send error object to Error Summary Service
     */
    _addToErrorSummary() {
        if (this.errorSummaryBreadcrumb && this._parentFormId) {
            const errorSummaryInfo = {
                id: this.id,
                formId: this._parentFormId,
                title: this.title,
            };
            this._errorSummaryService.addSection(errorSummaryInfo);
            this._errorSummaryInfoSent = true;
        }
    }
    /**
     * Remove error object from Error Summary Service
     */
    _removeFromErrorSummary() {
        if (this._errorSummaryInfoSent && this._parentFormId) {
            this._errorSummaryService.removeSection(this._parentFormId, this.id);
        }
    }
    /**
     * Set main CSS class with possible custom classes
     */
    _getClasses() {
        if (this.classes) {
            return `fudis-section ${this.classes}`;
        }
        else {
            return 'fudis-section';
        }
    }
    /**
     * Generate id with Id Service
     */
    _setSectionId() {
        if (this.id) {
            this._idService.addNewId('section', this.id);
        }
        else {
            this.id = this._idService.getNewId('section');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionComponent, deps: [{ token: i0.ElementRef }, { token: FudisIdService }, { token: FudisInternalErrorSummaryService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SectionComponent, isStandalone: false, selector: "fudis-section", inputs: { title: "title", level: "level", titleVariant: "titleVariant", id: "id", badge: "badge", badgeText: "badgeText", width: "width", align: "align", classes: "classes", errorSummaryBreadcrumb: "errorSummaryBreadcrumb" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section\n  *ngIf=\"_classList | async as classes\"\n  fudisGrid\n  [id]=\"id\"\n  [tabIndex]=\"-1\"\n  [attr.aria-labelledby]=\"_headingId\"\n  [align]=\"align\"\n  [width]=\"width\"\n  [classes]=\"classes\"\n  [rowGap]=\"'none'\"\n  [serviceDefaults]=\"false\"\n>\n  <div class=\"fudis-section__header\" [id]=\"_headingId\">\n    <div class=\"fudis-section__header__container\">\n      <div class=\"fudis-section__header__heading\">\n        <fudis-heading class=\"fudis-mb-none\" [level]=\"level\" [variant]=\"titleVariant\"\n          >{{ title\n          }}<fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-section__header__heading__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n        /></fudis-heading>\n        <fudis-button\n          *ngIf=\"popoverTriggerLabel && popoverText\"\n          class=\"fudis-section__header__heading__popover\"\n          [size]=\"'icon-only'\"\n          [variant]=\"'tertiary'\"\n          [icon]=\"'info-circle'\"\n          [labelHidden]=\"true\"\n          [label]=\"popoverTriggerLabel\"\n          [popoverPosition]=\"popoverPosition\"\n          [popoverText]=\"popoverText\"\n        />\n      </div>\n      <ng-content select=\"fudis-section-actions\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"fudis-section-content\"></ng-content>\n</section>\n", styles: [".fudis-section{box-sizing:border-box;padding:0}.fudis-section__header__heading{display:flex;align-items:center}.fudis-section__header__heading__badge,.fudis-section__header__heading__popover{margin-left:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-section__header__container{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-section-actions{display:flex;flex-wrap:wrap;gap:calc(.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));margin-left:auto}.fudis-section-content fudis-notification{margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "fudis-badge", inputs: ["variant", "content"] }, { kind: "component", type: ButtonComponent, selector: "fudis-button", inputs: ["label", "variant", "size", "type", "labelHidden", "ariaLabel", "disabled", "icon", "iconRotate", "id", "asMenuButton"], outputs: ["handleClick", "handleFocus", "handleBlur", "handleDestroy"] }, { kind: "directive", type: GridDirective, selector: "[fudisGrid]" }, { kind: "component", type: HeadingComponent, selector: "fudis-heading", inputs: ["level", "variant", "id", "align"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-section', encapsulation: ViewEncapsulation.None, standalone: false, template: "<section\n  *ngIf=\"_classList | async as classes\"\n  fudisGrid\n  [id]=\"id\"\n  [tabIndex]=\"-1\"\n  [attr.aria-labelledby]=\"_headingId\"\n  [align]=\"align\"\n  [width]=\"width\"\n  [classes]=\"classes\"\n  [rowGap]=\"'none'\"\n  [serviceDefaults]=\"false\"\n>\n  <div class=\"fudis-section__header\" [id]=\"_headingId\">\n    <div class=\"fudis-section__header__container\">\n      <div class=\"fudis-section__header__heading\">\n        <fudis-heading class=\"fudis-mb-none\" [level]=\"level\" [variant]=\"titleVariant\"\n          >{{ title\n          }}<fudis-badge\n            *ngIf=\"badge && badgeText\"\n            class=\"fudis-section__header__heading__badge\"\n            [variant]=\"badge\"\n            [content]=\"badgeText\"\n        /></fudis-heading>\n        <fudis-button\n          *ngIf=\"popoverTriggerLabel && popoverText\"\n          class=\"fudis-section__header__heading__popover\"\n          [size]=\"'icon-only'\"\n          [variant]=\"'tertiary'\"\n          [icon]=\"'info-circle'\"\n          [labelHidden]=\"true\"\n          [label]=\"popoverTriggerLabel\"\n          [popoverPosition]=\"popoverPosition\"\n          [popoverText]=\"popoverText\"\n        />\n      </div>\n      <ng-content select=\"fudis-section-actions\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"fudis-section-content\"></ng-content>\n</section>\n", styles: [".fudis-section{box-sizing:border-box;padding:0}.fudis-section__header__heading{display:flex;align-items:center}.fudis-section__header__heading__badge,.fudis-section__header__heading__popover{margin-left:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-section__header__container{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}.fudis-section-actions{display:flex;flex-wrap:wrap;gap:calc(.5rem / var(--fudis-rem-multiplier)) calc(1rem / var(--fudis-rem-multiplier));margin-left:auto}.fudis-section-content fudis-notification{margin-bottom:calc(.5rem / var(--fudis-rem-multiplier))}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: FudisIdService }, { type: FudisInternalErrorSummaryService }], propDecorators: { title: [{
                type: Input,
                args: [{ required: true }]
            }], level: [{
                type: Input,
                args: [{ required: true }]
            }], titleVariant: [{
                type: Input
            }], id: [{
                type: Input
            }], badge: [{
                type: Input
            }], badgeText: [{
                type: Input
            }], width: [{
                type: Input
            }], align: [{
                type: Input
            }], classes: [{
                type: Input
            }], errorSummaryBreadcrumb: [{
                type: Input
            }] } });

class TextFieldComponentBaseDirective extends ControlComponentBaseDirective {
    constructor(_idService, _focusService) {
        super(_idService, _focusService);
        /**
         * Width of the input field.
         */
        this.size = 'lg';
        /**
         * If user clears the input field, set FormControl value to null instead of empty string.
         */
        this.nullControlOnEmptyString = true;
        /**
         * Max length for HTML attribute and for character indicator in guidance.
         */
        this._maxLength = new BehaviorSubject(null);
        /**
         * Min length for HTML attribute.
         */
        this._minLength = new BehaviorSubject(null);
    }
    /**
     * Depending on input prop 'nullControlOnEmptyString' either subscribe or unsubscribe to control's
     * value changes
     */
    _setControlValueSubscription() {
        if (this.nullControlOnEmptyString) {
            this._baseSubscription?.unsubscribe();
            this._baseSubscription = this.control.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((value) => {
                if (typeof value === 'string' && value.trim() === '') {
                    this.control.setValue(null);
                }
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextFieldComponentBaseDirective, deps: [{ token: FudisIdService }, { token: FudisFocusService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: TextFieldComponentBaseDirective, isStandalone: false, selector: "[fudisTextFieldComponentBase]", inputs: { size: "size", nullControlOnEmptyString: "nullControlOnEmptyString" }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextFieldComponentBaseDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisTextFieldComponentBase]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: FudisIdService }, { type: FudisFocusService }], propDecorators: { size: [{
                type: Input
            }], nullControlOnEmptyString: [{
                type: Input
            }] } });

class TextAreaComponent extends TextFieldComponentBaseDirective {
    constructor(_focusService, _idService) {
        super(_idService, _focusService);
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.control) {
                this._required.next(FudisValidatorUtilities.required(this.control));
                this._maxLength.next(FudisValidatorUtilities.maxLength(this.control));
                this._minLength.next(FudisValidatorUtilities.minLength(this.control));
            }
        });
    }
    ngOnInit() {
        this._setComponentId('text-area');
        this._updateValueAndValidityTrigger.next();
        this._setControlValueSubscription();
    }
    ngOnChanges(changes) {
        if (changes.control?.currentValue !== changes.control?.previousValue) {
            if (!changes.control?.firstChange) {
                this._setControlValueSubscription();
            }
            this._subscription?.unsubscribe();
            this._subscription = this.control.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(() => this._updateValueAndValidityTrigger.next());
        }
        if (!changes.nullControlOnEmptyString?.firstChange &&
            changes.nullControlOnEmptyString?.currentValue !==
                changes.nullControlOnEmptyString?.previousValue) {
            this._setControlValueSubscription();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextAreaComponent, deps: [{ token: FudisFocusService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextAreaComponent, isStandalone: false, selector: "fudis-text-area", inputs: { control: "control" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"fudis-text-area fudis-input-size__{{ size }}\">\n  <fudis-label\n    [for]=\"id\"\n    [id]=\"id + '-label'\"\n    [text]=\"label\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  >\n  </fudis-label>\n  <textarea\n    #inputRef\n    class=\"fudis-form-input fudis-text-area__input\"\n    [formControl]=\"control\"\n    (blur)=\"handleBlur.emit($event)\"\n    (keyup)=\"handleKeyUp.emit($event)\"\n    (focus)=\"onFocus($event)\"\n    [id]=\"id\"\n    [attr.tabindex]=\"disabled ? -1 : null\"\n    [attr.aria-describedby]=\"id + '_guidance'\"\n    [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n    [attr.minLength]=\"_minLength | async\"\n    [attr.maxLength]=\"_maxLength | async\"\n    [attr.required]=\"(_required | async) || null\"\n    [attr.aria-disabled]=\"control.disabled || disabled || null\"\n    [readonly]=\"control.disabled || disabled || null\"\n  >\n  </textarea>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [maxLength]=\"_maxLength | async\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "component", type: LabelComponent, selector: "fudis-label", inputs: ["id", "text", "for", "required", "parentSize"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextAreaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-text-area', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"fudis-text-area fudis-input-size__{{ size }}\">\n  <fudis-label\n    [for]=\"id\"\n    [id]=\"id + '-label'\"\n    [text]=\"label\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverText]=\"popoverText\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  >\n  </fudis-label>\n  <textarea\n    #inputRef\n    class=\"fudis-form-input fudis-text-area__input\"\n    [formControl]=\"control\"\n    (blur)=\"handleBlur.emit($event)\"\n    (keyup)=\"handleKeyUp.emit($event)\"\n    (focus)=\"onFocus($event)\"\n    [id]=\"id\"\n    [attr.tabindex]=\"disabled ? -1 : null\"\n    [attr.aria-describedby]=\"id + '_guidance'\"\n    [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n    [attr.minLength]=\"_minLength | async\"\n    [attr.maxLength]=\"_maxLength | async\"\n    [attr.required]=\"(_required | async) || null\"\n    [attr.aria-disabled]=\"control.disabled || disabled || null\"\n    [readonly]=\"control.disabled || disabled || null\"\n  >\n  </textarea>\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [inputLabel]=\"label\"\n    [maxLength]=\"_maxLength | async\"\n    [helpText]=\"helpText\"\n    [for]=\"id\"\n    [control]=\"control\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n" }]
        }], ctorParameters: () => [{ type: FudisFocusService }, { type: FudisIdService }], propDecorators: { control: [{
                type: Input,
                args: [{ required: true }]
            }] } });

class TextInputComponent extends TextFieldComponentBaseDirective {
    constructor(_focusService, _idService) {
        super(_idService, _focusService);
        /**
         * HTML type attribute
         */
        this.type = 'text';
        /**
         * Browser's automated assistance in filling out form field values, describing what input is
         * expected from the user.
         */
        this.autocomplete = 'off';
        /**
         * HTML name attribute (Note: in order to autocomplete to work properly, TextInput should have
         * specified name attribute as well)
         */
        this.name = null;
        /**
         * Max number for number input HTML attribute
         */
        this._maxNumber = new BehaviorSubject(null);
        /**
         * Min number for number input HTML attribute
         */
        this._minNumber = new BehaviorSubject(null);
        this._updateValueAndValidityTrigger.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.control) {
                this._required.next(FudisValidatorUtilities.required(this.control));
                if (this.type === 'number') {
                    this._maxLength.next(null);
                    this._minLength.next(null);
                    this._minNumber.next(FudisValidatorUtilities.min(this.control));
                    this._maxNumber.next(FudisValidatorUtilities.max(this.control));
                }
                else {
                    this._maxLength.next(FudisValidatorUtilities.maxLength(this.control));
                    this._minLength.next(FudisValidatorUtilities.minLength(this.control));
                    this._minNumber.next(null);
                    this._maxNumber.next(null);
                }
            }
        });
    }
    ngOnInit() {
        this._setComponentId('text-input');
        this._updateValueAndValidityTrigger.next();
        this._setControlValueSubscription();
    }
    ngOnChanges(changes) {
        if (changes.control?.currentValue !== changes.control?.previousValue) {
            if (!changes.control?.firstChange) {
                this._setControlValueSubscription();
            }
            this._subscription?.unsubscribe();
            this._subscription = this.control.valueChanges
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(() => this._updateValueAndValidityTrigger.next());
        }
        if (changes.type?.currentValue !== changes.type?.previousValue) {
            this._updateValueAndValidityTrigger.next();
        }
        if (!changes.nullControlOnEmptyString?.firstChange &&
            changes.nullControlOnEmptyString?.currentValue !==
                changes.nullControlOnEmptyString?.previousValue) {
            this._setControlValueSubscription();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, deps: [{ token: FudisFocusService }, { token: FudisIdService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: false, selector: "fudis-text-input", inputs: { control: "control", type: "type", autocomplete: "autocomplete", name: "name" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"fudis-text-input fudis-input-size__{{ size }}\">\n  <fudis-label\n    [for]=\"id\"\n    [id]=\"id + '-label'\"\n    [text]=\"label\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverText]=\"popoverText\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  />\n  <input\n    #inputRef\n    class=\"fudis-form-input fudis-text-input__input\"\n    [id]=\"id\"\n    [formControl]=\"control\"\n    (blur)=\"handleBlur.emit($event)\"\n    (keyup)=\"handleKeyUp.emit($event)\"\n    (focus)=\"onFocus($event)\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.minlength]=\"_minLength | async\"\n    [attr.maxlength]=\"_maxLength | async\"\n    [attr.min]=\"_minNumber | async\"\n    [attr.max]=\"_maxNumber | async\"\n    [attr.name]=\"name\"\n    [attr.required]=\"(_required | async) || null\"\n    [attr.tabindex]=\"disabled ? -1 : null\"\n    [attr.type]=\"type\"\n    [attr.aria-describedby]=\"id + '_guidance'\"\n    [attr.aria-disabled]=\"control.disabled || disabled || null\"\n    [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n    [attr.aria-label]=\"ariaLabel\"\n    [readonly]=\"control.disabled || disabled || null\"\n  />\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [control]=\"control\"\n    [for]=\"id\"\n    [helpText]=\"helpText\"\n    [inputLabel]=\"label\"\n    [maxLength]=\"_maxLength | async\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: GuidanceComponent, selector: "fudis-guidance", inputs: ["for", "inputLabel", "control", "formGroup", "helpText", "ariaLive", "maxLength", "selectedOption", "groupBlurredOut", "groupHelpTextHidden"] }, { kind: "component", type: LabelComponent, selector: "fudis-label", inputs: ["id", "text", "for", "required", "parentSize"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-text-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"fudis-text-input fudis-input-size__{{ size }}\">\n  <fudis-label\n    [for]=\"id\"\n    [id]=\"id + '-label'\"\n    [text]=\"label\"\n    [required]=\"_required | async\"\n    [parentSize]=\"size\"\n    [popoverPosition]=\"popoverPosition\"\n    [popoverText]=\"popoverText\"\n    [popoverTriggerLabel]=\"popoverTriggerLabel\"\n  />\n  <input\n    #inputRef\n    class=\"fudis-form-input fudis-text-input__input\"\n    [id]=\"id\"\n    [formControl]=\"control\"\n    (blur)=\"handleBlur.emit($event)\"\n    (keyup)=\"handleKeyUp.emit($event)\"\n    (focus)=\"onFocus($event)\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.minlength]=\"_minLength | async\"\n    [attr.maxlength]=\"_maxLength | async\"\n    [attr.min]=\"_minNumber | async\"\n    [attr.max]=\"_maxNumber | async\"\n    [attr.name]=\"name\"\n    [attr.required]=\"(_required | async) || null\"\n    [attr.tabindex]=\"disabled ? -1 : null\"\n    [attr.type]=\"type\"\n    [attr.aria-describedby]=\"id + '_guidance'\"\n    [attr.aria-disabled]=\"control.disabled || disabled || null\"\n    [attr.aria-invalid]=\"(control.invalid && control.touched) || null\"\n    [attr.aria-label]=\"ariaLabel\"\n    [readonly]=\"control.disabled || disabled || null\"\n  />\n  <fudis-guidance\n    *ngIf=\"!disableGuidance\"\n    [control]=\"control\"\n    [for]=\"id\"\n    [helpText]=\"helpText\"\n    [inputLabel]=\"label\"\n    [maxLength]=\"_maxLength | async\"\n  >\n    <ng-content select=\"fudis-error-message\" />\n  </fudis-guidance>\n</div>\n" }]
        }], ctorParameters: () => [{ type: FudisFocusService }, { type: FudisIdService }], propDecorators: { control: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input
            }], autocomplete: [{
                type: Input
            }], name: [{
                type: Input
            }] } });

class DateStartDirective {
    constructor(_datepicker) {
        this._datepicker = _datepicker;
        _datepicker.dateRangeType = 'start';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateStartDirective, deps: [{ token: DatepickerComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DateStartDirective, isStandalone: false, selector: "[fudisDateStart]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateStartDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisDateStart]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: DatepickerComponent, decorators: [{
                    type: Host
                }] }] });
class DateEndDirective {
    constructor(_datepicker) {
        this._datepicker = _datepicker;
        _datepicker.dateRangeType = 'end';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateEndDirective, deps: [{ token: DatepickerComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: DateEndDirective, isStandalone: false, selector: "[fudisDateEnd]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateEndDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisDateEnd]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: DatepickerComponent, decorators: [{
                    type: Host
                }] }] });

class ErrorMessageDirective {
    constructor(_errorSummaryService, _translationService, _idService, _textInput, _textArea, _datePicker, _LocalizedTextGroup, _checkboxGroup, _select, _multiSelect, _radioButtonGroup) {
        this._errorSummaryService = _errorSummaryService;
        this._translationService = _translationService;
        this._idService = _idService;
        this._textInput = _textInput;
        this._textArea = _textArea;
        this._datePicker = _datePicker;
        this._LocalizedTextGroup = _LocalizedTextGroup;
        this._checkboxGroup = _checkboxGroup;
        this._select = _select;
        this._multiSelect = _multiSelect;
        this._radioButtonGroup = _radioButtonGroup;
        /**
         * Output for handling a state when error is sent to Error Summary
         */
        this.handleAddError = new EventEmitter();
        /**
         * Output for handling a state when error is removed from Error Summary
         */
        this.handleRemoveError = new EventEmitter();
        /**
         * Boolean determining if Error Message is added
         */
        this._errorAdded = false;
        this._destroyRef = inject(DestroyRef);
        if (_textInput) {
            this._parent = _textInput;
        }
        else if (_textArea) {
            this._parent = _textArea;
        }
        else if (_datePicker) {
            this._parent = _datePicker;
        }
        else if (_radioButtonGroup) {
            this._parent = _radioButtonGroup;
        }
        else if (_LocalizedTextGroup) {
            this._parentGroup = _LocalizedTextGroup;
        }
        else if (_checkboxGroup) {
            this._parentGroup = _checkboxGroup;
        }
        else if (_select) {
            this._parent = _select;
        }
        else if (_multiSelect) {
            this._parent = _multiSelect;
        }
        this._id = _idService.getNewId('error-message');
    }
    ngOnInit() {
        if ((this._parent || this._parentGroup) && this.message) {
            this._addControlValidator();
        }
    }
    ngOnChanges(changes) {
        const newMessage = changes.message?.currentValue;
        if (newMessage !== changes.message?.previousValue) {
            /**
             * Update validator message if message is a string and not observable
             */
            if (typeof newMessage === 'string') {
                if (!this._messageStringAsObservable) {
                    this._messageStringAsObservable = new BehaviorSubject(newMessage);
                    this._customValidatorInstance = this._customControlValidatorFn(this._messageStringAsObservable);
                }
                else {
                    this._messageStringAsObservable.next(newMessage);
                }
                this._parent?.control?.updateValueAndValidity();
                this._parentGroup?.formGroup?.updateValueAndValidity();
            }
            else if (newMessage) {
                this._customValidatorInstance = this._customControlValidatorFn(newMessage);
                newMessage.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
                    this._parent?.control?.updateValueAndValidity();
                    this._parentGroup?.formGroup?.updateValueAndValidity();
                });
            }
        }
    }
    ngOnDestroy() {
        this._removeValidator();
    }
    /**
     * Create custom validator with error message
     */
    _customControlValidatorFn(message) {
        return (control) => {
            if (!control) {
                return null;
            }
            return { [this._id]: { message } };
        };
    }
    /**
     * Add created validator to the parent component control
     */
    _addControlValidator() {
        if (this._parent) {
            this._errorAdded = true;
            this._parent.control.addValidators(this._customValidatorInstance);
            this._parent.control.updateValueAndValidity();
            this.handleAddError.emit({ [this._id]: { message: this.message } });
        }
        else if (this._parentGroup) {
            this._errorAdded = true;
            this._parentGroup.formGroup.addValidators(this._customValidatorInstance);
            this._parentGroup.formGroup.updateValueAndValidity();
            this.handleAddError.emit({ [this._id]: { message: this.message } });
        }
    }
    /**
     * Remove created validator from parent component control
     */
    _removeValidator() {
        if (this._parent && this._customValidatorInstance && this._errorAdded) {
            this._errorAdded = false;
            this._parent.control.removeValidators(this._customValidatorInstance);
            this._parent.control.updateValueAndValidity();
            this.handleRemoveError.emit({ [this._id]: { message: this.message } });
        }
        else if (this._parentGroup && this._customValidatorInstance && this._errorAdded) {
            this._errorAdded = false;
            this._parentGroup.formGroup.removeValidators(this._customValidatorInstance);
            this._parentGroup.formGroup.updateValueAndValidity();
            this.handleRemoveError.emit({ [this._id]: { message: this.message } });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessageDirective, deps: [{ token: FudisInternalErrorSummaryService }, { token: FudisTranslationService }, { token: FudisIdService }, { token: TextInputComponent, host: true, optional: true }, { token: TextAreaComponent, host: true, optional: true }, { token: DatepickerComponent, host: true, optional: true }, { token: LocalizedTextGroupComponent, host: true, optional: true }, { token: CheckboxGroupComponent, host: true, optional: true }, { token: SelectComponent, host: true, optional: true }, { token: MultiselectComponent, host: true, optional: true }, { token: RadioButtonGroupComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ErrorMessageDirective, isStandalone: false, selector: "fudis-error-message", inputs: { message: "message" }, outputs: { handleAddError: "handleAddError", handleRemoveError: "handleRemoveError" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ErrorMessageDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-error-message',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: FudisInternalErrorSummaryService }, { type: FudisTranslationService }, { type: FudisIdService }, { type: TextInputComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: TextAreaComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: DatepickerComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: LocalizedTextGroupComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: CheckboxGroupComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: SelectComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: MultiselectComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }, { type: RadioButtonGroupComponent, decorators: [{
                    type: Host
                }, {
                    type: Optional
                }] }], propDecorators: { message: [{
                type: Input,
                args: [{ required: true }]
            }], handleAddError: [{
                type: Output
            }], handleRemoveError: [{
                type: Output
            }] } });

// TODO: Write tests
/**
 * A marker directive to set any element, mostly Button Component to work as submit button, which
 * will trigger Error Summary on click
 */
class FormSubmitDirective {
    constructor(_document, _button, _errorSummaryService) {
        this._document = _document;
        this._button = _button;
        this._errorSummaryService = _errorSummaryService;
        /**
         * If false, Button will set parent Form's 'errorSummaryVisible' to true and call reloadErrors()
         * from Error Summary Service If true, Button will set parent Form's 'errorSummaryVisible' to
         * false
         */
        this.formValid = false;
    }
    ngOnInit() {
        this._button.type = 'submit';
    }
    /**
     * Set parent Form's Error Summary Visible true and reload errors
     */
    _onClick(targetElement) {
        /**
         * Make sure that click event is from this submit Button and not any parent Form element
         */
        const buttonElement = this._button.buttonEl.nativeElement;
        const submitButton = this._document.activeElement === buttonElement || targetElement === buttonElement;
        if (submitButton && !isButtonDisabled(buttonElement)) {
            this._errorSummaryService
                .getFormAncestorId(this._button.buttonEl.nativeElement)
                .then((parentFormId) => {
                if (parentFormId && !this.formValid) {
                    this._errorSummaryService.setErrorSummaryVisibility(parentFormId, true);
                    this._errorSummaryService.reloadFormErrors(parentFormId, true);
                }
                else if (parentFormId) {
                    this._errorSummaryService.setErrorSummaryVisibility(parentFormId, false);
                }
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormSubmitDirective, deps: [{ token: DOCUMENT }, { token: ButtonComponent, host: true }, { token: FudisInternalErrorSummaryService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FormSubmitDirective, isStandalone: false, selector: "[fudisFormSubmit]", inputs: { formValid: "formValid" }, host: { listeners: { "click": "_onClick($event.target)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormSubmitDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fudisFormSubmit]',
                    standalone: false,
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: ButtonComponent, decorators: [{
                    type: Host
                }] }, { type: FudisInternalErrorSummaryService }], propDecorators: { formValid: [{
                type: Input
            }], _onClick: [{
                type: HostListener,
                args: ['click', ['$event.target']]
            }] } });

class FormActionsDirective {
    constructor() {
        this._hostClass = 'fudis-form-actions';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FormActionsDirective, isStandalone: false, selector: "fudis-form-actions", host: { properties: { "class": "this._hostClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormActionsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-form-actions',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });
class FormHeaderDirective {
    constructor() {
        this._hostClass = 'fudis-form-header';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FormHeaderDirective, isStandalone: false, selector: "fudis-form-header", host: { properties: { "class": "this._hostClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormHeaderDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-form-header',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });
class FormContentDirective {
    constructor() {
        this._hostClass = 'fudis-form-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: FormContentDirective, isStandalone: false, selector: "fudis-form-content", host: { properties: { "class": "this._hostClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-form-content',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class SectionActionsDirective {
    constructor() {
        this._hostClass = 'fudis-section-actions';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SectionActionsDirective, isStandalone: false, selector: "fudis-section-actions", host: { properties: { "class": "this._hostClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionActionsDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-section-actions',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });
class SectionContentDirective {
    constructor() {
        this._hostClass = 'fudis-section-content';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: SectionContentDirective, isStandalone: false, selector: "fudis-section-content", host: { properties: { "class": "this._hostClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SectionContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'fudis-section-content',
                    standalone: false,
                }]
        }], propDecorators: { _hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

/**
 * Error Summary Service public methods and tools
 */
class FudisErrorSummaryService {
    constructor(_errorSummaryService) {
        this._errorSummaryService = _errorSummaryService;
        this._destroyRef = inject(DestroyRef);
        /**
         * To store Subscriptions for each sent Observable, so it can be unsubscribed on removeError()
         */
        this._subscriptions = {};
    }
    /**
     * To define ID for each subscription
     *
     * @param error With required properties
     * @returns Generated id
     */
    _getSubscriptionId(error) {
        return `${error.formId}_${error.focusId}_${error.id}`;
    }
    /**
     * Get current updateStrategy of Error Summary. By default 'reloadOnly'.
     */
    get updateStrategy() {
        return this._errorSummaryService.updateStrategy;
    }
    /**
     * Set updateStrategy of Error Summary
     */
    setUpdateStrategy(value) {
        this._errorSummaryService.updateStrategy = value;
    }
    /**
     * Reloads all Forms with Error Summary
     */
    reloadAllErrors() {
        this._errorSummaryService.focusToFormOnReload = null;
        this._errorSummaryService.reloadAllErrors();
    }
    /**
     * Reload a spesific Form Id
     *
     * @param id Form Id
     * @param focus Focus to Error Summary
     */
    reloadFormErrors(id, focus = true) {
        this._errorSummaryService.reloadFormErrors(id, focus);
    }
    // TODO: This should be removed and replaced with getter for collection of Signals per individual Forms
    /**
     * Returns an observable of all errors sent to Error Summary. Note, that Observable is updated
     * only when ReloadErrors is called.
     */
    getErrorsObservable() {
        return this._errorSummaryService.errorsObservable;
    }
    /**
     * To add message to spesific Form's Error Summary.
     *
     * @param id Identifier of the message, eg. 'app-custom-error-abc123'
     * @param formId Id of Form component
     * @param focusId HTML element's id, where user focus should be moved when user clicks the
     *   message.
     * @param message Visible message to the user
     */
    addError(id, formId, focusId, message) {
        if (typeof message === 'string') {
            const newError = { focusId, formId, message, id };
            this._errorSummaryService.addError(newError);
        }
        else {
            const subscriptionId = this._getSubscriptionId({ id, formId, focusId });
            this._subscriptions[subscriptionId] = message
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((newMessage) => {
                const newError = { focusId, formId, message: newMessage, id };
                this._errorSummaryService.addError(newError);
            });
        }
    }
    /**
     * To remove messages from Form's Error Summary
     *
     * @param id Identifier of provided message in 'addError()'
     * @param formId Id of Form component
     * @param focusId HTML element's id, where user focus should be moved when user clicks the
     *   message.
     */
    removeError(id, formId, focusId) {
        const removeError = { focusId, formId, id };
        const subscriptionId = this._getSubscriptionId(removeError);
        if (this._subscriptions[subscriptionId]) {
            this._subscriptions[subscriptionId].unsubscribe();
            delete this._subscriptions[subscriptionId];
        }
        this._errorSummaryService.removeError(removeError);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisErrorSummaryService, deps: [{ token: FudisInternalErrorSummaryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisErrorSummaryService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FudisErrorSummaryService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: FudisInternalErrorSummaryService }] });

/**
 * Angular & ngMaterial
 */
class NgxFudisModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxFudisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxFudisModule, declarations: [AlertComponent,
            AlertGroupComponent,
            BadgeComponent,
            BodyTextComponent,
            BreadcrumbsComponent,
            BreadcrumbsItemComponent,
            ButtonComponent,
            CheckboxComponent,
            CheckboxGroupComponent,
            CheckboxGroupOptionComponent,
            ControlComponentBaseDirective,
            DatepickerComponent,
            DateRangeComponent,
            DateStartDirective,
            DateEndDirective,
            DescriptionListComponent,
            DescriptionListItemComponent,
            DescriptionListItemTermComponent,
            DescriptionListItemDetailsComponent,
            DialogTitleDirective,
            DialogComponent,
            DialogActionsDirective,
            DialogContentDirective,
            DialogCloseDirective,
            DropdownBaseDirective,
            DropdownMenuGroupComponent,
            DropdownMenuComponent,
            DropdownItemBaseDirective,
            DropdownMenuItemComponent,
            ErrorMessageDirective,
            ErrorSummaryComponent,
            ExpandableComponent,
            ExpandableActionsDirective,
            ExpandableContentDirective,
            FieldsetActionsDirective,
            FieldsetContentDirective,
            FieldSetComponent,
            FooterComponent,
            FooterContentLeftDirective,
            FooterContentRightDirective,
            FormCommonApiDirective,
            FormComponent,
            FormActionsDirective,
            FormContentDirective,
            FormHeaderDirective,
            FormSubmitDirective,
            GridComponent,
            GridApiDirective,
            GridDirective,
            GridItemComponent,
            GridItemDirective,
            GroupComponentBaseDirective,
            GuidanceComponent,
            HeadingComponent,
            HorizontalRuleComponent,
            IconComponent,
            LocalizedTextGroupComponent,
            LabelComponent,
            LanguageBadgeComponent,
            LanguageBadgeGroupComponent,
            LinkDirective,
            MultiselectComponent,
            MultiselectChipListComponent,
            MultiselectOptionComponent,
            NotificationComponent,
            RadioButtonComponent,
            RadioButtonGroupComponent,
            SectionComponent,
            SectionActionsDirective,
            SectionContentDirective,
            SelectAutocompleteBaseDirective,
            SelectAutocompleteDirective,
            SelectBaseDirective,
            SelectComponent,
            SelectControlValueAccessorDirective,
            MultiselectAutocompleteDirective,
            MultiselectControlValueAccessorDirective,
            SelectDropdownComponent,
            SelectGroupComponent,
            SelectIconsComponent,
            SelectOptionsDirective,
            SelectOptionBaseDirective,
            SelectOptionComponent,
            TextAreaComponent,
            TextFieldComponentBaseDirective,
            TextInputComponent,
            ValidatorErrorMessageComponent], imports: [CommonModule,
            FormsModule,
            LayoutModule,
            MatDatepickerModule,
            MatDialogModule,
            MatFormFieldModule,
            MatInputModule,
            MatNativeDateModule,
            MatButtonModule,
            ReactiveFormsModule,
            RouterModule,
            ScrollingModule,
            PopoverDirective], exports: [AlertComponent,
            AlertGroupComponent,
            BadgeComponent,
            BodyTextComponent,
            BreadcrumbsComponent,
            BreadcrumbsItemComponent,
            ButtonComponent,
            CheckboxComponent,
            CheckboxGroupComponent,
            CheckboxGroupOptionComponent,
            DatepickerComponent,
            DateRangeComponent,
            DateStartDirective,
            DateEndDirective,
            DescriptionListComponent,
            DescriptionListItemComponent,
            DescriptionListItemTermComponent,
            DescriptionListItemDetailsComponent,
            DialogComponent,
            DialogTitleDirective,
            DialogContentDirective,
            DialogCloseDirective,
            DialogActionsDirective,
            DropdownMenuGroupComponent,
            DropdownMenuComponent,
            DropdownMenuItemComponent,
            ErrorMessageDirective,
            ExpandableComponent,
            ExpandableActionsDirective,
            ExpandableContentDirective,
            FooterComponent,
            FooterContentLeftDirective,
            FooterContentRightDirective,
            FieldsetActionsDirective,
            FieldsetContentDirective,
            FieldSetComponent,
            FormComponent,
            FormActionsDirective,
            FormContentDirective,
            FormHeaderDirective,
            FormSubmitDirective,
            GridComponent,
            GridDirective,
            GridItemComponent,
            GridItemDirective,
            HeadingComponent,
            HorizontalRuleComponent,
            IconComponent,
            LocalizedTextGroupComponent,
            LanguageBadgeGroupComponent,
            LinkDirective,
            MultiselectComponent,
            MultiselectOptionComponent,
            NotificationComponent,
            PopoverDirective,
            RadioButtonComponent,
            RadioButtonGroupComponent,
            SectionComponent,
            SectionActionsDirective,
            SectionContentDirective,
            SelectComponent,
            SelectOptionComponent,
            SelectOptionsDirective,
            SelectGroupComponent,
            TextAreaComponent,
            TextInputComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxFudisModule, providers: [
            FudisAlertService,
            FudisBreakpointService,
            FudisDialogService,
            FudisErrorSummaryService,
            FudisInternalErrorSummaryService,
            FudisFocusService,
            FudisGridService,
            FudisIdService,
            FudisTranslationService,
        ], imports: [CommonModule,
            FormsModule,
            LayoutModule,
            MatDatepickerModule,
            MatDialogModule,
            MatFormFieldModule,
            MatInputModule,
            MatNativeDateModule,
            MatButtonModule,
            ReactiveFormsModule,
            RouterModule,
            ScrollingModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxFudisModule, decorators: [{
            type: NgModule,
            args: [{
                    /*
                     * Include both internal and external Fudis components in 'declarations' array below.
                     */
                    declarations: [
                        AlertComponent,
                        AlertGroupComponent,
                        BadgeComponent,
                        BodyTextComponent,
                        BreadcrumbsComponent,
                        BreadcrumbsItemComponent,
                        ButtonComponent,
                        CheckboxComponent,
                        CheckboxGroupComponent,
                        CheckboxGroupOptionComponent,
                        ControlComponentBaseDirective,
                        DatepickerComponent,
                        DateRangeComponent,
                        DateStartDirective,
                        DateEndDirective,
                        DescriptionListComponent,
                        DescriptionListItemComponent,
                        DescriptionListItemTermComponent,
                        DescriptionListItemDetailsComponent,
                        DialogTitleDirective,
                        DialogComponent,
                        DialogActionsDirective,
                        DialogContentDirective,
                        DialogCloseDirective,
                        DropdownBaseDirective,
                        DropdownMenuGroupComponent,
                        DropdownMenuComponent,
                        DropdownItemBaseDirective,
                        DropdownMenuItemComponent,
                        ErrorMessageDirective,
                        ErrorSummaryComponent,
                        ExpandableComponent,
                        ExpandableActionsDirective,
                        ExpandableContentDirective,
                        FieldsetActionsDirective,
                        FieldsetContentDirective,
                        FieldSetComponent,
                        FooterComponent,
                        FooterContentLeftDirective,
                        FooterContentRightDirective,
                        FormCommonApiDirective,
                        FormComponent,
                        FormActionsDirective,
                        FormContentDirective,
                        FormHeaderDirective,
                        FormSubmitDirective,
                        GridComponent,
                        GridApiDirective,
                        GridDirective,
                        GridItemComponent,
                        GridItemDirective,
                        GroupComponentBaseDirective,
                        GuidanceComponent,
                        HeadingComponent,
                        HorizontalRuleComponent,
                        IconComponent,
                        LocalizedTextGroupComponent,
                        LabelComponent,
                        LanguageBadgeComponent,
                        LanguageBadgeGroupComponent,
                        LinkDirective,
                        MultiselectComponent,
                        MultiselectChipListComponent,
                        MultiselectOptionComponent,
                        NotificationComponent,
                        RadioButtonComponent,
                        RadioButtonGroupComponent,
                        SectionComponent,
                        SectionActionsDirective,
                        SectionContentDirective,
                        SelectAutocompleteBaseDirective,
                        SelectAutocompleteDirective,
                        SelectBaseDirective,
                        SelectComponent,
                        SelectControlValueAccessorDirective,
                        MultiselectAutocompleteDirective,
                        MultiselectControlValueAccessorDirective,
                        SelectDropdownComponent,
                        SelectGroupComponent,
                        SelectIconsComponent,
                        SelectOptionsDirective,
                        SelectOptionBaseDirective,
                        SelectOptionComponent,
                        TextAreaComponent,
                        TextFieldComponentBaseDirective,
                        TextInputComponent,
                        ValidatorErrorMessageComponent,
                    ],
                    /*
                     * Include imports outside of Fudis components in 'imports' array below.
                     * E.g. components from Angular Material or other Angular tools
                     */
                    imports: [
                        CommonModule,
                        FormsModule,
                        LayoutModule,
                        MatDatepickerModule,
                        MatDialogModule,
                        MatFormFieldModule,
                        MatInputModule,
                        MatNativeDateModule,
                        MatButtonModule,
                        ReactiveFormsModule,
                        RouterModule,
                        ScrollingModule,
                        PopoverDirective,
                    ],
                    /*
                     * Include Fudis component in 'exports' array below
                     * and export in public-api.ts as well,
                     * when you want to expose it outside
                     */
                    exports: [
                        AlertComponent,
                        AlertGroupComponent,
                        BadgeComponent,
                        BodyTextComponent,
                        BreadcrumbsComponent,
                        BreadcrumbsItemComponent,
                        ButtonComponent,
                        CheckboxComponent,
                        CheckboxGroupComponent,
                        CheckboxGroupOptionComponent,
                        DatepickerComponent,
                        DateRangeComponent,
                        DateStartDirective,
                        DateEndDirective,
                        DescriptionListComponent,
                        DescriptionListItemComponent,
                        DescriptionListItemTermComponent,
                        DescriptionListItemDetailsComponent,
                        DialogComponent,
                        DialogTitleDirective,
                        DialogContentDirective,
                        DialogCloseDirective,
                        DialogActionsDirective,
                        DropdownMenuGroupComponent,
                        DropdownMenuComponent,
                        DropdownMenuItemComponent,
                        ErrorMessageDirective,
                        ExpandableComponent,
                        ExpandableActionsDirective,
                        ExpandableContentDirective,
                        FooterComponent,
                        FooterContentLeftDirective,
                        FooterContentRightDirective,
                        FieldsetActionsDirective,
                        FieldsetContentDirective,
                        FieldSetComponent,
                        FormComponent,
                        FormActionsDirective,
                        FormContentDirective,
                        FormHeaderDirective,
                        FormSubmitDirective,
                        GridComponent,
                        GridDirective,
                        GridItemComponent,
                        GridItemDirective,
                        HeadingComponent,
                        HorizontalRuleComponent,
                        IconComponent,
                        LocalizedTextGroupComponent,
                        LanguageBadgeGroupComponent,
                        LinkDirective,
                        MultiselectComponent,
                        MultiselectOptionComponent,
                        NotificationComponent,
                        PopoverDirective,
                        RadioButtonComponent,
                        RadioButtonGroupComponent,
                        SectionComponent,
                        SectionActionsDirective,
                        SectionContentDirective,
                        SelectComponent,
                        SelectOptionComponent,
                        SelectOptionsDirective,
                        SelectGroupComponent,
                        TextAreaComponent,
                        TextInputComponent,
                    ],
                    providers: [
                        FudisAlertService,
                        FudisBreakpointService,
                        FudisDialogService,
                        FudisErrorSummaryService,
                        FudisInternalErrorSummaryService,
                        FudisFocusService,
                        FudisGridService,
                        FudisIdService,
                        FudisTranslationService,
                    ],
                }]
        }] });

class LoadingSpinnerComponent {
    constructor(_translationService) {
        this._translationService = _translationService;
        /**
         * Size variant. Variant 'sm' for smaller page sections and 'lg' for full page.
         */
        this.variant = 'sm';
        /**
         * For variant 'lg' and better screen reader experience, instead of using *ngIf for displaying
         * component, set this property true when loading is in progress and false, when loading is not in
         * progress. This will trigger screen reader `statusMessage` properties accordingly.
         */
        this.visible = true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingSpinnerComponent, deps: [{ token: FudisTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: LoadingSpinnerComponent, isStandalone: true, selector: "fudis-loading-spinner", inputs: { label: "label", variant: "variant", statusMessage: "statusMessage", visible: "visible" }, ngImport: i0, template: "@let translations = _translationService.getTranslations()();\n\n<div class=\"fudis-loading-spinner\">\n  <p\n    *ngIf=\"variant === 'lg'\"\n    class=\"fudis-loading-spinner__status fudis-visually-hidden\"\n    role=\"status\"\n    >{{\n      statusMessage ||\n        (visible\n          ? translations.LOADING_SPINNER.PAGE_LOADING\n          : translations.LOADING_SPINNER.PAGE_LOAD_FINISHED)\n    }}</p\n  >\n  <div *ngIf=\"visible\" class=\"fudis-loading-spinner__ui-content\">\n    <svg\n      class=\"fudis-loading-spinner__svg fudis-loading-spinner__variant__{{ variant }}\"\n      aria-hidden=\"true\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M15.2256 0.441641C12.7017 -0.262704 10.0165 -0.121557 7.58041 0.843527C5.14424 1.80861 3.09092 3.54458 1.73407 5.78628C0.377218 8.02798 -0.208579 10.6522 0.066151 13.2581C0.34088 15.864 1.46103 18.3084 3.25553 20.2179C5.05002 22.1274 7.4202 23.397 10.004 23.8328C12.5879 24.2687 15.2434 23.8468 17.565 22.6316L16.1133 19.8581C14.3974 20.7563 12.4346 21.0681 10.5247 20.746C8.61493 20.4239 6.86307 19.4855 5.5367 18.0741C4.21034 16.6628 3.3824 14.856 3.17934 12.9299C2.97627 11.0038 3.40925 9.06416 4.41214 7.40725C5.41504 5.75033 6.93271 4.46723 8.73335 3.75391C10.534 3.04059 12.5186 2.93626 14.3841 3.45686C16.2497 3.97747 17.8935 5.09438 19.0645 6.63702C20.2356 8.17965 20.8696 10.0632 20.8696 12H24C24 9.37963 23.1424 6.83129 21.5579 4.7442C19.9735 2.65711 17.7496 1.14599 15.2256 0.441641Z\"\n      />\n    </svg>\n\n    <fudis-body-text\n      [align]=\"'center'\"\n      [variant]=\"variant === 'sm' ? 'md-regular' : 'lg-regular'\"\n      >{{ label || translations.LOADING_SPINNER.VISIBLE_LABEL }}</fudis-body-text\n    >\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxFudisModule }, { kind: "component", type: BodyTextComponent, selector: "fudis-body-text", inputs: ["variant", "align", "lang"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-loading-spinner', imports: [CommonModule, NgxFudisModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let translations = _translationService.getTranslations()();\n\n<div class=\"fudis-loading-spinner\">\n  <p\n    *ngIf=\"variant === 'lg'\"\n    class=\"fudis-loading-spinner__status fudis-visually-hidden\"\n    role=\"status\"\n    >{{\n      statusMessage ||\n        (visible\n          ? translations.LOADING_SPINNER.PAGE_LOADING\n          : translations.LOADING_SPINNER.PAGE_LOAD_FINISHED)\n    }}</p\n  >\n  <div *ngIf=\"visible\" class=\"fudis-loading-spinner__ui-content\">\n    <svg\n      class=\"fudis-loading-spinner__svg fudis-loading-spinner__variant__{{ variant }}\"\n      aria-hidden=\"true\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M15.2256 0.441641C12.7017 -0.262704 10.0165 -0.121557 7.58041 0.843527C5.14424 1.80861 3.09092 3.54458 1.73407 5.78628C0.377218 8.02798 -0.208579 10.6522 0.066151 13.2581C0.34088 15.864 1.46103 18.3084 3.25553 20.2179C5.05002 22.1274 7.4202 23.397 10.004 23.8328C12.5879 24.2687 15.2434 23.8468 17.565 22.6316L16.1133 19.8581C14.3974 20.7563 12.4346 21.0681 10.5247 20.746C8.61493 20.4239 6.86307 19.4855 5.5367 18.0741C4.21034 16.6628 3.3824 14.856 3.17934 12.9299C2.97627 11.0038 3.40925 9.06416 4.41214 7.40725C5.41504 5.75033 6.93271 4.46723 8.73335 3.75391C10.534 3.04059 12.5186 2.93626 14.3841 3.45686C16.2497 3.97747 17.8935 5.09438 19.0645 6.63702C20.2356 8.17965 20.8696 10.0632 20.8696 12H24C24 9.37963 23.1424 6.83129 21.5579 4.7442C19.9735 2.65711 17.7496 1.14599 15.2256 0.441641Z\"\n      />\n    </svg>\n\n    <fudis-body-text\n      [align]=\"'center'\"\n      [variant]=\"variant === 'sm' ? 'md-regular' : 'lg-regular'\"\n      >{{ label || translations.LOADING_SPINNER.VISIBLE_LABEL }}</fudis-body-text\n    >\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: FudisTranslationService }], propDecorators: { label: [{
                type: Input
            }], variant: [{
                type: Input
            }], statusMessage: [{
                type: Input
            }], visible: [{
                type: Input
            }] } });

/**
 * A Tab navigation bar component.
 */
class TabNavigationBarComponent {
    constructor() {
        /**
         * Variant option
         */
        this.variant = 'primary';
        this._leftContentHidden = signal(false);
        this._rightContentHidden = signal(false);
        this._ariaControls = signal(undefined);
        this._scrollAmount = 150;
        this.getAriaControls = () => this._ariaControls;
        this.isScrollable = () => {
            return this._leftContentHidden() || this._rightContentHidden();
        };
        this._scrollTo = (element, scrollAmount, behavior = 'smooth') => {
            element.scrollTo({
                left: scrollAmount,
                behavior: behavior,
            });
        };
        this._updatePanel = () => {
            if (this._tabPanel) {
                if (this._currentActiveTabId)
                    this._tabPanel.setActiveTabId(this._currentActiveTabId);
                if (!this._ariaControls())
                    this._ariaControls.set(this._tabPanel.id);
            }
        };
    }
    /**
     * Reference to the TabNavigationPanelComponent
     */
    get panel() {
        return this._tabPanel;
    }
    set panel(value) {
        this._tabPanel = value;
        this._updatePanel();
    }
    ngAfterViewInit() {
        this._resizeObserver = new ResizeObserver(() => {
            this.assertScroll();
        });
        if (this.tabNavigation)
            this._resizeObserver.observe(this.tabNavigation.nativeElement);
        if (this.scrollContainer) {
            this._scrollSubscription = fromEvent(this.scrollContainer.nativeElement, 'scroll')
                .pipe(auditTime(300))
                .subscribe(() => this.assertScroll());
        }
        if (this.ariaControls && !this._ariaControls())
            this._ariaControls.set(this.ariaControls);
    }
    assertScroll() {
        const scrollContainer = this.scrollContainer?.nativeElement;
        if (scrollContainer) {
            const isLeftHidden = scrollContainer.scrollLeft > 0;
            const isRightHidden = Math.round(scrollContainer.scrollLeft + scrollContainer.clientWidth) <
                scrollContainer.scrollWidth;
            this._rightContentHidden.set(isRightHidden);
            this._leftContentHidden.set(isLeftHidden);
        }
    }
    scrollLeft(scrollToStart) {
        const scrollContainer = this.scrollContainer?.nativeElement;
        if (scrollContainer) {
            if (scrollToStart) {
                this._scrollTo(scrollContainer, 0, 'instant');
            }
            else {
                const targetScrollLeft = Math.max(0, scrollContainer.scrollLeft - this._scrollAmount);
                this._scrollTo(scrollContainer, targetScrollLeft);
            }
        }
    }
    scrollRight(scrollToEnd) {
        const scrollContainer = this.scrollContainer.nativeElement;
        if (scrollContainer) {
            const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
            if (scrollToEnd) {
                this._scrollTo(scrollContainer, maxScrollLeft, 'instant');
            }
            else {
                const targetScrollLeft = Math.min(maxScrollLeft, scrollContainer.scrollLeft + this._scrollAmount);
                this._scrollTo(scrollContainer, targetScrollLeft);
            }
        }
    }
    updateActiveLink(id) {
        this._currentActiveTabId = id;
        this._updatePanel();
    }
    ngOnDestroy() {
        this._resizeObserver?.disconnect();
        this._scrollSubscription?.unsubscribe();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabNavigationBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TabNavigationBarComponent, isStandalone: true, selector: "fudis-tab-navigation-bar", inputs: { id: "id", panel: "panel", ariaControls: "ariaControls", variant: "variant" }, host: { attributes: { "role": "tablist" }, properties: { "id": "id" } }, providers: [IconComponent], viewQueries: [{ propertyName: "tabNavigation", first: true, predicate: ["tabNavigation"], descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div #tabNavigation class=\"fudis-tab-navigation-bar\">\n  <div\n    *ngIf=\"_leftContentHidden()\"\n    class=\"fudis-tab-navigation-bar__button-container fudis-tab-navigation-bar__button-container--left\"\n  >\n    <button\n      [id]=\"id + '-scroll-button-left'\"\n      (click)=\"scrollLeft()\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"\n        'fudis-tab-navigation-bar__button-container__button fudis-tab-navigation-bar__button-container__button--left'\n      \"\n    >\n      <fudis-icon\n        class=\"fudis-tab-navigation-bar__button-container__button__icon\"\n        rotate=\"flip-180\"\n        icon=\"chevron-ring-fill\"\n      ></fudis-icon>\n    </button>\n  </div>\n  <div [class]=\"'fudis-tab-navigation-bar__wrapper fudis-tab-navigation-bar__wrapper--' + variant\">\n    <div\n      #scrollContainer\n      [class]=\"\n        'fudis-tab-navigation-bar__wrapper__tab-container fudis-tab-navigation-bar__wrapper__tab-container--' +\n        variant\n      \"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div\n    *ngIf=\"_rightContentHidden()\"\n    class=\"fudis-tab-navigation-bar__button-container fudis-tab-navigation-bar__button-container--right\"\n  >\n    <button\n      [id]=\"id + '-scroll-button-right'\"\n      (click)=\"scrollRight()\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"\n        'fudis-tab-navigation-bar__button-container__button fudis-tab-navigation-bar__button-container__button--right'\n      \"\n    >\n      <fudis-icon\n        class=\"fudis-tab-navigation-bar__button-container__button__icon\"\n        icon=\"chevron-ring-fill\"\n      ></fudis-icon>\n    </button>\n  </div>\n</div>\n", styles: [".fudis-tab-navigation-bar__button-container{background-color:#fff}.fudis-tab-navigation-bar__button-container--right{display:flex;position:absolute;top:0;right:0;align-items:flex-start;justify-content:flex-end;width:calc(2.5rem / var(--fudis-rem-multiplier));height:calc(3rem / var(--fudis-rem-multiplier))}.fudis-tab-navigation-bar__button-container--left{display:flex;position:absolute;top:0;left:0;align-items:flex-start;justify-content:flex-start;width:calc(2.5rem / var(--fudis-rem-multiplier));height:calc(3rem / var(--fudis-rem-multiplier))}.fudis-tab-navigation-bar__button-container__button{background-color:#fff;position:absolute;top:50%;transform:translateY(-50%);border-style:none;cursor:pointer;padding:0}.fudis-tab-navigation-bar__button-container__button:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-tab-navigation-bar__button-container__button--right{right:0}.fudis-tab-navigation-bar__button-container__button--left{left:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxFudisModule }, { kind: "component", type: IconComponent, selector: "fudis-icon", inputs: ["icon", "color", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabNavigationBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fudis-tab-navigation-bar', imports: [NgIf, NgxFudisModule], providers: [IconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[id]': 'id',
                        role: 'tablist',
                    }, template: "<div #tabNavigation class=\"fudis-tab-navigation-bar\">\n  <div\n    *ngIf=\"_leftContentHidden()\"\n    class=\"fudis-tab-navigation-bar__button-container fudis-tab-navigation-bar__button-container--left\"\n  >\n    <button\n      [id]=\"id + '-scroll-button-left'\"\n      (click)=\"scrollLeft()\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"\n        'fudis-tab-navigation-bar__button-container__button fudis-tab-navigation-bar__button-container__button--left'\n      \"\n    >\n      <fudis-icon\n        class=\"fudis-tab-navigation-bar__button-container__button__icon\"\n        rotate=\"flip-180\"\n        icon=\"chevron-ring-fill\"\n      ></fudis-icon>\n    </button>\n  </div>\n  <div [class]=\"'fudis-tab-navigation-bar__wrapper fudis-tab-navigation-bar__wrapper--' + variant\">\n    <div\n      #scrollContainer\n      [class]=\"\n        'fudis-tab-navigation-bar__wrapper__tab-container fudis-tab-navigation-bar__wrapper__tab-container--' +\n        variant\n      \"\n    >\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <div\n    *ngIf=\"_rightContentHidden()\"\n    class=\"fudis-tab-navigation-bar__button-container fudis-tab-navigation-bar__button-container--right\"\n  >\n    <button\n      [id]=\"id + '-scroll-button-right'\"\n      (click)=\"scrollRight()\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"\n        'fudis-tab-navigation-bar__button-container__button fudis-tab-navigation-bar__button-container__button--right'\n      \"\n    >\n      <fudis-icon\n        class=\"fudis-tab-navigation-bar__button-container__button__icon\"\n        icon=\"chevron-ring-fill\"\n      ></fudis-icon>\n    </button>\n  </div>\n</div>\n", styles: [".fudis-tab-navigation-bar__button-container{background-color:#fff}.fudis-tab-navigation-bar__button-container--right{display:flex;position:absolute;top:0;right:0;align-items:flex-start;justify-content:flex-end;width:calc(2.5rem / var(--fudis-rem-multiplier));height:calc(3rem / var(--fudis-rem-multiplier))}.fudis-tab-navigation-bar__button-container--left{display:flex;position:absolute;top:0;left:0;align-items:flex-start;justify-content:flex-start;width:calc(2.5rem / var(--fudis-rem-multiplier));height:calc(3rem / var(--fudis-rem-multiplier))}.fudis-tab-navigation-bar__button-container__button{background-color:#fff;position:absolute;top:50%;transform:translateY(-50%);border-style:none;cursor:pointer;padding:0}.fudis-tab-navigation-bar__button-container__button:focus{outline:2px dashed #484848;outline-offset:1px;box-shadow:0 0 0 calc(.25rem / var(--fudis-rem-multiplier)) #fff}.fudis-tab-navigation-bar__button-container__button--right{right:0}.fudis-tab-navigation-bar__button-container__button--left{left:0}\n"] }]
        }], propDecorators: { id: [{
                type: Input
            }], panel: [{
                type: Input
            }], ariaControls: [{
                type: Input
            }], variant: [{
                type: Input
            }], tabNavigation: [{
                type: ViewChild,
                args: ['tabNavigation']
            }], scrollContainer: [{
                type: ViewChild,
                args: ['scrollContainer']
            }] } });

/**
 * Button or a link inside a `fudis-tab-navigation-bar`.
 */
class TabNavigationTabComponent {
    /**
     * Currently active tab
     */
    get active() {
        return this._isActive;
    }
    set active(value) {
        if (value !== this._isActive) {
            this._isActive = value;
            if (this._isActive)
                this._tabNavigation?.updateActiveLink(this.id);
        }
    }
    constructor() {
        this._tabNavigation = inject(TabNavigationBarComponent);
        this._isActive = false;
        this._onKeyDown = (event) => {
            if (event.key === ' ' && event?.target instanceof HTMLAnchorElement) {
                event.preventDefault();
                const anchorElement = event.target;
                anchorElement.click();
            }
            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
                this._onArrowNavigation(event);
        };
        this._onArrowNavigation = (event) => {
            event.preventDefault();
            const tabElements = this._getTabs();
            const currentElement = this._tabNavigation?.scrollContainer?.nativeElement?.querySelector(':focus');
            if (currentElement && tabElements.length > 0) {
                const currentIndex = tabElements.indexOf(currentElement);
                let nextIndex = currentIndex;
                let focusElement = currentElement;
                if (event.key === 'ArrowLeft') {
                    event.preventDefault();
                    nextIndex = currentIndex > 0 ? currentIndex - 1 : tabElements.length - 1;
                    focusElement = tabElements[nextIndex];
                }
                else if (event.key === 'ArrowRight') {
                    event.preventDefault();
                    nextIndex = currentIndex < tabElements.length - 1 ? currentIndex + 1 : 0;
                    focusElement = tabElements[nextIndex];
                }
                focusElement?.focus();
                if (this._tabNavigation.isScrollable()) {
                    if (nextIndex === 0) {
                        this._tabNavigation?.scrollLeft(true);
                    }
                    else if (nextIndex === tabElements.length - 1) {
                        this._tabNavigation?.scrollRight(true);
                    }
                    else {
                        focusElement.scrollIntoView({
                            behavior: 'smooth',
                            inline: 'center',
                            block: 'nearest',
                        });
                    }
                }
            }
        };
        this._getTabs = () => {
            const tabNodes = this._tabNavigation.scrollContainer?.nativeElement?.querySelectorAll('[fudis-tab-navigation-tab]');
            return [...tabNodes];
        };
        effect(() => {
            this._ariaControls = this._tabNavigation.getAriaControls()();
        });
    }
    ngAfterViewInit() {
        if (this._isActive)
            this._tabNavigation?.updateActiveLink(this.id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabNavigationTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TabNavigationTabComponent, isStandalone: true, selector: "[fudis-tab-navigation-tab]", inputs: { id: "id", active: "active" }, host: { attributes: { "role": "tab" }, listeners: { "keydown": "_onKeyDown($event)" }, properties: { "id": "id", "attr.tabIndex": "_isActive ? 0 : -1", "attr.aria-selected": "_isActive", "attr.aria-controls": "_ariaControls", "class": "'fudis-tab-navigation-tab fudis-tab-navigation-tab--' + _tabNavigation.variant", "class.fudis-tab-navigation-tab--primary--active": "_tabNavigation.variant === 'primary' && _isActive", "class.fudis-tab-navigation-tab--secondary--active": "_tabNavigation.variant === 'secondary' && _isActive" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabNavigationTabComponent, decorators: [{
            type: Component,
            args: [{
                    selector: '[fudis-tab-navigation-tab]',
                    encapsulation: ViewEncapsulation.None,
                    template: '<ng-content></ng-content>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    host: {
                        '[id]': 'id',
                        role: 'tab',
                        '(keydown)': '_onKeyDown($event)',
                        '[attr.tabIndex]': '_isActive ? 0 : -1',
                        '[attr.aria-selected]': '_isActive',
                        '[attr.aria-controls]': '_ariaControls',
                        '[class]': "'fudis-tab-navigation-tab fudis-tab-navigation-tab--' + _tabNavigation.variant",
                        '[class.fudis-tab-navigation-tab--primary--active]': "_tabNavigation.variant === 'primary' && _isActive",
                        '[class.fudis-tab-navigation-tab--secondary--active]': "_tabNavigation.variant === 'secondary' && _isActive",
                    },
                }]
        }], ctorParameters: () => [], propDecorators: { id: [{
                type: Input
            }], active: [{
                type: Input
            }] } });

/**
 * Navigation tab panel associated with the Tab Navigation Bar component.
 */
class TabNavigationPanelComponent {
    constructor() {
        this.setActiveTabId = (id) => (this._activeTabId = id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabNavigationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TabNavigationPanelComponent, isStandalone: true, selector: "fudis-tab-navigation-panel", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.aria-labelledby": "_activeTabId", "id": "id" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TabNavigationPanelComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'fudis-tab-navigation-panel',
                    encapsulation: ViewEncapsulation.None,
                    template: '<ng-content></ng-content>',
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    host: {
                        '[attr.aria-labelledby]': '_activeTabId',
                        '[id]': 'id',
                        role: 'tabpanel',
                    },
                }]
        }], propDecorators: { id: [{
                type: Input
            }] } });

const fudisIconArray = [
    'achievement',
    'achievement-small',
    'alert',
    'alert-fill',
    'alert-small',
    'archive',
    'arrow-big',
    'arrow-dashed',
    'arrow-solid',
    'back',
    'brochure',
    'bullets',
    'calendar',
    'change-log',
    'check',
    'check-indeterminate-small',
    'check-small',
    'checkmark-circle',
    'chevron',
    'chevron-ring',
    'chevron-ring-fill',
    'clock',
    'close',
    'close-big',
    'code',
    'decrease-indent',
    'delete',
    'dot',
    'edit',
    'editor',
    'exclamation-mark-circle',
    'exclamation-mark-circle-fill',
    'exclamation-mark-circle-small',
    'eye',
    'eye-blind',
    'fail',
    'hourglass',
    'increase-indent',
    'info',
    'info-circle',
    'info-circle-fill',
    'info-circle-small',
    'junction',
    'link',
    'list-add',
    'list-minus',
    'lock',
    'lock-open',
    'magic-wand',
    'mail',
    'menu',
    'message',
    'minus',
    'minus-ring-fill',
    'new-tab',
    'notebook',
    'notification',
    'numbering',
    'paperclip',
    'pdf',
    'people',
    'person',
    'person-small',
    'picker',
    'pin-small',
    'place',
    'place-ring-fill',
    'plus',
    'print',
    'question-mark',
    'question-mark-small',
    'required',
    'ring-close',
    'ring-close-fill',
    'ring-plus',
    'ring-plus-fill',
    'rosette',
    'rule',
    'search',
    'seats',
    'settings',
    'shopping-cart',
    'sorter',
    'star',
    'switch',
    'three-dots',
    'three-dots-small',
    'waiting-approval',
    'waiting-decline',
    'zoom-in',
    'zoom-out',
];
const fudisIconColorArray = [
    'yellow',
    'red',
    'gray-dark',
    'gray-light',
    'primary',
    'primary-dark',
    'green',
    'white',
];
const fudisIconRotateArray = ['flip-180', 'cw-90', 'ccw-90', 'none'];

/**
 * File containing types used in FudisIdService
 */
const fudisIdComponents = [
    'alert',
    'autocomplete',
    'body-text',
    'button',
    'checkbox',
    'autocomplete-multi-select',
    'datepicker',
    'dialog',
    'dropdown',
    'error-message',
    'expandable',
    'fieldset',
    'form',
    'guidance',
    'heading',
    'localized-text-group',
    'link',
    'section',
    'text-area',
    'text-input',
    'validator-error-message',
    'popover',
];
const fudisIdParents = [
    'breadcrumbs',
    'checkbox-group',
    'language-badge-group',
    'radio-button-group',
];
const fudisIdGrandParents = [
    'description-list',
    'select',
    'multiselect',
    'dropdown-menu',
];

/**
 * Alert
 */
const fudisAlertPositionArray = ['static', 'absolute', 'fixed'];
/**
 * Badge
 */
const fudisBadgeVariantArray = [
    'accent',
    'danger',
    'primary',
    'secondary',
    'success',
];
/**
 * Button
 */
const fudisButtonVariantArray = ['primary', 'secondary', 'tertiary'];
const fudisButtonSizeArray = ['icon-only', 'small', 'medium'];
const fudisButtonTypeArray = ['submit', 'button'];
/**
 * Dialog
 */
const fudisDialogSizeArray = ['xs', 'sm', 'md', 'lg', 'xl'];
/**
 * Dropdown Menu
 */
const fudisDropdownMenuAlignArray = ['left', 'center', 'right'];
/**
 * FieldsetActions
 */
const fudisFieldsetActionsAlignArray = ['start', 'below', 'end'];
/**
 * Notification
 */
const fudisNotificationVariantArray = ['warning', 'danger', 'success', 'info'];

const fudisHeadingLevelArray = [1, 2, 3, 4, 5, 6];
const fudisHeadingVariantArray = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
const fudisBodyTextArray = [
    'lg-regular',
    'md-regular',
    'sm-regular',
    'lg-light',
    'md-light',
];
const fudisTextAlignArray = ['left', 'right', 'center'];

/**
 * Form Group Validators
 */
const FudisGroupValidators = {
    oneRequired,
    min: min$1,
    max: max$1,
};
/**
 * At least one option must be selected from a group
 */
function oneRequired(message) {
    return (controlGroup) => {
        const { controls } = controlGroup;
        if (controls) {
            const theOne = Object.keys(controls).find((key) => controls[key].value !== null &&
                controls[key].value !== '' &&
                controls[key].value !== false &&
                controls[key].value !== undefined);
            if (!theOne) {
                return {
                    oneRequired: { message },
                };
            }
        }
        return null;
    };
}
/**
 * Minimum selected options of a group
 */
function min$1(settings) {
    return (controlGroup) => {
        const { controls } = controlGroup;
        let amountOfSelected = 0;
        if (controls) {
            Object.keys(controls).forEach((key) => {
                if (controls[key].value) {
                    amountOfSelected += 1;
                }
            });
            if (amountOfSelected < settings.value) {
                return {
                    min: { message: settings.message, value: settings.value },
                };
            }
        }
        return null;
    };
}
/**
 * Maximum selected options of a group
 */
function max$1(settings) {
    return (controlGroup) => {
        const { controls } = controlGroup;
        let amountOfSelected = 0;
        if (controls) {
            Object.keys(controls).forEach((key) => {
                if (controls[key].value) {
                    amountOfSelected += 1;
                }
            });
            if (amountOfSelected > settings.value) {
                return {
                    max: { message: settings.message, value: settings.value },
                };
            }
        }
        return null;
    };
}

/**
 * Form Control Validators
 */
const FudisValidators = {
    required,
    email,
    maxLength,
    minLength,
    max,
    min,
    pattern,
    datepickerMin,
    datepickerMax,
};
/**
 * Fudis version of Validators.required
 */
function required(message) {
    return (control) => {
        if (!Validators.required(control)) {
            return null;
        }
        return { required: { message } };
    };
}
/**
 * Fudis version of Validators.email
 */
function email(message) {
    return (control) => {
        if (!Validators.email(control)) {
            return null;
        }
        return { email: { message } };
    };
}
/**
 * Fudis version of Validators.maxLength
 */
function maxLength(length, message) {
    return (control) => {
        if (!Validators.maxLength(length)(control) || length < 1) {
            return null;
        }
        return { maxlength: { message, requiredLength: length } };
    };
}
/**
 * Fudis version of Validators.minLength
 *
 * @param length
 * @param message
 * @param valueRequired By default this validator does not require, that control value cannot be
 *   empty. If set true, validator returns error, if control value is falsy.
 */
function minLength(length, message, valueRequired = false) {
    return (control) => {
        const requiredError = valueRequired && Validators.required(control);
        if ((!Validators.minLength(length)(control) || length < 1) && !requiredError) {
            return null;
        }
        return {
            minlength: {
                message,
                requiredLength: length,
            },
        };
    };
}
/**
 * Fudis version of Validators.min
 */
function min(minValue, message) {
    return (control) => {
        if (!Validators.min(minValue)(control)) {
            return null;
        }
        return {
            min: {
                message,
                min: minValue,
            },
        };
    };
}
/**
 * Fudis version of Validators.max
 */
function max(maxValue, message) {
    return (control) => {
        if (!Validators.max(maxValue)(control)) {
            return null;
        }
        return {
            max: {
                message,
                max: maxValue,
            },
        };
    };
}
/**
 * Fudis version of Validators.pattern
 */
function pattern(regex, message) {
    return (control) => {
        if (!Validators.pattern(regex)(control)) {
            return null;
        }
        return {
            pattern: {
                message,
            },
        };
    };
}
/**
 * Min date validator for Datepicker
 */
function datepickerMin(settings) {
    return (control) => {
        const simplifiedMinDate = settings.value.setHours(0, 0, 0, 0);
        const simplifiedControlDate = control.value?.setHours(0, 0, 0, 0);
        if (simplifiedMinDate > simplifiedControlDate) {
            return {
                datepickerMin: {
                    message: settings.message,
                    value: settings.value,
                },
            };
        }
        return null;
    };
}
/**
 * Max date validator for Datepicker
 */
function datepickerMax(settings) {
    return (control) => {
        const simplifiedMaxDate = settings.value.setHours(0, 0, 0, 0);
        const simplifiedControlDate = control.value?.setHours(0, 0, 0, 0);
        if (simplifiedMaxDate < simplifiedControlDate) {
            return {
                datepickerMax: {
                    message: settings.message,
                    value: settings.value,
                },
            };
        }
        return null;
    };
}

/*
 * Public API Surface of ngx-fudis
 * Include component/directive/service/validator to the list below, when you want to expose it outside.
 * If you create new type files, export them from the types/types.ts file. The types file is already exported from here.
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AlertComponent, AlertGroupComponent, BadgeComponent, BodyTextComponent, BreadcrumbsComponent, BreadcrumbsItemComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, CheckboxGroupOptionComponent, DateEndDirective, DateRangeComponent, DateStartDirective, DatepickerComponent, DescriptionListComponent, DescriptionListItemComponent, DescriptionListItemDetailsComponent, DescriptionListItemTermComponent, DialogActionsDirective, DialogCloseDirective, DialogComponent, DialogContentDirective, DialogTitleDirective, DropdownMenuComponent, DropdownMenuGroupComponent, DropdownMenuItemComponent, ErrorMessageDirective, ExpandableActionsDirective, ExpandableComponent, ExpandableContentDirective, FUDIS_DATE_FORMATS, FieldSetComponent, FieldsetActionsDirective, FieldsetContentDirective, FooterComponent, FooterContentLeftDirective, FooterContentRightDirective, FormActionsDirective, FormComponent, FormContentDirective, FormHeaderDirective, FormSubmitDirective, FudisAlertService, FudisBreakpointService, FudisDateInputFormat, FudisDialogService, FudisErrorSummaryService, FudisGridService, FudisGroupValidators, FudisTranslationService, FudisValidators, GridComponent, GridDirective, GridItemComponent, GridItemDirective, HeadingComponent, HorizontalRuleComponent, IconComponent, LanguageBadgeGroupComponent, LinkDirective, LoadingSpinnerComponent, LocalizedTextGroupComponent, MultiselectComponent, MultiselectOptionComponent, NgxFudisModule, NotificationComponent, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SectionActionsDirective, SectionComponent, SectionContentDirective, SelectComponent, SelectGroupComponent, SelectOptionComponent, SelectOptionsDirective, TabNavigationBarComponent, TabNavigationPanelComponent, TabNavigationTabComponent, TextAreaComponent, TextInputComponent, breakpointsMinWidthToObserve, defaultSpacingValue, fudisAlertPositionArray, fudisBadgeVariantArray, fudisBodyTextArray, fudisBreakpointsMinWidth, fudisButtonSizeArray, fudisButtonTypeArray, fudisButtonVariantArray, fudisDialogSizeArray, fudisDropdownMenuAlignArray, fudisFieldsetActionsAlignArray, fudisGridAlignItemsArray, fudisHeadingLevelArray, fudisHeadingVariantArray, fudisIconArray, fudisIconColorArray, fudisIconRotateArray, fudisIdComponents, fudisIdGrandParents, fudisIdParents, fudisInputSizeArray, fudisNotificationVariantArray, fudisSelectionGroupInputSizeArray, fudisSpacingArray, fudisSpacingValues, fudisTextAlignArray, gridColumnDefault, gridInputPropertyDefaults, gridItemDefault };
//# sourceMappingURL=funidata-ngx-fudis.mjs.map