@iamgld/ui 1.21.2 → 21.1.0

package/fesm2022/iamgld-ui.mjs

@@ -1,46 +1,21 @@
 import * as i0 from '@angular/core';
-import { Directive, input, numberAttribute, booleanAttribute, output, Component, ChangeDetectionStrategy, signal, computed, viewChild, ElementRef, contentChildren, effect, inject, DestroyRef, ChangeDetectorRef, forwardRef } from '@angular/core';
+import { inject, computed, signal, Directive, InjectionToken, Injectable, RendererFactory2, input, numberAttribute, booleanAttribute, output, ChangeDetectionStrategy, Component, viewChild, ElementRef, contentChildren, effect, DestroyRef, ChangeDetectorRef, forwardRef } from '@angular/core';
+import { AuthStore as AuthStore$1 } from '@ui/stores';
+import { HttpParams, HttpClient } from '@angular/common/http';
+import { TranslocoLanguageName as TranslocoLanguageName$1, TranslocoLanguageKey as TranslocoLanguageKey$1, CookiesKeys as CookiesKeys$1, Icons as Icons$1, UiTheme as UiTheme$1, IconsSpace as IconsSpace$1, IconsSize as IconsSize$1, ButtonColor as ButtonColor$1, ButtonSize as ButtonSize$1, DropdownDirection as DropdownDirection$1, DropdownType as DropdownType$1, LinkType as LinkType$1, LinkAlign as LinkAlign$1, RadioDirection as RadioDirection$1, TableSearchAction as TableSearchAction$1, TileColor as TileColor$1, TilePaddingSize as TilePaddingSize$1 } from '@ui/models';
+import { TranslocoService as TranslocoService$1, AuthService as AuthService$1, UiService as UiService$1 } from '@ui/services';
+import { Subject, switchMap, catchError, throwError, map, of, debounceTime } from 'rxjs';
+import { Router, RouterLink } from '@angular/router';
+import { CookieService } from 'ngx-cookie-service';
+import { signalStore, withState, withMethods, patchState, withHooks, watchState } from '@ngrx/signals';
+import { TranslocoService as TranslocoService$2 } from '@jsverse/transloco';
 import { NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
-import { RouterLink } from '@angular/router';
-import * as i1 from '@angular/forms';
-import { FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { DropdownMenuTemplateDirective as DropdownMenuTemplateDirective$1, InputErrorMessageDirective as InputErrorMessageDirective$1 } from '@ui/directives';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { debounceTime } from 'rxjs';
-
-function formatDateToISO(outerDate) {
-    const date = new Date(outerDate);
-    if (!isNaN(date.getTime()))
-        return date.toISOString();
-    else
-        return null;
-}
-function formatDateFromISOToDDMMYYYY(dateAsString) {
-    const [year, month, day] = dateAsString.split('-');
-    if (year && month && day)
-        return `${day}/${month}/${year}`;
-    else
-        return null;
-}
-function formatDateFromISOToYYYYMMDD(dateAsString) {
-    if (!dateAsString)
-        return null;
-    const [date] = dateAsString.split('T');
-    if (date)
-        return date;
-    else
-        return null;
-}
-function getDateWithOffsetInYears({ years }) {
-    const today = new Date();
-    today.setFullYear(today.getFullYear() + years); // Agrega o resta años
-    return today;
-}
-
-function capitalizeFirstLetter(str) {
-    if (!str)
-        return str; // Maneja el caso de string vacío
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-}
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms';
+import { formatISODateToDDMMYYYY as formatISODateToDDMMYYYY$1, updateValueWithMask as updateValueWithMask$1, formatDDMMYYYYToISODate as formatDDMMYYYYToISODate$1 } from '@ui/utils';
+import { NATURAL_NUMBER_REGEX_TO_CLEAN as NATURAL_NUMBER_REGEX_TO_CLEAN$1, STRING_REGEX_TO_CLEAN as STRING_REGEX_TO_CLEAN$1 } from '@ui/validators';
 
 var ButtonColor;
 (function (ButtonColor) {
@@ -182,16 +157,186 @@ var TilePaddingSize;
     TilePaddingSize["large"] = "large";
 })(TilePaddingSize || (TilePaddingSize = {}));
 
+var CookiesKeys;
+(function (CookiesKeys) {
+    CookiesKeys["accessToken"] = "gld-access-token";
+    CookiesKeys["refreshToken"] = "gld-refresh-token";
+})(CookiesKeys || (CookiesKeys = {}));
+
+var EnvironmentType;
+(function (EnvironmentType) {
+    EnvironmentType["production"] = "production";
+    EnvironmentType["staging"] = "staging";
+    EnvironmentType["development"] = "development";
+    EnvironmentType["local"] = "local";
+})(EnvironmentType || (EnvironmentType = {}));
+
+var TranslocoLanguageKey;
+(function (TranslocoLanguageKey) {
+    TranslocoLanguageKey["spanish"] = "es";
+    TranslocoLanguageKey["english"] = "en";
+})(TranslocoLanguageKey || (TranslocoLanguageKey = {}));
+var TranslocoLanguageName;
+(function (TranslocoLanguageName) {
+    TranslocoLanguageName["spanish"] = "spanish";
+    TranslocoLanguageName["english"] = "english";
+})(TranslocoLanguageName || (TranslocoLanguageName = {}));
+
+var UiTheme;
+(function (UiTheme) {
+    UiTheme["dark"] = "theme--dark";
+    UiTheme["light"] = "theme--light";
+    UiTheme["system"] = "theme--system";
+})(UiTheme || (UiTheme = {}));
+
+function updateValueWithMask({ mask, value }) {
+    if (!value)
+        return value;
+    if (!value.length)
+        return value;
+    let accumulate = 0;
+    const maskApplied = [];
+    value.split('').map((character, index) => {
+        const placeholder = mask.split('')[index + accumulate];
+        if (placeholder === '0' || character === placeholder)
+            maskApplied.push(character);
+        else {
+            maskApplied.push(placeholder);
+            maskApplied.push(character);
+            accumulate += 1;
+        }
+    });
+    return maskApplied.join('');
+}
+
+const YEAR_LENGTH = 4;
+const MIN_MONTH = 1;
+const MAX_MONTH = 12;
+const MIN_DAY = 1;
+const MAX_DAY = 31;
+function formatDateToISODate(options) {
+    const { date } = options;
+    const isValidDate = !Number.isNaN(new Date(date).getTime());
+    // It isn't a valid date
+    if (!isValidDate)
+        return null;
+    // If it's a numeric string (timestamp in seconds)
+    if (typeof date === 'string' && /^\d+$/.test(date)) {
+        // If it has 10 digits, it's a timestamp in seconds
+        if (date.length === 10) {
+            const ms = Number.parseInt(date, 10) * 1000;
+            const _date = new Date(ms);
+            if (!Number.isNaN(_date.getTime()))
+                return _date.toISOString().split('T')[0];
+            else
+                return null;
+        }
+        // If it has 13 digits, it's a timestamp in milliseconds
+        if (date.length === 13 || date.length === 12) {
+            const ms = Number.parseInt(date, 10);
+            const _date = new Date(ms);
+            if (!Number.isNaN(_date.getTime()))
+                return _date.toISOString().split('T')[0];
+            else
+                return null;
+        }
+    }
+    // If it's a Date or date string
+    const _date = new Date(date);
+    return _date.toISOString().split('T')[0];
+}
+function formatISODateToDate(options) {
+    const { date } = options;
+    const isValidDate = !Number.isNaN(new Date(date).getTime());
+    // It isn't a valid date
+    if (!isValidDate)
+        return null;
+    // If it's a Date or date string
+    const [year, month, day] = date.split('-').map(Number);
+    const _date = new Date(year, month - 1, day);
+    // Hora local, pero sin problemas de zona horaria
+    return _date;
+}
+function formatDDMMYYYYToISODate(options) {
+    const { date } = options;
+    // It isn't a valid date
+    if (!date)
+        return null;
+    const [day, month, year] = date.split('/').map(Number);
+    // It isn't a valid date
+    if (!day ||
+        day < MIN_DAY ||
+        day > MAX_DAY ||
+        !month ||
+        month < MIN_MONTH ||
+        month > MAX_MONTH ||
+        !year ||
+        String(year).length < YEAR_LENGTH)
+        return null;
+    // Create the date and subtract 1 so that JavaScript interprets the month correctly
+    const _date = new Date(Date.UTC(year, month - 1, day));
+    // It isn't a valid date
+    const isValidDate = !Number.isNaN(_date.getTime());
+    if (!isValidDate)
+        return null;
+    return formatDateToISODate({ date: _date });
+}
+function formatISODateToDDMMYYYY(options) {
+    const { date } = options;
+    const isValidDate = !Number.isNaN(new Date(date).getTime());
+    // It isn't a valid date
+    if (!isValidDate)
+        return null;
+    // If it's a Date or date string
+    const _date = new Date(date);
+    const year = _date.getUTCFullYear();
+    const month = String(_date.getUTCMonth() + 1).padStart(2, '0');
+    const day = String(_date.getUTCDate()).padStart(2, '0');
+    return `${day}/${month}/${year}`;
+}
+function addDaysToISODate(options) {
+    const { date, days } = options;
+    const isValidDate = !Number.isNaN(new Date(date).getTime());
+    // It isn't a valid date
+    if (!isValidDate)
+        return null;
+    // It's a valid date
+    const _date = new Date(date);
+    _date.setUTCDate(_date.getUTCDate() + days);
+    return _date.toISOString().split('T')[0];
+}
+function addYearsToISODate(options) {
+    const { date, years } = options;
+    const isValidDate = !Number.isNaN(new Date(date).getTime());
+    // It isn't a valid date
+    if (!isValidDate)
+        return null;
+    // It's a valid date
+    const _date = new Date(date);
+    _date.setUTCFullYear(_date.getUTCFullYear() + years);
+    return _date.toISOString().split('T')[0];
+}
+
+function capitalizeFirstLetter(value) {
+    if (!value)
+        return value; // Catch when the value is empty
+    return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+}
+
 // Shared Imports
+// import { formatDateFromISOToYYYYMMDD } from '@ui/utils'
 // Regex to validate the ISO date format (YYYY-MM-DD)
 const ISO_DATE_REGEX = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
 function isDateValidator() {
     return (control) => {
-        const value = formatDateFromISOToYYYYMMDD(control.value);
+        // const value = formatDateFromISOToYYYYMMDD(control.value)
+        const value = control.value;
         if (!value)
             return null;
         if (!ISO_DATE_REGEX.test(value))
-            return { isDate: 'This field must be a valid date in the format YYYY-MM-DD!' };
+            return {
+                isDate: 'This field must be a valid date in the format YYYY-MM-DD!',
+            };
         // Verify if the date is valid (additional logic)
         const [year, month, day] = value.split('-').map(Number);
         const date = new Date(year, month - 1, day);
@@ -274,51 +419,40 @@ function isFormSelectItemValidator() {
     };
 }
 
-function isLicensePlateValidator({ vehicleType, }) {
+// Regex para validar números naturales (0, 1, 2, 3, ...)
+const NATURAL_NUMBER_REGEX = /^[0-9]+$/;
+const NATURAL_NUMBER_REGEX_TO_CLEAN = /[^0-9]/g;
+function isNaturalNumberValidator() {
     return (control) => {
-        const value = control.value;
-        // Definir los patrones de acuerdo al tipo de vehículo
-        const patterns = {
-            AUTO: [
-                /^[a-zA-Z]{3}[\d]{3}$/, // Auto viejo
-                /^[a-zA-Z]{2}[\d]{3}[a-zA-Z]{2}$/, // Auto nuevo
-            ],
-            MOTO: [
-                /^[\d]{3}[a-zA-Z]{3}$/, // Moto viejo
-                /^[a-zA-Z]{1}[\d]{3}[a-zA-Z]{3}$/, // Moto nuevo
-            ],
-            BOTH: [
-                /^[a-zA-Z]{3}[\d]{3}$/, // Auto viejo
-                /^[a-zA-Z]{2}[\d]{3}[a-zA-Z]{2}$/, // Auto nuevo
-                /^[\d]{3}[a-zA-Z]{3}$/, // Moto viejo
-                /^[a-zA-Z]{1}[\d]{3}[a-zA-Z]{3}$/, // Moto nuevo
-            ],
-        };
-        const patternsToValid = patterns[vehicleType];
+        const value = String(control.value).trim();
         if (!value)
             return null;
-        const isValid = patternsToValid.some((pattern) => pattern.test(value));
-        return isValid ? null : { isLicensePlate: 'El campo debe ser una patente valida!' };
+        if (NATURAL_NUMBER_REGEX.test(value))
+            return null;
+        return { isNaturalNumber: 'Debes ingresar solo números.' };
     };
 }
 
-// Regex para validar números naturales (0, 1, 2, 3, ...)
-const NATURAL_NUMBER_REGEX = /^[0-9]+$/;
-function isNaturalNumberValidator() {
+// Regex para validar string y acepta acentos y espacios
+const STRING_REGEX = /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]+$/;
+const STRING_REGEX_TO_CLEAN = /[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g;
+function isStringValidator() {
     return (control) => {
-        const value = control.value;
+        const value = String(control.value).trim();
         if (!value)
             return null;
-        if (NATURAL_NUMBER_REGEX.test(value))
+        if (STRING_REGEX.test(value))
             return null;
-        return { naturalNumber: 'This field must contain only valid numbers!' };
+        return { isString: 'Debes ingresar solo caracteres.' };
     };
 }
 
 // Shared Imports
+// import { formatDateFromISOToYYYYMMDD } from '@ui/utils'
 function minimumAgeValidator({ minAge }) {
     return (control) => {
-        const value = formatDateFromISOToYYYYMMDD(control.value);
+        // const value = formatDateFromISOToYYYYMMDD(control.value)
+        const value = control.value;
         if (!value)
             return null;
         // Verify if the date is valid (additional logic)
@@ -371,12 +505,123 @@ function mustUnmatchValidator({ controlName, mustUnmatchControlName, errorMessag
     };
 }
 
+// Angular Imports
+const addTokenInterceptor = (request, next) => {
+    const authStore = inject(AuthStore$1);
+    const logged = computed(() => authStore.logged(), { ...(ngDevMode ? { debugName: "logged" } : {}) });
+    const accessToken = computed(() => authStore.accessToken(), { ...(ngDevMode ? { debugName: "accessToken" } : {}) });
+    let cloneRequest = request;
+    if (logged() && request.headers.has('Authorization')) {
+        cloneRequest = request.clone({
+            headers: request.headers.set('Authorization', `Bearer ${accessToken()}`),
+        });
+    }
+    return next(cloneRequest);
+};
+
+// Angular Imports
+const changeLanguageInterceptor = (request, next) => {
+    const translocoService = inject(TranslocoService$1);
+    let cloneRequest = request;
+    if (request.headers.has('Language')) {
+        if (request.method.toLowerCase() === 'get') {
+            let language = TranslocoLanguageName$1.english;
+            switch (translocoService.getLanguage()) {
+                case TranslocoLanguageKey$1.english:
+                    language = TranslocoLanguageName$1.english;
+                    break;
+                case TranslocoLanguageKey$1.spanish:
+                    language = TranslocoLanguageName$1.spanish;
+                    break;
+                default:
+                    language = TranslocoLanguageName$1.english;
+                    break;
+            }
+            const params = new HttpParams({ fromObject: { language } });
+            // const headers = request.headers.set('Language', language)
+            const headers = request.headers.delete('Language');
+            cloneRequest = request.clone({ headers, params });
+        }
+    }
+    return next(cloneRequest);
+};
+
+const refreshTokenInterceptor = (request, next) => {
+    const authStore = inject(AuthStore$1);
+    const authService = inject(AuthService$1);
+    const logged = computed(() => authStore.logged(), { ...(ngDevMode ? { debugName: "logged" } : {}) });
+    const accessToken = computed(() => authStore.accessToken(), { ...(ngDevMode ? { debugName: "accessToken" } : {}) });
+    const refreshToken = computed(() => authStore.refreshToken(), { ...(ngDevMode ? { debugName: "refreshToken" } : {}) });
+    const refreshAccessTokenInProgress = signal(false, { ...(ngDevMode ? { debugName: "refreshAccessTokenInProgress" } : {}) });
+    const doSameRequestCallStack = new Subject();
+    const handlerRefreshAccessToken = (request, next) => {
+        if (refreshAccessTokenInProgress()) {
+            return doSameRequestCallStack.pipe(switchMap((newAccessToken) => {
+                return next(doSameRequestWithNewAccessToken(request, newAccessToken));
+            }));
+        }
+        refreshAccessTokenInProgress.set(true);
+        return authService.refreshAccessToken({ refreshToken: refreshToken() }).pipe(switchMap(() => {
+            refreshAccessTokenInProgress.set(false);
+            doSameRequestCallStack.next(accessToken());
+            return next(doSameRequestWithNewAccessToken(request, accessToken()));
+        }));
+    };
+    const doSameRequestWithNewAccessToken = (request, newAccessToken) => {
+        return request.clone({
+            headers: request.headers.set('Authorization', `Bearer ${newAccessToken}`),
+        });
+    };
+    return next(request).pipe(catchError((error) => {
+        // console.log('error', error)
+        if (logged() && request.headers.has('Authorization')) {
+            const errorTyped = error;
+            if (errorTyped?.status === 401) {
+                console.log('Refreshing access token...');
+                return handlerRefreshAccessToken(request, next);
+            }
+            return throwError(() => error);
+        }
+        else {
+            return throwError(() => error);
+        }
+    }));
+};
+
+// Angular Imports
+const isLoggedGuard = () => {
+    // console.log('[Guard] isLoggedGuard')
+    const router = inject(Router);
+    const authStore = inject(AuthStore$1);
+    const cookiesService = inject(CookieService);
+    // Check if the code is running in the browser
+    const isBrowser = typeof window !== 'undefined';
+    if (!isBrowser)
+        return false;
+    const accessToken = cookiesService.get(CookiesKeys$1.accessToken);
+    const refreshToken = cookiesService.get(CookiesKeys$1.refreshToken);
+    if (accessToken && refreshToken) {
+        if (!authStore.logged()) {
+            authStore.signin({ accessToken, refreshToken });
+        }
+        return true;
+    }
+    else {
+        console.error(`The value of the accessToken (${accessToken}) and the refreshToken (${refreshToken}) is not a valid one`);
+        if (authStore.logged()) {
+            authStore.signout();
+        }
+        router.navigate(['/signin']);
+        return false;
+    }
+};
+
 // Angular Imports
 class DropdownMenuTemplateDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownMenuTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: DropdownMenuTemplateDirective, isStandalone: true, selector: "[gldDropdownMenuTemplate]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DropdownMenuTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: DropdownMenuTemplateDirective, isStandalone: true, selector: "[gldDropdownMenuTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownMenuTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DropdownMenuTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[gldDropdownMenuTemplate]',
@@ -385,81 +630,231 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
 
 // Angular Imports
 class InputErrorMessageDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputErrorMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.1", type: InputErrorMessageDirective, isStandalone: true, selector: "[gldInputErrorMessage]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputErrorMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: InputErrorMessageDirective, isStandalone: true, selector: "[gldInputErrorMessage]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputErrorMessageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputErrorMessageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[gldInputErrorMessage]',
                 }]
         }] });
 
+// Store Imports
+const initialAuthState = {
+    logged: false,
+    accessToken: '',
+    refreshToken: '',
+};
+const AuthStore = signalStore(withState(initialAuthState), withMethods((store, cookiesService = inject(CookieService)) => ({
+    signin: (parameters) => {
+        const { accessToken, refreshToken, saveCookie = true } = parameters;
+        if (saveCookie) {
+            cookiesService.set(CookiesKeys$1.accessToken, accessToken);
+            cookiesService.set(CookiesKeys$1.refreshToken, refreshToken);
+        }
+        patchState(store, (previous) => ({
+            ...previous,
+            logged: true,
+            accessToken,
+            refreshToken,
+        }));
+    },
+    signout: () => {
+        cookiesService.delete(CookiesKeys$1.accessToken);
+        cookiesService.delete(CookiesKeys$1.refreshToken);
+        patchState(store, (previous) => ({
+            ...previous,
+            logged: false,
+            accessToken: '',
+            refreshToken: '',
+        }));
+    },
+})));
+
 // Angular Imports
-class IconComponent {
-    IconsSpace = IconsSpace;
-    Icons = Icons;
-    icon = input.required();
-    size = input(IconsSize.normal);
-    space = input(IconsSpace.none);
-    moveTopToBottom = input(0, { transform: numberAttribute });
-    moveLeftToRight = input(0, { transform: numberAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    clicked = output();
-    emitClick() {
-        if (!this.disabled())
-            this.clicked.emit();
+const STORES_ENVIRONMENT = new InjectionToken('stores-environment');
+
+// Store Imports
+const initialUiState = {
+    theme: UiTheme$1.system,
+    iconTheme: Icons$1.macLine,
+};
+const UiStore = signalStore(withState(initialUiState), withHooks({
+    onInit(store) {
+        watchState(store, () => {
+            // console.log('[ui-store]', state)
+        });
+    },
+}), withMethods((store, uiService = inject(UiService$1)) => ({
+    changeTheme: ({ theme, iconTheme, }) => {
+        uiService.changeTheme(theme);
+        patchState(store, () => ({ theme, iconTheme }));
+    },
+})));
+
+// Angular Imports
+const SERVICES_ENVIRONMENT = new InjectionToken('services-environment');
+
+// Angular Imports
+class AuthService {
+    environment = inject(SERVICES_ENVIRONMENT);
+    router = inject(Router);
+    http = inject(HttpClient);
+    authStore = inject(AuthStore$1);
+    iamgldApi = computed(() => this.environment.iamgldApi, { ...(ngDevMode ? { debugName: "iamgldApi" } : {}) });
+    signin(parameters) {
+        const { email, password } = parameters;
+        const url = `${this.iamgldApi()}/v1/auth/signin`;
+        const payload = {
+            email,
+            password,
+        };
+        return this.http.post(url, payload).pipe(map((response) => {
+            if (response && response.accessToken && response.refreshToken) {
+                this.authStore.signin({
+                    accessToken: response.accessToken,
+                    refreshToken: response.refreshToken,
+                });
+            }
+            else {
+                throw new Error('An unexpected error occurred when we were trying to hit this api - signin');
+            }
+        }));
     }
-    keyup() {
-        this.emitClick();
+    refreshAccessToken(parameters) {
+        const { refreshToken } = parameters;
+        const url = `${this.iamgldApi()}/v1/auth/refresh`;
+        const payload = {
+            refreshToken,
+        };
+        return this.http.post(url, payload).pipe(catchError((error) => {
+            if (error &&
+                error.error &&
+                error.error.statusCode === 401 &&
+                error.error.message === 'jwt expired') {
+                // console.log('logout')
+                this.authStore.signout();
+                this.router.navigate(['/signin']);
+                return throwError(() => new Error('Session expired. Please log in again.'));
+            }
+            return throwError(() => error);
+        }), map((response) => {
+            if (response && response.accessToken && response.refreshToken) {
+                this.authStore.signin({
+                    accessToken: response.accessToken,
+                    refreshToken: response.refreshToken,
+                    saveCookie: false,
+                });
+            }
+            else {
+                this.authStore.signout();
+                this.router.navigate(['/signin']);
+                throw new Error('An unexpected error occurred when we were trying to hit this api - refreshAccessToken');
+            }
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: IconComponent, isStandalone: true, selector: "gld-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span\r\n  tabindex=\"-1\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\"\r\n  class=\"icon icon--{{ size() }}\"\r\n  [class.icon--left]=\"space() === IconsSpace.left\"\r\n  [class.icon--right]=\"space() === IconsSpace.right\"\r\n  [style.right.px]=\"moveLeftToRight()\"\r\n  [style.top.px]=\"moveTopToBottom()\">\r\n  @switch (icon()) {\r\n    @case (Icons.arrowDownSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.arrowUpSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxBlankCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loader4Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.logoutCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loginCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.fileList3Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.menuLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.sunLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.moonClearLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.englishInput) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.translate) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.user4Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.shapesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.closeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeCloseLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.linkedinBoxFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.githubFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.instagramFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.twitterXFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.downloadCloud2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.globeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.mailSendLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.pagesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitForkLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryPrivateLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.starLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.calendar2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.macLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.more2Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.editLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.deleteBinLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\r\n      </svg>\r\n    }\r\n  }\r\n</span>\r\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AuthService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gld-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  tabindex=\"-1\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\"\r\n  class=\"icon icon--{{ size() }}\"\r\n  [class.icon--left]=\"space() === IconsSpace.left\"\r\n  [class.icon--right]=\"space() === IconsSpace.right\"\r\n  [style.right.px]=\"moveLeftToRight()\"\r\n  [style.top.px]=\"moveTopToBottom()\">\r\n  @switch (icon()) {\r\n    @case (Icons.arrowDownSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.arrowUpSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxBlankCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loader4Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.logoutCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loginCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.fileList3Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.menuLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.sunLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.moonClearLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.englishInput) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.translate) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.user4Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.shapesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.closeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeCloseLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.linkedinBoxFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.githubFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.instagramFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.twitterXFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.downloadCloud2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.globeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.mailSendLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.pagesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitForkLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryPrivateLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.starLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.calendar2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.macLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.more2Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.editLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.deleteBinLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\r\n      </svg>\r\n    }\r\n  }\r\n</span>\r\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable
         }] });
 
 // Angular Imports
-const components$8 = [IconComponent];
-class ButtonComponent {
-    name = input.required();
-    color = input(ButtonColor.pink);
-    size = input(ButtonSize.normal);
-    icon = input(null);
-    iconSize = input();
-    moveTopToBottom = input(0, { transform: numberAttribute });
-    moveLeftToRight = input(0, { transform: numberAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    full = input(false, { transform: booleanAttribute });
-    clicked = output();
-    emitClick() {
-        if (!this.disabled())
-            this.clicked.emit();
+// Don't remove providedIn: 'root' decorator, it's important for the custom preloading works
+class CustomPreloadingStrategyService {
+    preload(route, load) {
+        if (route && route.data && route.data['preload']) {
+            console.log(`[preloading] Precargando ${route.path}`);
+            return load();
+        }
+        return of(null);
     }
-    keyup() {
-        this.emitClick();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CustomPreloadingStrategyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CustomPreloadingStrategyService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CustomPreloadingStrategyService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// Angular Imports
+class EnvironmentsService {
+    environment = inject(SERVICES_ENVIRONMENT);
+    getEnvironment() {
+        return this.environment;
+    }
+    getEnvironmentLabel() {
+        return this.environment.environmentType;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ButtonComponent, isStandalone: true, selector: "gld-button", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\r\n  id=\"{{ name() }}\"\r\n  attr.aria-label=\"{{ name() }}\"\r\n  class=\"button button--{{ color() }} button--{{ size() }}\"\r\n  [class.button--disabled]=\"disabled()\"\r\n  [class.button--full]=\"full()\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\">\r\n  <!-- Icon -->\r\n  @let innerIcon = icon();\r\n  @if (innerIcon) {\r\n    <gld-icon\r\n      [moveTopToBottom]=\"moveTopToBottom()\"\r\n      [moveLeftToRight]=\"moveLeftToRight()\"\r\n      [icon]=\"innerIcon\"\r\n      [size]=\"iconSize() ?? size()\"\r\n      [disabled]=\"disabled()\" />\r\n  }\r\n  <!-- Content -->\r\n  <span>\r\n    <ng-content>no content</ng-content>\r\n  </span>\r\n</button>\r\n\r\n<!-- Only used by DropdownMenuComponent -->\r\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\r\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}:host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: EnvironmentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: EnvironmentsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gld-button', imports: [...components$8], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  id=\"{{ name() }}\"\r\n  attr.aria-label=\"{{ name() }}\"\r\n  class=\"button button--{{ color() }} button--{{ size() }}\"\r\n  [class.button--disabled]=\"disabled()\"\r\n  [class.button--full]=\"full()\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\">\r\n  <!-- Icon -->\r\n  @let innerIcon = icon();\r\n  @if (innerIcon) {\r\n    <gld-icon\r\n      [moveTopToBottom]=\"moveTopToBottom()\"\r\n      [moveLeftToRight]=\"moveLeftToRight()\"\r\n      [icon]=\"innerIcon\"\r\n      [size]=\"iconSize() ?? size()\"\r\n      [disabled]=\"disabled()\" />\r\n  }\r\n  <!-- Content -->\r\n  <span>\r\n    <ng-content>no content</ng-content>\r\n  </span>\r\n</button>\r\n\r\n<!-- Only used by DropdownMenuComponent -->\r\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\r\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}:host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: EnvironmentsService, decorators: [{
+            type: Injectable
+        }] });
+
+// Shared Imports
+class TranslocoService {
+    translocoService = inject(TranslocoService$2);
+    changeLanguage(language) {
+        this.translocoService.setActiveLang(language);
+    }
+    getLanguage() {
+        return this.translocoService.getActiveLang();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslocoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslocoService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslocoService, decorators: [{
+            type: Injectable
+        }] });
+class TranslocoHttpLoader {
+    httpClient = inject(HttpClient);
+    getTranslation(lang) {
+        return this.httpClient.get(`assets/i18n/${lang}.json`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslocoHttpLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslocoHttpLoader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TranslocoHttpLoader, decorators: [{
+            type: Injectable
         }] });
 
 // Angular Imports
-class IconButtonComponent {
-    icon = input.required();
-    name = input.required();
-    iconSize = input(IconsSize.normal);
-    space = input(IconsSpace.none);
-    moveTopToBottom = input(0, { transform: numberAttribute });
-    moveLeftToRight = input(0, { transform: numberAttribute });
-    background = input(false, { transform: booleanAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    color = input(ButtonColor.pink);
+class UiService {
+    rendererFactory = inject(RendererFactory2);
+    renderer;
+    allThemes = [UiTheme$1.dark, UiTheme$1.light, UiTheme$1.system];
+    constructor() {
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    changeTheme(theme) {
+        if (document && document.body) {
+            // Remove all previous themes
+            this.allThemes.map((theme) => this.renderer.removeClass(document.body, theme));
+            // Add the new theme
+            this.renderer.addClass(document.body, theme);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UiService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UiService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// Angular Imports
+class IconComponent {
+    IconsSpace = IconsSpace$1;
+    Icons = Icons$1;
+    icon = input.required({ ...(ngDevMode ? { debugName: "icon" } : {}) });
+    size = input(IconsSize$1.normal, { ...(ngDevMode ? { debugName: "size" } : {}) });
+    space = input(IconsSpace$1.none, { ...(ngDevMode ? { debugName: "space" } : {}) });
+    moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
+    moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     clicked = output();
     emitClick() {
         if (!this.disabled())
@@ -468,54 +863,58 @@ class IconButtonComponent {
     keyup() {
         this.emitClick();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: IconButtonComponent, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  id=\"{{ name() }}\"\n  attr.aria-label=\"{{ name() }}\"\n  class=\"button button--{{ color() }}\"\n  [class.button--disabled]=\"disabled()\"\n  [class.button--background]=\"background()\"\n  (click)=\"emitClick()\"\n  (keyup.enter)=\"keyup()\">\n  <!-- Icon -->\n  <gld-icon\n    [icon]=\"icon()\"\n    [size]=\"iconSize()\"\n    [space]=\"space()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: IconComponent, isStandalone: true, selector: "gld-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<span\r\n  tabindex=\"-1\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\"\r\n  class=\"icon icon--{{ size() }}\"\r\n  [class.icon--left]=\"space() === IconsSpace.left\"\r\n  [class.icon--right]=\"space() === IconsSpace.right\"\r\n  [style.right.px]=\"moveLeftToRight()\"\r\n  [style.top.px]=\"moveTopToBottom()\">\r\n  @switch (icon()) {\r\n    @case (Icons.arrowDownSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.arrowUpSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxBlankCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loader4Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.logoutCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loginCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.fileList3Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.menuLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.sunLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.moonClearLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.englishInput) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.translate) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.user4Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.shapesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.closeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeCloseLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.linkedinBoxFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.githubFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.instagramFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.twitterXFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.downloadCloud2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.globeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.mailSendLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.pagesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitForkLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryPrivateLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.starLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.calendar2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.macLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.more2Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.editLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.deleteBinLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\r\n      </svg>\r\n    }\r\n  }\r\n</span>\r\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: IconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  id=\"{{ name() }}\"\n  attr.aria-label=\"{{ name() }}\"\n  class=\"button button--{{ color() }}\"\n  [class.button--disabled]=\"disabled()\"\n  [class.button--background]=\"background()\"\n  (click)=\"emitClick()\"\n  (keyup.enter)=\"keyup()\">\n  <!-- Icon -->\n  <gld-icon\n    [icon]=\"icon()\"\n    [size]=\"iconSize()\"\n    [space]=\"space()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
-        }] });
+            args: [{ selector: 'gld-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n  tabindex=\"-1\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\"\r\n  class=\"icon icon--{{ size() }}\"\r\n  [class.icon--left]=\"space() === IconsSpace.left\"\r\n  [class.icon--right]=\"space() === IconsSpace.right\"\r\n  [style.right.px]=\"moveLeftToRight()\"\r\n  [style.top.px]=\"moveTopToBottom()\">\r\n  @switch (icon()) {\r\n    @case (Icons.arrowDownSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.arrowUpSLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.checkboxBlankCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loader4Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.logoutCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 11H13V13H5V16L0 12L5 8V11ZM3.99927 18H6.70835C8.11862 19.2447 9.97111 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.97111 4 8.11862 4.75527 6.70835 6H3.99927C5.82368 3.57111 8.72836 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.72836 22 5.82368 20.4289 3.99927 18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.loginCircleLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 11V8L15 12L10 16V13H1V11H10ZM2.4578 15H4.58152C5.76829 17.9318 8.64262 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C8.64262 4 5.76829 6.06817 4.58152 9H2.4578C3.73207 4.94289 7.52236 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C7.52236 22 3.73207 19.0571 2.4578 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 21V23.5L10 21.5L7 23.5V21H6.5C4.567 21 3 19.433 3 17.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V20C21 20.5523 20.5523 21 20 21H13ZM13 19H19V16H6.5C5.67157 16 5 16.6716 5 17.5C5 18.3284 5.67157 19 6.5 19H7V17H13V19ZM19 14V4H6V14.0354C6.1633 14.0121 6.33024 14 6.5 14H19ZM7 5H9V7H7V5ZM7 8H9V10H7V8ZM7 11H9V13H7V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.fileList3Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM16 20V4H4V19C4 19.5523 4.44772 20 5 20H16ZM6 7H14V9H6V7ZM6 11H14V13H6V11ZM6 15H11V17H6V15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.menuLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path d=\"M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.sunLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.moonClearLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.englishInput) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 10H16L16.0005 10.7574C16.7154 10.279 17.5751 10 18.5 10C20.9853 10 23 12.0147 23 14.5V20H21V14.5C21 13.07 19.8255 12 18.5 12C17.1745 12 16 13.07 16 14.5V20H14V10ZM12 4V6H4V11H12V13H4V18H12V20H2V4H12Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.translate) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 15V17C5 18.0544 5.81588 18.9182 6.85074 18.9945L7 19H10V21H7C4.79086 21 3 19.2091 3 17V15H5ZM18 10L22.4 21H20.245L19.044 18H14.954L13.755 21H11.601L16 10H18ZM17 12.8852L15.753 16H18.245L17 12.8852ZM8 2V4H12V11H8V14H6V11H2V4H6V2H8ZM17 3C19.2091 3 21 4.79086 21 7V9H19V7C19 5.89543 18.1046 5 17 5H14V3H17ZM6 6H4V9H6V6ZM10 6H8V9H10V6Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.user4Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 20H19V22H5V20ZM12 18C7.58172 18 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 14.4183 16.4183 18 12 18ZM12 16C15.3137 16 18 13.3137 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 13.3137 8.68629 16 12 16Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.shapesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9998 1L6 11H18L11.9998 1ZM11.9998 4.8873L14.4676 9H9.53232L11.9998 4.8873ZM6.75 20C5.23122 20 4 18.7688 4 17.25C4 15.7312 5.23122 14.5 6.75 14.5C8.26878 14.5 9.5 15.7312 9.5 17.25C9.5 18.7688 8.26878 20 6.75 20ZM6.75 22C9.37335 22 11.5 19.8734 11.5 17.25C11.5 14.6266 9.37335 12.5 6.75 12.5C4.12665 12.5 2 14.6266 2 17.25C2 19.8734 4.12665 22 6.75 22ZM15 15.5V19.5H19V15.5H15ZM13 21.5V13.5H21V21.5H13Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.closeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.eyeCloseLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.linkedinBoxFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M18.3362 18.339H15.6707V14.1622C15.6707 13.1662 15.6505 11.8845 14.2817 11.8845C12.892 11.8845 12.6797 12.9683 12.6797 14.0887V18.339H10.0142V9.75H12.5747V10.9207H12.6092C12.967 10.2457 13.837 9.53325 15.1367 9.53325C17.8375 9.53325 18.337 11.3108 18.337 13.6245V18.339H18.3362ZM7.00373 8.57475C6.14573 8.57475 5.45648 7.88025 5.45648 7.026C5.45648 6.1725 6.14648 5.47875 7.00373 5.47875C7.85873 5.47875 8.55173 6.1725 8.55173 7.026C8.55173 7.88025 7.85798 8.57475 7.00373 8.57475ZM8.34023 18.339H5.66723V9.75H8.34023V18.339ZM19.6697 3H4.32923C3.59498 3 3.00098 3.5805 3.00098 4.29675V19.7033C3.00098 20.4202 3.59498 21 4.32923 21H19.6675C20.401 21 21.001 20.4202 21.001 19.7033V4.29675C21.001 3.5805 20.401 3 19.6675 3H19.6697Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.githubFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.instagramFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0281 2.00073C14.1535 2.00259 14.7238 2.00855 15.2166 2.02322L15.4107 2.02956C15.6349 2.03753 15.8561 2.04753 16.1228 2.06003C17.1869 2.1092 17.9128 2.27753 18.5503 2.52503C19.2094 2.7792 19.7661 3.12253 20.3219 3.67837C20.8769 4.2342 21.2203 4.79253 21.4753 5.45003C21.7219 6.0867 21.8903 6.81337 21.9403 7.87753C21.9522 8.1442 21.9618 8.3654 21.9697 8.58964L21.976 8.78373C21.9906 9.27647 21.9973 9.84686 21.9994 10.9723L22.0002 11.7179C22.0003 11.809 22.0003 11.903 22.0003 12L22.0002 12.2821L21.9996 13.0278C21.9977 14.1532 21.9918 14.7236 21.9771 15.2163L21.9707 15.4104C21.9628 15.6347 21.9528 15.8559 21.9403 16.1225C21.8911 17.1867 21.7219 17.9125 21.4753 18.55C21.2211 19.2092 20.8769 19.7659 20.3219 20.3217C19.7661 20.8767 19.2069 21.22 18.5503 21.475C17.9128 21.7217 17.1869 21.89 16.1228 21.94C15.8561 21.9519 15.6349 21.9616 15.4107 21.9694L15.2166 21.9757C14.7238 21.9904 14.1535 21.997 13.0281 21.9992L12.2824 22C12.1913 22 12.0973 22 12.0003 22L11.7182 22L10.9725 21.9993C9.8471 21.9975 9.27672 21.9915 8.78397 21.9768L8.58989 21.9705C8.36564 21.9625 8.14444 21.9525 7.87778 21.94C6.81361 21.8909 6.08861 21.7217 5.45028 21.475C4.79194 21.2209 4.23444 20.8767 3.67861 20.3217C3.12278 19.7659 2.78028 19.2067 2.52528 18.55C2.27778 17.9125 2.11028 17.1867 2.06028 16.1225C2.0484 15.8559 2.03871 15.6347 2.03086 15.4104L2.02457 15.2163C2.00994 14.7236 2.00327 14.1532 2.00111 13.0278L2.00098 10.9723C2.00284 9.84686 2.00879 9.27647 2.02346 8.78373L2.02981 8.58964C2.03778 8.3654 2.04778 8.1442 2.06028 7.87753C2.10944 6.81253 2.27778 6.08753 2.52528 5.45003C2.77944 4.7917 3.12278 4.2342 3.67861 3.67837C4.23444 3.12253 4.79278 2.78003 5.45028 2.52503C6.08778 2.27753 6.81278 2.11003 7.87778 2.06003C8.14444 2.04816 8.36564 2.03847 8.58989 2.03062L8.78397 2.02433C9.27672 2.00969 9.8471 2.00302 10.9725 2.00086L13.0281 2.00073ZM12.0003 7.00003C9.23738 7.00003 7.00028 9.23956 7.00028 12C7.00028 14.7629 9.23981 17 12.0003 17C14.7632 17 17.0003 14.7605 17.0003 12C17.0003 9.23713 14.7607 7.00003 12.0003 7.00003ZM12.0003 9.00003C13.6572 9.00003 15.0003 10.3427 15.0003 12C15.0003 13.6569 13.6576 15 12.0003 15C10.3434 15 9.00028 13.6574 9.00028 12C9.00028 10.3431 10.3429 9.00003 12.0003 9.00003ZM17.2503 5.50003C16.561 5.50003 16.0003 6.05994 16.0003 6.74918C16.0003 7.43843 16.5602 7.9992 17.2503 7.9992C17.9395 7.9992 18.5003 7.4393 18.5003 6.74918C18.5003 6.05994 17.9386 5.49917 17.2503 5.50003Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.twitterXFill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17.6874 3.0625L12.6907 8.77425L8.37045 3.0625H2.11328L9.58961 12.8387L2.50378 20.9375H5.53795L11.0068 14.6886L15.7863 20.9375H21.8885L14.095 10.6342L20.7198 3.0625H17.6874ZM16.6232 19.1225L5.65436 4.78217H7.45745L18.3034 19.1225H16.6232Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.downloadCloud2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13 13V18.585L14.8284 16.7574L16.2426 18.1716L12 22.4142L7.75736 18.1716L9.17157 16.7574L11 18.585V13H13ZM12 2C15.5934 2 18.5544 4.70761 18.9541 8.19395C21.2858 8.83154 23 10.9656 23 13.5C23 16.3688 20.8036 18.7246 18.0006 18.9776L18.0009 16.9644C19.6966 16.7214 21 15.2629 21 13.5C21 11.567 19.433 10 17.5 10C17.2912 10 17.0867 10.0183 16.8887 10.054C16.9616 9.7142 17 9.36158 17 9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9C7 9.36158 7.03838 9.7142 7.11205 10.0533C6.91331 10.0183 6.70879 10 6.5 10C4.567 10 3 11.567 3 13.5C3 15.2003 4.21241 16.6174 5.81986 16.934L6.00005 16.9646L6.00039 18.9776C3.19696 18.7252 1 16.3692 1 13.5C1 10.9656 2.71424 8.83154 5.04648 8.19411C5.44561 4.70761 8.40661 2 12 2Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.globeLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.mailSendLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M21 3C21.5523 3 22 3.44772 22 4V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V19H20V7.3L12 14.5L2 5.5V4C2 3.44772 2.44772 3 3 3H21ZM8 15V17H0V15H8ZM5 10V12H0V10H5ZM19.5659 5H4.43414L12 11.8093L19.5659 5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.pagesLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitForkLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V9C7 10.1046 7.89543 11 9 11H15C16.1046 11 17 10.1046 17 9V8.82929C15.8348 8.41746 15 7.30622 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.30622 20.1652 8.41746 19 8.82929V9C19 11.2091 17.2091 13 15 13H13V15.1707C14.1652 15.5825 15 16.6938 15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18C9 16.6938 9.83481 15.5825 11 15.1707V13H9C6.79086 13 5 11.2091 5 9V8.82929C3.83481 8.41746 3 7.30622 3 6ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5ZM12 17C11.4477 17 11 17.4477 11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.gitRepositoryPrivateLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6 10V20H19V10H6ZM18 8H20C20.5523 8 21 8.44772 21 9V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V9C3 8.44772 3.44772 8 4 8H6V7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V8ZM16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8H16ZM7 11H9V13H7V11ZM7 14H9V16H7V14ZM7 17H9V19H7V17Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.starLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.calendar2Line) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M9 1V3H15V1H17V3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9ZM20 11H4V19H20V11ZM8 13V15H6V13H8ZM13 13V15H11V13H13ZM18 13V15H16V13H18ZM7 5H4V9H20V5H17V7H15V5H9V7H7V5Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.macLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M14 18V20L16 21V22H8L7.99639 21.0036L10 20V18H2.9918C2.44405 18 2 17.5511 2 16.9925V4.00748C2 3.45107 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44892 22 4.00748V16.9925C22 17.5489 21.5447 18 21.0082 18H14ZM4 5V14H20V5H4Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.more2Fill) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M12 3C10.9 3 10 3.9 10 5C10 6.1 10.9 7 12 7C13.1 7 14 6.1 14 5C14 3.9 13.1 3 12 3ZM12 17C10.9 17 10 17.9 10 19C10 20.1 10.9 21 12 21C13.1 21 14 20.1 14 19C14 17.9 13.1 17 12 17ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.editLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z\"></path>\r\n      </svg>\r\n    }\r\n    @case (Icons.deleteBinLine) {\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n        <path\r\n          d=\"M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z\"></path>\r\n      </svg>\r\n    }\r\n  }\r\n</span>\r\n", styles: [":host{color:inherit;display:inline-flex}:host:has(.icon--left){margin-left:var(--gld-spacing--xxxs)}:host:has(.icon--right){margin-right:var(--gld-spacing--xxxs)}.icon{--gld-icon-size: var(--gld-icon-size--normal);position:relative;color:inherit;font-weight:400;width:var(--gld-icon-size);height:var(--gld-icon-size);margin:auto}.icon--tiny{--gld-icon-size: var(--gld-icon-size--tiny)}.icon--small{--gld-icon-size: var(--gld-icon-size--small)}.icon--medium{--gld-icon-size: var(--gld-icon-size--medium)}.icon--large{--gld-icon-size: var(--gld-icon-size--large)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 // Angular Imports
-class LinkComponent {
-    LinkType = LinkType;
-    name = input.required();
-    redirect = input('');
-    active = input(false, { transform: booleanAttribute });
-    external = input(false, { transform: booleanAttribute });
-    type = input(LinkType.default);
-    align = input(LinkAlign.center);
+class ButtonComponent {
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `button-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `button-name-${value.trim().split(' ').join('-')}` });
+    color = input(ButtonColor$1.pink, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    size = input(ButtonSize$1.normal, { ...(ngDevMode ? { debugName: "size" } : {}) });
+    icon = input(null, { ...(ngDevMode ? { debugName: "icon" } : {}) });
+    iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
+    moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
+    moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    full = input(false, { ...(ngDevMode ? { debugName: "full" } : {}), transform: booleanAttribute });
     clicked = output();
     emitClick() {
-        this.clicked.emit();
+        if (!this.disabled())
+            this.clicked.emit();
     }
     keyup() {
         this.emitClick();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LinkComponent, isStandalone: true, selector: "gld-link", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n  <!-- It's external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n  <!-- It isn't external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n  @switch (buttonType) {\n    @case ('anchor') {\n      <a\n        id=\"{{ name() }}\"\n        attr.aria-label=\"{{ name() }}\"\n        class=\"link link--{{ align() }}\"\n        [class.link--active]=\"active()\"\n        [href]=\"redirect()\"\n        (click)=\"emitClick()\"\n        (keyup.enter)=\"keyup()\"\n        target=\"_blank\">\n        <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n      </a>\n    }\n    @case ('button') {\n      @if (redirect()) {\n        <!-- It has path to redirect -->\n        <button\n          id=\"{{ name() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\"\n          [routerLink]=\"redirect()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      } @else {\n        <!-- It doesn't have path to redirect -->\n        <button\n          id=\"{{ name() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      }\n    }\n  }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonComponent, isStandalone: true, selector: "gld-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  id=\"{{ id() }}\"\n  attr.aria-label=\"{{ name() }}\"\n  class=\"button button--{{ color() }} button--{{ size() }}\"\n  [class.button--disabled]=\"disabled()\"\n  [class.button--full]=\"full()\"\n  (click)=\"emitClick()\"\n  (keyup.enter)=\"keyup()\">\n  <!-- Icon -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [icon]=\"innerIcon\"\n      [size]=\"iconSize() ?? size()\"\n      [disabled]=\"disabled()\" />\n  }\n  <!-- Content -->\n  <span>\n    <ng-content>no content</ng-content>\n  </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}:host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-link', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n  <!-- It's external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n  <!-- It isn't external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n  @switch (buttonType) {\n    @case ('anchor') {\n      <a\n        id=\"{{ name() }}\"\n        attr.aria-label=\"{{ name() }}\"\n        class=\"link link--{{ align() }}\"\n        [class.link--active]=\"active()\"\n        [href]=\"redirect()\"\n        (click)=\"emitClick()\"\n        (keyup.enter)=\"keyup()\"\n        target=\"_blank\">\n        <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n      </a>\n    }\n    @case ('button') {\n      @if (redirect()) {\n        <!-- It has path to redirect -->\n        <button\n          id=\"{{ name() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\"\n          [routerLink]=\"redirect()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      } @else {\n        <!-- It doesn't have path to redirect -->\n        <button\n          id=\"{{ name() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      }\n    }\n  }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"] }]
-        }] });
+            args: [{ selector: 'gld-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  id=\"{{ id() }}\"\n  attr.aria-label=\"{{ name() }}\"\n  class=\"button button--{{ color() }} button--{{ size() }}\"\n  [class.button--disabled]=\"disabled()\"\n  [class.button--full]=\"full()\"\n  (click)=\"emitClick()\"\n  (keyup.enter)=\"keyup()\">\n  <!-- Icon -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [icon]=\"innerIcon\"\n      [size]=\"iconSize() ?? size()\"\n      [disabled]=\"disabled()\" />\n  }\n  <!-- Content -->\n  <span>\n    <ng-content>no content</ng-content>\n  </span>\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;height:inherit;max-width:inherit}:host:has(.button--full){width:100%}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:0;padding:var(--gld-padding);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--pink{--gld-color: var(--gld-pink);--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple);--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard);--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange);--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue);--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green);--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--tiny{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxxs) var(--gld-spacing--xxs)}.button--small{--gld-font-size: var(--gld-font-size--small);--gld-padding: var(--gld-spacing--xxs)}.button--normal{--gld-font-size: var(--gld-font-size--normal);--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs)}.button--medium{--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--m)}.button--large{--gld-font-size: var(--gld-font-size--heading-three);--gld-padding: var(--gld-spacing--xs) var(--gld-spacing--l)}.button--disabled{--gld-color: var(--gld-gray);--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020);pointer-events:none;cursor:not-allowed}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 // Angular Imports
 const components$7 = [IconComponent];
 class DropdownButtonComponent {
-    value = input.required();
-    icon = input(null);
-    iconSize = input(IconsSize.normal);
-    iconSpace = input(IconsSpace.none);
-    moveTopToBottom = input(0, { transform: numberAttribute });
-    moveLeftToRight = input(0, { transform: numberAttribute });
-    direction = input(DropdownDirection.left);
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    icon = input(null, { ...(ngDevMode ? { debugName: "icon" } : {}) });
+    iconSize = input(IconsSize$1.normal, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
+    iconSpace = input(IconsSpace$1.none, { ...(ngDevMode ? { debugName: "iconSpace" } : {}) });
+    moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
+    moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
+    direction = input(DropdownDirection$1.left, { ...(ngDevMode ? { debugName: "direction" } : {}) });
     changeValue = output();
-    current = signal(null);
-    disabled = signal(false);
-    error = signal(false);
-    selected = computed(() => Boolean(this.current() === this.value()));
-    buttonChild = viewChild('buttonChild', { read: ElementRef });
+    current = signal(null, { ...(ngDevMode ? { debugName: "current" } : {}) });
+    disabled = signal(false, { ...(ngDevMode ? { debugName: "disabled" } : {}) });
+    error = signal(false, { ...(ngDevMode ? { debugName: "error" } : {}) });
+    selected = computed(() => Boolean(this.current() === this.value()), { ...(ngDevMode ? { debugName: "selected" } : {}) });
+    buttonChild = viewChild('buttonChild', { ...(ngDevMode ? { debugName: "buttonChild" } : {}), read: ElementRef });
     select(value) {
         this.changeValue.emit(value);
         this.buttonChild()?.nativeElement.blur();
@@ -523,36 +922,65 @@ class DropdownButtonComponent {
     keyup(value) {
         this.select(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: DropdownButtonComponent, isStandalone: true, selector: "gld-dropdown-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSpace: { classPropertyName: "iconSpace", publicName: "iconSpace", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, viewQueries: [{ propertyName: "buttonChild", first: true, predicate: ["buttonChild"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\n  #buttonChild\n  [tabindex]=\"disabled() ? '-1' : '0'\"\n  class=\"button button--direction-{{ direction() }}\"\n  [class.button--selected]=\"selected()\"\n  (keyup.enter)=\"keyup(value())\"\n  (click)=\"select(value())\">\n  <!-- Icon -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [icon]=\"innerIcon\"\n      [size]=\"iconSize()\"\n      [space]=\"iconSpace()\"\n      [disabled]=\"disabled()\" />\n  }\n  <!-- Content -->\n  <span>\n    <ng-content> no content </ng-content>\n  </span>\n</button>\n\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DropdownButtonComponent, isStandalone: true, selector: "gld-dropdown-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconSpace: { classPropertyName: "iconSpace", publicName: "iconSpace", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue" }, viewQueries: [{ propertyName: "buttonChild", first: true, predicate: ["buttonChild"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button\r\n  #buttonChild\r\n  [tabindex]=\"disabled() ? '-1' : '0'\"\r\n  class=\"button button--direction-{{ direction() }}\"\r\n  [class.button--selected]=\"selected()\"\r\n  (keyup.enter)=\"keyup(value())\"\r\n  (click)=\"select(value())\">\r\n  <!-- Icon -->\r\n  @let innerIcon = icon();\r\n  @if (innerIcon) {\r\n    <gld-icon\r\n      [moveTopToBottom]=\"moveTopToBottom()\"\r\n      [moveLeftToRight]=\"moveLeftToRight()\"\r\n      [icon]=\"innerIcon\"\r\n      [size]=\"iconSize()\"\r\n      [space]=\"iconSpace()\"\r\n      [disabled]=\"disabled()\" />\r\n  }\r\n  <!-- Content -->\r\n  <span>\r\n    <ng-content> no content </ng-content>\r\n  </span>\r\n</button>\r\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DropdownButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-dropdown-button', imports: [...components$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #buttonChild\n  [tabindex]=\"disabled() ? '-1' : '0'\"\n  class=\"button button--direction-{{ direction() }}\"\n  [class.button--selected]=\"selected()\"\n  (keyup.enter)=\"keyup(value())\"\n  (click)=\"select(value())\">\n  <!-- Icon -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [icon]=\"innerIcon\"\n      [size]=\"iconSize()\"\n      [space]=\"iconSpace()\"\n      [disabled]=\"disabled()\" />\n  }\n  <!-- Content -->\n  <span>\n    <ng-content> no content </ng-content>\n  </span>\n</button>\n\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
-        }] });
+            args: [{ selector: 'gld-dropdown-button', imports: [...components$7], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  #buttonChild\r\n  [tabindex]=\"disabled() ? '-1' : '0'\"\r\n  class=\"button button--direction-{{ direction() }}\"\r\n  [class.button--selected]=\"selected()\"\r\n  (keyup.enter)=\"keyup(value())\"\r\n  (click)=\"select(value())\">\r\n  <!-- Icon -->\r\n  @let innerIcon = icon();\r\n  @if (innerIcon) {\r\n    <gld-icon\r\n      [moveTopToBottom]=\"moveTopToBottom()\"\r\n      [moveLeftToRight]=\"moveLeftToRight()\"\r\n      [icon]=\"innerIcon\"\r\n      [size]=\"iconSize()\"\r\n      [space]=\"iconSpace()\"\r\n      [disabled]=\"disabled()\" />\r\n  }\r\n  <!-- Content -->\r\n  <span>\r\n    <ng-content> no content </ng-content>\r\n  </span>\r\n</button>\r\n", styles: [":host{position:relative;width:100%}.button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);--gld-height: 40px;padding:var(--gld-spacing--xxs) var(--gld-spacing--xs);width:100%;height:var(--gld-height);background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);text-align:left;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;display:inline-flex;align-items:center;gap:var(--gld-spacing--xxs);will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover);--gld-background: var(--gld-background--hover)}.button:active{transform:scale(.95)}.button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.button--direction-left{justify-content:flex-start}.button--direction-right{justify-content:flex-end}.button--selected,.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSpace", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], buttonChild: [{ type: i0.ViewChild, args: ['buttonChild', { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+// Angular Imports
+class IconButtonComponent {
+    icon = input.required({ ...(ngDevMode ? { debugName: "icon" } : {}) });
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `button-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `button-name-${value.trim().split(' ').join('-')}` });
+    iconSize = input(IconsSize$1.normal, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
+    space = input(IconsSpace$1.none, { ...(ngDevMode ? { debugName: "space" } : {}) });
+    moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
+    moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
+    background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    color = input(ButtonColor$1.pink, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    clicked = output();
+    emitClick() {
+        if (!this.disabled())
+            this.clicked.emit();
+    }
+    keyup() {
+        this.emitClick();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: IconButtonComponent, isStandalone: true, selector: "gld-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  id=\"{{ id() }}\"\n  attr.aria-label=\"{{ name() }}\"\n  class=\"button button--{{ color() }}\"\n  [class.button--disabled]=\"disabled()\"\n  [class.button--background]=\"background()\"\n  (click)=\"emitClick()\"\n  (keyup.enter)=\"keyup()\">\n  <!-- Icon -->\n  <gld-icon\n    [icon]=\"icon()\"\n    [size]=\"iconSize()\"\n    [space]=\"space()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  id=\"{{ id() }}\"\n  attr.aria-label=\"{{ name() }}\"\n  class=\"button button--{{ color() }}\"\n  [class.button--disabled]=\"disabled()\"\n  [class.button--background]=\"background()\"\n  (click)=\"emitClick()\"\n  (keyup.enter)=\"keyup()\">\n  <!-- Icon -->\n  <gld-icon\n    [icon]=\"icon()\"\n    [size]=\"iconSize()\"\n    [space]=\"space()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [disabled]=\"disabled()\" />\n</button>\n\n<!-- Only used by DropdownMenuComponent -->\n<ng-content select=\"[gldDropdownMenuTemplate]\" />\n", styles: [":host{display:inline-block;max-width:inherit}.button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:none;padding:var(--gld-spacing--xxxs);border-radius:var(--gld-radius);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size);font-weight:600;line-height:1.25;cursor:pointer;width:inherit;color:var(--gld-color);background:var(--gld-background);display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);-webkit-user-select:none;user-select:none;will-change:background,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover,.button:focus{background:var(--gld-background--hover)}.button:active{transform:scale(.98)}.button--pink{--gld-color: var(--gld-pink)}.button--pink.button--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}.button--purple{--gld-color: var(--gld-purple)}.button--purple.button--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.button--mustard{--gld-color: var(--gld-mustard)}.button--mustard.button--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.button--orange{--gld-color: var(--gld-orange)}.button--orange.button--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.button--blue{--gld-color: var(--gld-blue)}.button--blue.button--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.button--red{--gld-color: var(--gld-red)}.button--red.button--background{--gld-background: var(--gld-red-transparent--010);--gld-background--hover: var(--gld-red-transparent--020)}.button--green{--gld-color: var(--gld-green)}.button--green.button--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.button--disabled{--gld-color: var(--gld-gray-transparent--060);pointer-events:none;cursor:not-allowed}.button--disabled.button--background{--gld-background: var(--gld-gray-transparent--020);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 // Angular Imports
 const components$6 = [ButtonComponent, IconButtonComponent];
-const directives = [DropdownMenuTemplateDirective];
+const directives = [DropdownMenuTemplateDirective$1];
 class DropdownMenuComponent {
-    DropdownType = DropdownType;
-    name = input.required();
-    type = input.required();
-    color = input(ButtonColor.pink);
-    size = input(ButtonSize.normal);
-    icon = input(null);
-    iconSize = input();
-    moveTopToBottom = input(0, { transform: numberAttribute });
-    moveLeftToRight = input(0, { transform: numberAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    full = input(false, { transform: booleanAttribute });
-    direction = input(DropdownDirection.right);
-    background = input(false, { transform: booleanAttribute });
-    selected = input(false, { transform: booleanAttribute });
-    initialValue = input(null);
+    DropdownType = DropdownType$1;
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `dropdown-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `dropdown-name-${value.trim().split(' ').join('-')}` });
+    type = input.required({ ...(ngDevMode ? { debugName: "type" } : {}) });
+    color = input(ButtonColor$1.pink, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    size = input(ButtonSize$1.normal, { ...(ngDevMode ? { debugName: "size" } : {}) });
+    icon = input(null, { ...(ngDevMode ? { debugName: "icon" } : {}) });
+    iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
+    moveTopToBottom = input(0, { ...(ngDevMode ? { debugName: "moveTopToBottom" } : {}), transform: numberAttribute });
+    moveLeftToRight = input(0, { ...(ngDevMode ? { debugName: "moveLeftToRight" } : {}), transform: numberAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    full = input(false, { ...(ngDevMode ? { debugName: "full" } : {}), transform: booleanAttribute });
+    direction = input(DropdownDirection$1.right, { ...(ngDevMode ? { debugName: "direction" } : {}) });
+    background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : {}), transform: booleanAttribute });
+    initialValue = input(null, { ...(ngDevMode ? { debugName: "initialValue" } : {}) });
     changeValue = output();
     changeFocus = output();
-    dropdownButtonChildren = contentChildren(DropdownButtonComponent);
+    dropdownButtonChildren = contentChildren(DropdownButtonComponent, { ...(ngDevMode ? { debugName: "dropdownButtonChildren" } : {}) });
     constructor() {
         effect(() => {
             const initialValue = this.initialValue();
@@ -577,43 +1005,69 @@ class DropdownMenuComponent {
     updateErrorInChildren(error) {
         this.dropdownButtonChildren().map((dropdownButton) => dropdownButton.error.set(error));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: DropdownMenuComponent, isStandalone: true, selector: "gld-dropdown-menu", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "dropdownButtonChildren", predicate: DropdownButtonComponent, isSignal: true }], ngImport: i0, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n  <gld-button\n    #buttonChild\n    [name]=\"name()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [icon]=\"icon()\"\n    [iconSize]=\"iconSize()\"\n    [disabled]=\"disabled()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [full]=\"full()\">\n    <ng-content />\n\n    <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n  </gld-button>\n} @else {\n  <!-- Icon Button -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon-button\n      #buttonChild\n      [name]=\"name()\"\n      [color]=\"color()\"\n      [icon]=\"innerIcon\"\n      [iconSize]=\"iconSize() ?? size()\"\n      [disabled]=\"disabled()\"\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [background]=\"background()\">\n      <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n    </gld-icon-button>\n  }\n}\n\n<ng-template #dropdownMenu>\n  <!-- Menu -->\n  <section\n    class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n      dropdown-menu--direction-{{ direction() }}\">\n    <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n  </section>\n</ng-template>\n\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "gld-button", inputs: ["name", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "gld-icon-button", inputs: ["icon", "name", "iconSize", "space", "moveTopToBottom", "moveLeftToRight", "background", "disabled", "color"], outputs: ["clicked"] }, { kind: "directive", type: DropdownMenuTemplateDirective, selector: "[gldDropdownMenuTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DropdownMenuComponent, isStandalone: true, selector: "gld-dropdown-menu", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, moveTopToBottom: { classPropertyName: "moveTopToBottom", publicName: "moveTopToBottom", isSignal: true, isRequired: false, transformFunction: null }, moveLeftToRight: { classPropertyName: "moveLeftToRight", publicName: "moveLeftToRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "dropdownButtonChildren", predicate: DropdownButtonComponent, isSignal: true }], ngImport: i0, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n  <gld-button\n    #buttonChild\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [icon]=\"icon()\"\n    [iconSize]=\"iconSize()\"\n    [disabled]=\"disabled()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [full]=\"full()\">\n    <ng-content />\n\n    <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n  </gld-button>\n} @else {\n  <!-- Icon Button -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon-button\n      #buttonChild\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [color]=\"color()\"\n      [icon]=\"innerIcon\"\n      [iconSize]=\"iconSize() ?? size()\"\n      [disabled]=\"disabled()\"\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [background]=\"background()\">\n      <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n    </gld-icon-button>\n  }\n}\n\n<ng-template #dropdownMenu>\n  <!-- Menu -->\n  <section\n    class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n      dropdown-menu--direction-{{ direction() }}\">\n    <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n  </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "gld-button", inputs: ["id", "name", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "gld-icon-button", inputs: ["icon", "id", "name", "iconSize", "space", "moveTopToBottom", "moveLeftToRight", "background", "disabled", "color"], outputs: ["clicked"] }, { kind: "directive", type: DropdownMenuTemplateDirective$1, selector: "[gldDropdownMenuTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-dropdown-menu', imports: [NgTemplateOutlet, ...components$6, directives], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n  <gld-button\n    #buttonChild\n    [name]=\"name()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [icon]=\"icon()\"\n    [iconSize]=\"iconSize()\"\n    [disabled]=\"disabled()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [full]=\"full()\">\n    <ng-content />\n\n    <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n  </gld-button>\n} @else {\n  <!-- Icon Button -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon-button\n      #buttonChild\n      [name]=\"name()\"\n      [color]=\"color()\"\n      [icon]=\"innerIcon\"\n      [iconSize]=\"iconSize() ?? size()\"\n      [disabled]=\"disabled()\"\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [background]=\"background()\">\n      <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n    </gld-icon-button>\n  }\n}\n\n<ng-template #dropdownMenu>\n  <!-- Menu -->\n  <section\n    class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n      dropdown-menu--direction-{{ direction() }}\">\n    <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n  </section>\n</ng-template>\n\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'gld-dropdown-menu', imports: [NgTemplateOutlet, ...components$6, directives], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Button -->\n@if (type() === DropdownType.button) {\n  <gld-button\n    #buttonChild\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [icon]=\"icon()\"\n    [iconSize]=\"iconSize()\"\n    [disabled]=\"disabled()\"\n    [moveTopToBottom]=\"moveTopToBottom()\"\n    [moveLeftToRight]=\"moveLeftToRight()\"\n    [full]=\"full()\">\n    <ng-content />\n\n    <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n  </gld-button>\n} @else {\n  <!-- Icon Button -->\n  @let innerIcon = icon();\n  @if (innerIcon) {\n    <gld-icon-button\n      #buttonChild\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [color]=\"color()\"\n      [icon]=\"innerIcon\"\n      [iconSize]=\"iconSize() ?? size()\"\n      [disabled]=\"disabled()\"\n      [moveTopToBottom]=\"moveTopToBottom()\"\n      [moveLeftToRight]=\"moveLeftToRight()\"\n      [background]=\"background()\">\n      <ng-container gldDropdownMenuTemplate [ngTemplateOutlet]=\"dropdownMenu\" />\n    </gld-icon-button>\n  }\n}\n\n<ng-template #dropdownMenu>\n  <!-- Menu -->\n  <section\n    class=\"dropdown-menu dropdown-menu--{{ type() }} dropdown-menu--{{ size() }}\n      dropdown-menu--direction-{{ direction() }}\">\n    <ng-content select=\"gld-dropdown-button\">no buttons</ng-content>\n  </section>\n</ng-template>\n", styles: [":host{max-width:inherit}.dropdown-menu{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);--gld-dropdown-min-width: 100px;--gld-dropdown-bottom-position: 0;padding:var(--gld-spacing--xxxs);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);background:var(--gld-background);display:none;position:absolute;scale:0;z-index:1;min-width:var(--gld-dropdown-min-width);max-width:inherit}.dropdown-menu--direction-right{left:0;transform-origin:top left;transform:translateY(var(--gld-dropdown-bottom-position))}.dropdown-menu--direction-left{transform-origin:top right;transform:translate(-100%,var(--gld-dropdown-bottom-position))}.dropdown-menu--tiny{--gld-dropdown-bottom-position: 26px}.dropdown-menu--small{--gld-dropdown-bottom-position: 34px}.dropdown-menu--normal{--gld-dropdown-bottom-position: 39px}.dropdown-menu--normal.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 42px}.dropdown-menu--medium{--gld-dropdown-bottom-position: 47px}.dropdown-menu--medium.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 50px}.dropdown-menu--large{--gld-dropdown-bottom-position: 52px}.dropdown-menu--large.dropdown-menu--iconButton{--gld-dropdown-bottom-position: 58px}gld-button:focus-within .dropdown-menu,gld-icon-button:focus-within .dropdown-menu{display:initial;scale:1;z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], moveTopToBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveTopToBottom", required: false }] }], moveLeftToRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "moveLeftToRight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], dropdownButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DropdownButtonComponent), { isSignal: true }] }] } });
+
+// Angular Imports
+class LinkComponent {
+    LinkType = LinkType$1;
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
+    redirect = input('', { ...(ngDevMode ? { debugName: "redirect" } : {}) });
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : {}), transform: booleanAttribute });
+    external = input(false, { ...(ngDevMode ? { debugName: "external" } : {}), transform: booleanAttribute });
+    type = input(LinkType$1.default, { ...(ngDevMode ? { debugName: "type" } : {}) });
+    align = input(LinkAlign$1.center, { ...(ngDevMode ? { debugName: "align" } : {}) });
+    clicked = output();
+    emitClick() {
+        this.clicked.emit();
+    }
+    keyup() {
+        this.emitClick();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: LinkComponent, isStandalone: true, selector: "gld-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, redirect: { classPropertyName: "redirect", publicName: "redirect", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "@if (external()) {\n  <!-- It's external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n  <!-- It isn't external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n  @switch (buttonType) {\n    @case ('anchor') {\n      <a\n        id=\"{{ id() }}\"\n        attr.aria-label=\"{{ name() }}\"\n        class=\"link link--{{ align() }}\"\n        [class.link--active]=\"active()\"\n        [href]=\"redirect()\"\n        (click)=\"emitClick()\"\n        (keyup.enter)=\"keyup()\"\n        target=\"_blank\">\n        <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n      </a>\n    }\n    @case ('button') {\n      @if (redirect()) {\n        <!-- It has path to redirect -->\n        <button\n          id=\"{{ id() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\"\n          [routerLink]=\"redirect()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      } @else {\n        <!-- It doesn't have path to redirect -->\n        <button\n          id=\"{{ id() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      }\n    }\n  }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gld-link', standalone: true, imports: [NgTemplateOutlet, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (external()) {\n  <!-- It's external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'anchor' }\" />\n} @else {\n  <!-- It isn't external link -->\n  <ng-container\n    [ngTemplateOutlet]=\"buttonTemplate\"\n    [ngTemplateOutletContext]=\"{ buttonType: 'button' }\" />\n}\n\n<!-- Button Template -->\n<ng-template #buttonTemplate let-buttonType=\"buttonType\">\n  @switch (buttonType) {\n    @case ('anchor') {\n      <a\n        id=\"{{ id() }}\"\n        attr.aria-label=\"{{ name() }}\"\n        class=\"link link--{{ align() }}\"\n        [class.link--active]=\"active()\"\n        [href]=\"redirect()\"\n        (click)=\"emitClick()\"\n        (keyup.enter)=\"keyup()\"\n        target=\"_blank\">\n        <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n      </a>\n    }\n    @case ('button') {\n      @if (redirect()) {\n        <!-- It has path to redirect -->\n        <button\n          id=\"{{ id() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\"\n          [routerLink]=\"redirect()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      } @else {\n        <!-- It doesn't have path to redirect -->\n        <button\n          id=\"{{ id() }}\"\n          attr.aria-label=\"{{ name() }}\"\n          class=\"link link--{{ align() }}\"\n          [class.link--active]=\"active()\"\n          (click)=\"emitClick()\"\n          (keyup.enter)=\"keyup()\">\n          <ng-container [ngTemplateOutlet]=\"contentButtonTemplate\" />\n        </button>\n      }\n    }\n  }\n</ng-template>\n\n<!-- Content Button Template -->\n<ng-template #contentButtonTemplate>\n  <ng-content />\n</ng-template>\n", styles: [":host{position:relative;z-index:1}.link{--gld-color: var(--gld-foreground-color);position:relative;display:inline-flex;align-items:center;padding:0;font:600 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);color:var(--gld-color);background:none;border:none;cursor:pointer;text-decoration:underline;will-change:color;transition:color var(--gld-animation-time--150)}.link--active,.link:active,.link:hover{--gld-color: var(--gld-purple)}.link--left{text-align:left}.link--right{text-align:right}.link--center{text-align:center}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], redirect: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirect", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], external: [{ type: i0.Input, args: [{ isSignal: true, alias: "external", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 // Angular Imports
 class ToggleButtonComponent {
-    value = input.required();
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
     changeValue = output();
-    current = signal(null);
-    disabled = signal(false);
-    error = signal(false);
-    selected = computed(() => Boolean(this.current() === this.value()));
+    current = signal(null, { ...(ngDevMode ? { debugName: "current" } : {}) });
+    disabled = signal(false, { ...(ngDevMode ? { debugName: "disabled" } : {}) });
+    error = signal(false, { ...(ngDevMode ? { debugName: "error" } : {}) });
+    selected = computed(() => Boolean(this.current() === this.value()), { ...(ngDevMode ? { debugName: "selected" } : {}) });
     select(value) {
         this.changeValue.emit(value);
     }
     keyup(value) {
         this.select(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: ToggleButtonComponent, isStandalone: true, selector: "gld-toggle-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue" }, ngImport: i0, template: "<button\n  [tabindex]=\"disabled() ? '-1' : '0'\"\n  class=\"button\"\n  [class.button--selected]=\"selected()\"\n  (keyup.enter)=\"keyup(value())\"\n  (click)=\"select(value())\">\n  <ng-content> empty button </ng-content>\n</button>\n\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: ToggleButtonComponent, isStandalone: true, selector: "gld-toggle-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue" }, ngImport: i0, template: "<button\r\n  [tabindex]=\"disabled() ? '-1' : '0'\"\r\n  class=\"button\"\r\n  [class.button--selected]=\"selected()\"\r\n  (keyup.enter)=\"keyup(value())\"\r\n  (click)=\"select(value())\">\r\n  <ng-content> empty button </ng-content>\r\n</button>\r\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ToggleButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-toggle-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [tabindex]=\"disabled() ? '-1' : '0'\"\n  class=\"button\"\n  [class.button--selected]=\"selected()\"\n  (keyup.enter)=\"keyup(value())\"\n  (click)=\"select(value())\">\n  <ng-content> empty button </ng-content>\n</button>\n\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
-        }] });
+            args: [{ selector: 'gld-toggle-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  [tabindex]=\"disabled() ? '-1' : '0'\"\r\n  class=\"button\"\r\n  [class.button--selected]=\"selected()\"\r\n  (keyup.enter)=\"keyup(value())\"\r\n  (click)=\"select(value())\">\r\n  <ng-content> empty button </ng-content>\r\n</button>\r\n", styles: [".button{--gld-background: transparent;--gld-background--hover: var(--gld-pink-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--selected: var(--gld-pink);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xxxs);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer;will-change:background,transform,color;transition:background var(--gld-animation-time--150),transform var(--gld-animation-time--150),color var(--gld-animation-time--150)}.button:hover{--gld-color: var(--gld-color--hover)}.button:active{transform:scale(.95)}.button--selected{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--selected)}.button--selected:hover{--gld-color: var(--gld-color--selected)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }] } });
 
 // Angular Imports
 class ToggleGroupComponent {
-    name = input.required();
-    initialValue = input(null);
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `toggle-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `toggle-name-${value.trim().split(' ').join('-')}` });
+    initialValue = input(null, { ...(ngDevMode ? { debugName: "initialValue" } : {}) });
     changeValue = output();
     changeFocus = output();
-    toggleButtonChildren = contentChildren(ToggleButtonComponent);
+    toggleButtonChildren = contentChildren(ToggleButtonComponent, { ...(ngDevMode ? { debugName: "toggleButtonChildren" } : {}) });
     constructor() {
         effect(() => {
             const initialValue = this.initialValue();
@@ -637,46 +1091,62 @@ class ToggleGroupComponent {
     updateErrorInChildren(error) {
         this.toggleButtonChildren().map((toggleButton) => toggleButton.error.set(error));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.1", type: ToggleGroupComponent, isStandalone: true, selector: "gld-toggle-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "toggleButtonChildren", predicate: ToggleButtonComponent, isSignal: true }], ngImport: i0, template: "<section class=\"toggle\" [attr.name]=\"name()\">\n  <ng-content select=\"gld-toggle-button\" />\n</section>\n\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: ToggleGroupComponent, isStandalone: true, selector: "gld-toggle-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, queries: [{ propertyName: "toggleButtonChildren", predicate: ToggleButtonComponent, isSignal: true }], ngImport: i0, template: "<section class=\"toggle\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n  <ng-content select=\"gld-toggle-button\" />\n</section>\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ToggleGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToggleGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-toggle-group', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"toggle\" [attr.name]=\"name()\">\n  <ng-content select=\"gld-toggle-button\" />\n</section>\n\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'gld-toggle-group', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"toggle\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n  <ng-content select=\"gld-toggle-button\" />\n</section>\n", styles: [":host{display:inline-block}.toggle{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-radius: var(--gld-radius--xxs);padding:2px;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }], toggleButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ToggleButtonComponent), { isSignal: true }] }] } });
 
 // Angular Imports
 class InputErrorComponent {
     Boolean = Boolean;
-    errors = input.required();
-    border = input(false, { transform: booleanAttribute });
-    content = contentChildren(InputErrorMessageDirective, {
-        descendants: true,
-    });
-    hasContent = signal(false);
+    errors = input.required({ ...(ngDevMode ? { debugName: "errors" } : {}) });
+    border = input(false, { ...(ngDevMode ? { debugName: "border" } : {}), transform: booleanAttribute });
+    content = contentChildren(InputErrorMessageDirective$1, { ...(ngDevMode ? { debugName: "content" } : {}), descendants: true });
+    hasContent = signal(false, { ...(ngDevMode ? { debugName: "hasContent" } : {}) });
+    firstErrorKey = signal(null, { ...(ngDevMode ? { debugName: "firstErrorKey" } : {}) });
     constructor() {
-        effect(() => this.hasContent.set(this.content()?.length ? true : false));
+        effect(() => this.hasContent.set(this.content()?.length ? true : false), {
+            allowSignalWrites: true,
+        });
+        effect(() => this.#resolveFirstErrorKey(this.errors()), { allowSignalWrites: true });
+    }
+    #resolveFirstErrorKey(errors) {
+        this.firstErrorKey.set(Object.keys(errors || {})[0] ?? null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InputErrorComponent, isStandalone: true, selector: "gld-input-error", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", predicate: InputErrorMessageDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\r\n  <span class=\"error__message\">\r\n    @if (hasContent()) {\r\n      <ng-content />\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\r\n    }\r\n  </span>\r\n</section>\r\n\r\n<ng-template #errorsMessageDefault>\r\n  @switch (true) {\r\n    @case (Boolean(this.errors()?.['required'])) {\r\n      This field is required!\r\n    }\r\n    @case (Boolean(this.errors()?.['email'])) {\r\n      {{ this.errors()?.['email'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['maxlength'])) {\r\n      This field must have a maximum of\r\n      {{ this.errors()?.['maxlength'].requiredLength }}\r\n      characters!\r\n    }\r\n    @case (Boolean(this.errors()?.['minlength'])) {\r\n      This field must have a minimum of\r\n      {{ this.errors()?.['minlength'].requiredLength }}\r\n      characters!\r\n    }\r\n    @case (Boolean(this.errors()?.['isDate'])) {\r\n      {{ this.errors()?.['isDate'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['minimumAge'])) {\r\n      This field must meet the minimum age requirement of\r\n      {{ this.errors()?.['minimumAge'].requiredAge }} years\r\n    }\r\n    @case (Boolean(this.errors()?.['naturalNumber'])) {\r\n      {{ this.errors()?.['naturalNumber'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['mustMatch'])) {\r\n      {{ this.errors()?.['mustMatch'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['mustUnmatch'])) {\r\n      {{ this.errors()?.['mustUnmatch'] }}\r\n    }\r\n    @default {\r\n      empty error message\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputErrorComponent, isStandalone: true, selector: "gld-input-error", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", predicate: InputErrorMessageDirective$1, descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\n  <span class=\"error__message\">\n    @if (hasContent()) {\n      <ng-content />\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\n    }\n  </span>\n</section>\n\n<ng-template #errorsMessageDefault>\n  @switch (firstErrorKey()) {\n    @case ('required') {\n      This field is required!\n    }\n    @case ('email') {\n      {{ this.errors()?.['email'] }}\n    }\n    @case ('maxlength') {\n      This field must have a maximum of\n      {{ this.errors()?.['maxlength'].requiredLength }}\n      characters!\n    }\n    @case ('minlength') {\n      This field must have a minimum of\n      {{ this.errors()?.['minlength'].requiredLength }}\n      characters!\n    }\n    @case ('isDate') {\n      {{ this.errors()?.['isDate'] }}\n    }\n    @case ('minimumAge') {\n      This field must meet the minimum age requirement of\n      {{ this.errors()?.['minimumAge'].requiredAge }} years\n    }\n    @case ('isNaturalNumber') {\n      {{ this.errors()?.['isNaturalNumber'] }}\n    }\n    @case ('mustMatch') {\n      {{ this.errors()?.['mustMatch'] }}\n    }\n    @case ('mustUnmatch') {\n      {{ this.errors()?.['mustUnmatch'] }}\n    }\n    @case ('isString') {\n      {{ this.errors()?.['isString'] }}\n    }\n    @default {\n      empty error message\n    }\n  }\n</ng-template>\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-input-error', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\r\n  <span class=\"error__message\">\r\n    @if (hasContent()) {\r\n      <ng-content />\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\r\n    }\r\n  </span>\r\n</section>\r\n\r\n<ng-template #errorsMessageDefault>\r\n  @switch (true) {\r\n    @case (Boolean(this.errors()?.['required'])) {\r\n      This field is required!\r\n    }\r\n    @case (Boolean(this.errors()?.['email'])) {\r\n      {{ this.errors()?.['email'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['maxlength'])) {\r\n      This field must have a maximum of\r\n      {{ this.errors()?.['maxlength'].requiredLength }}\r\n      characters!\r\n    }\r\n    @case (Boolean(this.errors()?.['minlength'])) {\r\n      This field must have a minimum of\r\n      {{ this.errors()?.['minlength'].requiredLength }}\r\n      characters!\r\n    }\r\n    @case (Boolean(this.errors()?.['isDate'])) {\r\n      {{ this.errors()?.['isDate'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['minimumAge'])) {\r\n      This field must meet the minimum age requirement of\r\n      {{ this.errors()?.['minimumAge'].requiredAge }} years\r\n    }\r\n    @case (Boolean(this.errors()?.['naturalNumber'])) {\r\n      {{ this.errors()?.['naturalNumber'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['mustMatch'])) {\r\n      {{ this.errors()?.['mustMatch'] }}\r\n    }\r\n    @case (Boolean(this.errors()?.['mustUnmatch'])) {\r\n      {{ this.errors()?.['mustUnmatch'] }}\r\n    }\r\n    @default {\r\n      empty error message\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'gld-input-error', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"error\" [class.error--with-border]=\"border()\">\n  <span class=\"error__message\">\n    @if (hasContent()) {\n      <ng-content />\n    } @else {\n      <ng-container [ngTemplateOutlet]=\"errorsMessageDefault\" />\n    }\n  </span>\n</section>\n\n<ng-template #errorsMessageDefault>\n  @switch (firstErrorKey()) {\n    @case ('required') {\n      This field is required!\n    }\n    @case ('email') {\n      {{ this.errors()?.['email'] }}\n    }\n    @case ('maxlength') {\n      This field must have a maximum of\n      {{ this.errors()?.['maxlength'].requiredLength }}\n      characters!\n    }\n    @case ('minlength') {\n      This field must have a minimum of\n      {{ this.errors()?.['minlength'].requiredLength }}\n      characters!\n    }\n    @case ('isDate') {\n      {{ this.errors()?.['isDate'] }}\n    }\n    @case ('minimumAge') {\n      This field must meet the minimum age requirement of\n      {{ this.errors()?.['minimumAge'].requiredAge }} years\n    }\n    @case ('isNaturalNumber') {\n      {{ this.errors()?.['isNaturalNumber'] }}\n    }\n    @case ('mustMatch') {\n      {{ this.errors()?.['mustMatch'] }}\n    }\n    @case ('mustUnmatch') {\n      {{ this.errors()?.['mustUnmatch'] }}\n    }\n    @case ('isString') {\n      {{ this.errors()?.['isString'] }}\n    }\n    @default {\n      empty error message\n    }\n  }\n</ng-template>\n", styles: [".error{--gld-color: var(--gld-red);--gld-background: var(--gld-red-transparent--010);--gld-radius: var(--gld-radius--xxs);--gld-border-color: var(--gld-red);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.error__icon{display:flex;align-items:center}.error__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.error__message:first-letter{text-transform:uppercase}.error--with-border{border-top:var(--gld-border-size) solid var(--gld-border-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: true }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], content: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => InputErrorMessageDirective$1), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
 
 // Angular Imports
 const components$5 = [InputErrorComponent];
-class InputComponent {
+class InputDateComponent {
     #destroyRef = inject(DestroyRef);
     #changeDetectorRef = inject(ChangeDetectorRef);
-    control = input.required();
-    name = input.required();
-    label = input('');
-    placeholder = input('');
-    type = input('text');
-    suffix = input(false, { transform: booleanAttribute });
-    innerControl = signal(new FormControl('', { nonNullable: true }));
+    control = input.required({ ...(ngDevMode ? { debugName: "control" } : {}) });
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    min = input('', { ...(ngDevMode ? { debugName: "min" } : {}), transform: (value) => formatISODateToDDMMYYYY$1({ date: value }) });
+    max = input('', { ...(ngDevMode ? { debugName: "max" } : {}), transform: (value) => formatISODateToDDMMYYYY$1({ date: value }) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    mask = input('', { ...(ngDevMode ? { debugName: "mask" } : {}) });
+    suffix = input(false, { ...(ngDevMode ? { debugName: "suffix" } : {}), transform: booleanAttribute });
+    innerControl = signal(new FormControl('', { nonNullable: true }), { ...(ngDevMode ? { debugName: "innerControl" } : {}) });
+    hasValidators = signal({
+        required: false,
+        naturalNumber: false,
+        string: false,
+        maxLength: null,
+    }, { ...(ngDevMode ? { debugName: "hasValidators" } : {}) });
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onChange = (value) => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -685,21 +1155,42 @@ class InputComponent {
         this.innerControl()
             .valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe((value) => {
-            this.onChange(value);
-            if (value)
-                this.innerControl().setValue(value, { emitEvent: false });
+            /**
+             * Removes all non-digit and non-slash characters from the input value string.
+             * This sanitizes the date input by keeping only numbers (0-9) and forward slashes (/)
+             * which are typically used in date formats like MM/DD/YYYY or DD/MM/YYYY.
+             *
+             * @example
+             * // Input: "12/34/abcd2023!@_"
+             * // Output: "12/34/2023"
+             */
+            const _value = String(value).replaceAll(/[^\d/]/g, '');
+            if (String(value) && Boolean(this.mask())) {
+                const masked = updateValueWithMask$1({ value: _value, mask: this.mask() });
+                this.innerControl().setValue(masked, { emitEvent: false });
+            }
+            const valueTransformed = formatDDMMYYYYToISODate$1({
+                date: _value,
+            });
+            this.onChange(valueTransformed ?? 'Invalid Date');
         });
     }
     ngOnInit() {
+        // Initialize validators cache
+        this.#updateHasValidators();
+        // Update validators when then changed in control
+        this.control()
+            .statusChanges.pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#updateHasValidators());
         // Subscribes to the form control's events and triggers change detection to update the view accordingly.
         this.control()
-            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(100))
+            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(10))
             .subscribe(() => this.#changeDetectorRef.detectChanges());
     }
     writeValue(value) {
         // console.log('writeValue')
         if (value !== this.innerControl().value)
-            this.innerControl().setValue(value);
+            this.innerControl().setValue(String(value));
     }
     registerOnChange(onChange) {
         // console.log('registerOnChange')
@@ -716,136 +1207,138 @@ class InputComponent {
         this.onTouched();
         // this.isMenuOpen.set(false)
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InputComponent, isStandalone: true, selector: "gld-input", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => InputComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label [for]=\"name()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <!-- Input -->\r\n  <input\r\n    id=\"input-{{ name() }}\"\r\n    [tabindex]=\"disabled ? '-1' : '0'\"\r\n    [name]=\"name()\"\r\n    [type]=\"type()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [formControl]=\"innerControl()\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onTouched()\"\r\n    (keyup.escape)=\"onBlur()\" />\r\n\r\n  <!-- Suffix -->\r\n  @if (suffix()) {\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n  }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n  <ng-content select=\"gld-input-error\">\r\n    <gld-input-error [errors]=\"control().errors\" />\r\n  </ng-content>\r\n} @else {\r\n  <!-- Hint -->\r\n  <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n    <ng-content select=\"[inputSuffix]\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gld-input', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$5], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => InputComponent),
-                            multi: true,
-                        },
-                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label [for]=\"name()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <!-- Input -->\r\n  <input\r\n    id=\"input-{{ name() }}\"\r\n    [tabindex]=\"disabled ? '-1' : '0'\"\r\n    [name]=\"name()\"\r\n    [type]=\"type()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [formControl]=\"innerControl()\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onTouched()\"\r\n    (keyup.escape)=\"onBlur()\" />\r\n\r\n  <!-- Suffix -->\r\n  @if (suffix()) {\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n  }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n  <ng-content select=\"gld-input-error\">\r\n    <gld-input-error [errors]=\"control().errors\" />\r\n  </ng-content>\r\n} @else {\r\n  <!-- Hint -->\r\n  <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n    <ng-content select=\"[inputSuffix]\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [] });
-
-// Angular Imports
-const components$4 = [InputErrorComponent];
-class InputDateComponent {
-    #destroyRef = inject(DestroyRef);
-    #changeDetectorRef = inject(ChangeDetectorRef);
-    control = input.required();
-    name = input.required();
-    label = input('');
-    min = input('', {
-        transform: (value) => formatDateFromISOToYYYYMMDD(value),
-    });
-    max = input('', {
-        transform: (value) => formatDateFromISOToYYYYMMDD(value),
-    });
-    placeholder = input('');
-    suffix = input(false, { transform: booleanAttribute });
-    innerControl = signal(new FormControl('', { nonNullable: true }));
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-    onChange = (value) => { };
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onTouched = () => { };
-    constructor() {
-        this.innerControl()
-            .valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe((value) => {
-            this.onChange(value);
-            if (value && typeof value === 'string') {
-                const valueTransformed = formatDateFromISOToYYYYMMDD(formatDateToISO(value));
-                this.innerControl().setValue(valueTransformed, { emitEvent: false });
-            }
+    #updateHasValidators() {
+        const control = this.control();
+        const validatorFn = control.validator;
+        const maskSpacers = this.mask()
+            .split('')
+            .filter((char) => char !== '0').length;
+        // It isn't validators
+        if (validatorFn === null) {
+            this.hasValidators.set({
+                required: false,
+                naturalNumber: false,
+                string: false,
+                maxLength: null,
+            });
+            return;
+        }
+        // Detect all validators
+        const requiredErrors = validatorFn(new FormControl(''));
+        const typeErrors = validatorFn(new FormControl('abc123'));
+        const maxLengthErrors = validatorFn(new FormControl({ length: Infinity }));
+        const maxLength = maxLengthErrors?.['maxlength']?.['requiredLength'];
+        this.hasValidators.set({
+            required: Boolean(requiredErrors?.['required']),
+            naturalNumber: Boolean(typeErrors?.['isNaturalNumber']),
+            string: Boolean(typeErrors?.['isString']),
+            maxLength: maxLength ? maxLength + maskSpacers : null,
         });
+        // console.log('hasValidators', this.hasValidators())
     }
-    ngOnInit() {
-        // Subscribes to the form control's events and triggers change detection to update the view accordingly.
-        this.control()
-            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(100))
-            .subscribe(() => this.#changeDetectorRef.detectChanges());
-    }
-    writeValue(value) {
-        // console.log('writeValue')
-        if (value !== this.innerControl().value)
-            this.innerControl().setValue(String(value));
-    }
-    registerOnChange(onChange) {
-        // console.log('registerOnChange')
-        this.onChange = onChange;
-    }
-    registerOnTouched(onTouched) {
-        // console.log('registerOnTouched')
-        this.onTouched = onTouched;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: InputDateComponent, isStandalone: true, selector: "gld-input-date", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputDateComponent, isStandalone: true, selector: "gld-input-date", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputDateComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n\n  <!-- Input -->\n  <input\n    type=\"date\"\n    id=\"{{ id() }}\"\n    name=\"{{ name() }}\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    [attr.min]=\"min()\"\n    [attr.max]=\"max()\"\n    [placeholder]=\"placeholder()\"\n    [formControl]=\"innerControl()\"\n    [attr.maxlength]=\"hasValidators().maxLength\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onTouched()\"\n    (keyup.escape)=\"onBlur()\" />\n\n  <!-- Suffix -->\n  @if (suffix()) {\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n  }\n</section>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n    <ng-content select=\"[inputSuffix]\" />\n  </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-input-date', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$4], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'gld-input-date', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$5], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputDateComponent),
                             multi: true,
                         },
-                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n\t<!-- Label -->\n\t@if (label()) {\n\t\t<label [for]=\"name()\">\n\t\t\t{{ label() }}\n\t\t</label>\n\t}\n\n\t<!-- Input -->\n\t<input\n\t\ttype=\"date\"\n\t\tid=\"input-date-{{ name() }}\"\n\t\t[name]=\"name()\"\n\t\t[attr.min]=\"min()\"\n\t\t[attr.max]=\"max()\"\n\t\t[placeholder]=\"placeholder()\"\n\t\t[formControl]=\"innerControl()\"\n\t\t(blur)=\"onTouched()\" />\n\n\t<!-- Suffix -->\n\t@if (suffix()) {\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\t}\n</section>\n<!-- Errors -->\n@if (errors) {\n\t<ng-content select=\"gld-input-error\">\n\t\t<gld-input-error [errors]=\"control().errors\" />\n\t</ng-content>\n} @else {\n\t<!-- Hint -->\n\t<ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n\t<span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n\t\t<ng-content select=\"[inputSuffix]\" />\n\t</span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n\n  <!-- Input -->\n  <input\n    type=\"date\"\n    id=\"{{ id() }}\"\n    name=\"{{ name() }}\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    [attr.min]=\"min()\"\n    [attr.max]=\"max()\"\n    [placeholder]=\"placeholder()\"\n    [formControl]=\"innerControl()\"\n    [attr.maxlength]=\"hasValidators().maxLength\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onTouched()\"\n    (keyup.escape)=\"onBlur()\" />\n\n  <!-- Suffix -->\n  @if (suffix()) {\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n  }\n</section>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n    <ng-content select=\"[inputSuffix]\" />\n  </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 
 // Angular Imports
 class InputHintComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.1", type: InputHintComponent, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\r\n\t<span class=\"hint__message\">\r\n\t\t<ng-content>hint empty</ng-content>\r\n\t</span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputHintComponent, isStandalone: true, selector: "gld-input-hint", ngImport: i0, template: "<section class=\"hint\">\r\n  <span class=\"hint__message\">\r\n    <ng-content>hint empty</ng-content>\r\n  </span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputHintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputHintComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-input-hint', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\r\n\t<span class=\"hint__message\">\r\n\t\t<ng-content>hint empty</ng-content>\r\n\t</span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"] }]
+            args: [{ selector: 'gld-input-hint', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"hint\">\r\n  <span class=\"hint__message\">\r\n    <ng-content>hint empty</ng-content>\r\n  </span>\r\n</section>\r\n", styles: [".hint{--gld-color: var(--gld-foreground-color);--gld-background: var(--gld-gray-transparent--020);--gld-radius: var(--gld-radius--xxs);color:var(--gld-color);background:var(--gld-background);border-radius:0 0 var(--gld-radius) var(--gld-radius);padding:var(--gld-spacing--xxxs) var(--gld-spacing--xxs);display:flex;align-items:flex-start;gap:var(--gld-spacing--xxxs)}.hint__icon{display:flex;align-items:center}.hint__message{font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--small);font-weight:400;line-height:1.25;text-transform:lowercase}.hint__message:first-letter{text-transform:uppercase}\n"] }]
         }] });
 
 // Angular Imports
-const components$3 = [InputErrorComponent];
-class TextareaComponent {
+const components$4 = [InputErrorComponent];
+class InputComponent {
     #destroyRef = inject(DestroyRef);
     #changeDetectorRef = inject(ChangeDetectorRef);
-    control = input.required();
-    name = input.required();
-    label = input('');
-    placeholder = input('');
-    type = input('text');
-    suffix = input(false, { transform: booleanAttribute });
+    control = input.required({ ...(ngDevMode ? { debugName: "control" } : {}) });
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
+    mask = input('', { ...(ngDevMode ? { debugName: "mask" } : {}) });
+    suffix = input(false, { ...(ngDevMode ? { debugName: "suffix" } : {}), transform: booleanAttribute });
+    innerControl = signal(new FormControl('', { nonNullable: true }), { ...(ngDevMode ? { debugName: "innerControl" } : {}) });
+    hasValidators = signal({
+        required: false,
+        naturalNumber: false,
+        string: false,
+        maxLength: null,
+    }, { ...(ngDevMode ? { debugName: "hasValidators" } : {}) });
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onChange = (value) => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onTouched = () => { };
-    innerControl = signal(new FormControl('', { nonNullable: true }));
     constructor() {
         this.innerControl()
             .valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe((value) => {
-            this.onChange(value);
-            if (value)
-                this.innerControl().setValue(value, { emitEvent: false });
+            let _value = value;
+            /**
+             * Removes all non-digit characters from the input value string.
+             * This sanitizes the value input by keeping only numbers (0-9)
+             *
+             * @example
+             * // Input: "12/34/abcd2023!@_"
+             * // Output: "12342023"
+             */
+            if (String(value) && this.hasValidators().naturalNumber) {
+                _value = String(value).replaceAll(NATURAL_NUMBER_REGEX_TO_CLEAN$1, '');
+                this.innerControl().markAsUntouched();
+            }
+            /**
+             * Removes all non-letter and non-space characters from the input value string.
+             * This sanitizes the value input by keeping only letters (a-z, A-Z, with accents like á, é, í, ó, ú, ñ) and spaces.
+             * Numbers, special characters, and symbols are removed.
+             *
+             * @example
+             * // Input: "Juan123@García#456 Pérez$"
+             * // Output: "JuanGarcía Pérez"
+             */
+            if (String(value) && this.hasValidators().string) {
+                _value = String(value).replaceAll(STRING_REGEX_TO_CLEAN$1, '');
+                this.innerControl().markAsUntouched();
+            }
+            // Apply mask depends on the mask input
+            if (value && Boolean(this.mask())) {
+                const mask = updateValueWithMask$1({ value: String(_value), mask: this.mask() });
+                this.innerControl().setValue(mask, { emitEvent: false });
+            }
+            // Emit value
+            this.onChange(_value);
         });
     }
     ngOnInit() {
+        // Initialize validators cache
+        this.#updateHasValidators();
+        // Update validators when then changed in control
+        this.control()
+            .statusChanges.pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#updateHasValidators());
         // Subscribes to the form control's events and triggers change detection to update the view accordingly.
         this.control()
-            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(100))
+            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(10))
             .subscribe(() => this.#changeDetectorRef.detectChanges());
     }
     writeValue(value) {
@@ -868,35 +1361,64 @@ class TextareaComponent {
         this.onTouched();
         // this.isMenuOpen.set(false)
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TextareaComponent, isStandalone: true, selector: "gld-textarea", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    #updateHasValidators() {
+        const control = this.control();
+        const validatorFn = control.validator;
+        const maskSpacers = this.mask()
+            .split('')
+            .filter((char) => char !== '0').length;
+        // It isn't validators
+        if (validatorFn === null) {
+            this.hasValidators.set({
+                required: false,
+                naturalNumber: false,
+                string: false,
+                maxLength: null,
+            });
+            return;
+        }
+        // Detect all validators
+        const requiredErrors = validatorFn(new FormControl(''));
+        const typeErrors = validatorFn(new FormControl('abc123'));
+        const maxLengthErrors = validatorFn(new FormControl({ length: Infinity }));
+        const maxLength = maxLengthErrors?.['maxlength']?.['requiredLength'];
+        this.hasValidators.set({
+            required: Boolean(requiredErrors?.['required']),
+            naturalNumber: Boolean(typeErrors?.['isNaturalNumber']),
+            string: Boolean(typeErrors?.['isString']),
+            maxLength: maxLength ? maxLength + maskSpacers : null,
+        });
+        // console.log('hasValidators', this.hasValidators())
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: InputComponent, isStandalone: true, selector: "gld-input", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TextareaComponent),
+                useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label [for]=\"name()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <!-- Input -->\r\n  <textarea\r\n    id=\"input-textarea-{{ name() }}\"\r\n    [name]=\"name()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [formControl]=\"innerControl()\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onTouched()\"\r\n    (keyup.escape)=\"onBlur()\"></textarea>\r\n\r\n  <!-- Suffix -->\r\n  @if (suffix()) {\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n  }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n  <ng-content select=\"gld-input-error\">\r\n    <gld-input-error [errors]=\"control().errors\" />\r\n  </ng-content>\r\n} @else {\r\n  <!-- Hint -->\r\n  <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix emplate -->\r\n<ng-template #suffixTemplate>\r\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n    <ng-content select=\"[inputSuffix]\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3>\r\n<section>errors: {{ errors }}</section>\r\n<section>invalid: {{ control().invalid }}</section>\r\n<section>dirty: {{ control().dirty }}</section>\r\n<section>touched: {{ control().touched }}</section>\r\n<section>disable: {{ control().disabled }}</section> -->\r\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n\n  <!-- Input -->\n  <input\n    id=\"{{ id() }}\"\n    name=\"{{ name() }}\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [formControl]=\"innerControl()\"\n    [attr.maxlength]=\"hasValidators().maxLength\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onTouched()\"\n    (keyup.escape)=\"onBlur()\" />\n\n  <!-- Suffix -->\n  @if (suffix()) {\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n  }\n</section>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n    <ng-content select=\"[inputSuffix]\" />\n  </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-textarea', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$3], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'gld-input', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$4], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TextareaComponent),
+                            useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label [for]=\"name()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <!-- Input -->\r\n  <textarea\r\n    id=\"input-textarea-{{ name() }}\"\r\n    [name]=\"name()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [formControl]=\"innerControl()\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onTouched()\"\r\n    (keyup.escape)=\"onBlur()\"></textarea>\r\n\r\n  <!-- Suffix -->\r\n  @if (suffix()) {\r\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n  }\r\n</section>\r\n<!-- Errors -->\r\n@if (errors) {\r\n  <ng-content select=\"gld-input-error\">\r\n    <gld-input-error [errors]=\"control().errors\" />\r\n  </ng-content>\r\n} @else {\r\n  <!-- Hint -->\r\n  <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- Suffix emplate -->\r\n<ng-template #suffixTemplate>\r\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\r\n    <ng-content select=\"[inputSuffix]\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3>\r\n<section>errors: {{ errors }}</section>\r\n<section>invalid: {{ control().invalid }}</section>\r\n<section>dirty: {{ control().dirty }}</section>\r\n<section>touched: {{ control().touched }}</section>\r\n<section>disable: {{ control().disabled }}</section> -->\r\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n\n  <!-- Input -->\n  <input\n    id=\"{{ id() }}\"\n    name=\"{{ name() }}\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [formControl]=\"innerControl()\"\n    [attr.maxlength]=\"hasValidators().maxLength\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onTouched()\"\n    (keyup.escape)=\"onBlur()\" />\n\n  <!-- Suffix -->\n  @if (suffix()) {\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n  }\n</section>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n    <ng-content select=\"[inputSuffix]\" />\n  </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 
 // Angular Imports
 class RadioButtonComponent {
-    value = input.required();
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
     changeValue = output();
     changeFocus = output();
-    current = signal(null);
-    disabled = signal(false);
-    error = signal(false);
-    selected = computed(() => Boolean(this.current() === this.value()));
+    current = signal(null, { ...(ngDevMode ? { debugName: "current" } : {}) });
+    disabled = signal(false, { ...(ngDevMode ? { debugName: "disabled" } : {}) });
+    error = signal(false, { ...(ngDevMode ? { debugName: "error" } : {}) });
+    selected = computed(() => Boolean(this.current() === this.value()), { ...(ngDevMode ? { debugName: "selected" } : {}) });
     select(value) {
         this.changeValue.emit(value);
     }
@@ -909,25 +1431,29 @@ class RadioButtonComponent {
     onBlur() {
         this.changeFocus.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: RadioButtonComponent, isStandalone: true, selector: "gld-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\r\n\t[tabindex]=\"disabled() ? '-1' : '0'\"\r\n\t(keyup.enter)=\"keyup(value())\"\r\n\t(click)=\"select(value())\"\r\n\tclass=\"radio\"\r\n\t[class.radio--selected]=\"selected()\"\r\n\t[class.radio--disabled]=\"disabled()\"\r\n\t[class.radio--error]=\"error()\"\r\n\t(focus)=\"onFocus()\"\r\n\t(blur)=\"onBlur()\"\r\n\t(keyup.escape)=\"onBlur()\">\r\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\r\n\r\n\t<span class=\"radio__label\">\r\n\t\t<ng-content>empty radio button</ng-content>\r\n\t</span>\r\n</button>\r\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: RadioButtonComponent, isStandalone: true, selector: "gld-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { changeValue: "changeValue", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\n  class=\"radio\"\n  [tabindex]=\"disabled() ? '-1' : '0'\"\n  [class.radio--selected]=\"selected()\"\n  [class.radio--disabled]=\"disabled()\"\n  [class.radio--error]=\"error()\"\n  (blur)=\"onBlur()\"\n  (focus)=\"onFocus()\"\n  (keyup.enter)=\"keyup(value())\"\n  (keyup.escape)=\"onBlur()\"\n  (click)=\"select(value())\">\n  <span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n  <span class=\"radio__label\">\n    <ng-content>empty radio button</ng-content>\n  </span>\n</button>\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-radio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n\t[tabindex]=\"disabled() ? '-1' : '0'\"\r\n\t(keyup.enter)=\"keyup(value())\"\r\n\t(click)=\"select(value())\"\r\n\tclass=\"radio\"\r\n\t[class.radio--selected]=\"selected()\"\r\n\t[class.radio--disabled]=\"disabled()\"\r\n\t[class.radio--error]=\"error()\"\r\n\t(focus)=\"onFocus()\"\r\n\t(blur)=\"onBlur()\"\r\n\t(keyup.escape)=\"onBlur()\">\r\n\t<span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\r\n\r\n\t<span class=\"radio__label\">\r\n\t\t<ng-content>empty radio button</ng-content>\r\n\t</span>\r\n</button>\r\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"] }]
-        }] });
+            args: [{ selector: 'gld-radio-button', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"radio\"\n  [tabindex]=\"disabled() ? '-1' : '0'\"\n  [class.radio--selected]=\"selected()\"\n  [class.radio--disabled]=\"disabled()\"\n  [class.radio--error]=\"error()\"\n  (blur)=\"onBlur()\"\n  (focus)=\"onFocus()\"\n  (keyup.enter)=\"keyup(value())\"\n  (keyup.escape)=\"onBlur()\"\n  (click)=\"select(value())\">\n  <span class=\"radio__icon\" [class.radio__icon--selected]=\"selected()\"></span>\n\n  <span class=\"radio__label\">\n    <ng-content>empty radio button</ng-content>\n  </span>\n</button>\n", styles: [":host{display:inline-flex;color:inherit;width:inherit;height:inherit}.radio{--gld-height: 26px;--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-dot-color: var(--gld-blue);--gld-dot-color--outer: var(--gld-gray-transparent--060);--gld-dot-color--outer-hover: var(--gld-blue);--gld-dot-color--outer-selected: var(--gld-blue);--gld-dot-color--outer-error: var(--gld-red);display:inline-flex;justify-content:center;align-items:center;border:none;background:none;gap:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-color);height:var(--gld-height);padding:var(--gld-spacing--xxxs);cursor:pointer;-webkit-user-select:none;user-select:none}.radio:hover .radio__icon,.radio:focus .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-hover)}.radio:focus{outline:none}.radio__icon{--gld-size: 20px;width:var(--gld-size);height:var(--gld-size);border-radius:50%;border:var(--gld-border-size) solid var(--gld-dot-color--outer);position:relative;display:flex;justify-content:center;align-items:center}.radio__icon--selected:before{content:\"\";position:absolute;width:calc(var(--gld-size) / 2);height:calc(var(--gld-size) / 2);background:var(--gld-dot-color);border-radius:inherit}.radio__label:first-letter{text-transform:uppercase}.radio--selected{--gld-dot-color--outer: var(--gld-dot-color--outer-selected)}.radio--disabled{--gld-color: var(--gld-color--disabled);--gld-dot-color--outer: var(--gld-color--disabled);pointer-events:none}.radio--error .radio__icon{--gld-dot-color--outer: var(--gld-dot-color--outer-error)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], changeValue: [{ type: i0.Output, args: ["changeValue"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }] } });
 
 // Angular Imports
-const components$2 = [InputErrorComponent];
+const components$3 = [InputErrorComponent];
 class RadioGroupComponent {
     #destroyRef = inject(DestroyRef);
     #changeDetectorRef = inject(ChangeDetectorRef);
-    control = input.required();
-    name = input.required();
-    label = input('');
-    direction = input(RadioDirection.horizontal);
-    radioButtonChildren = contentChildren(RadioButtonComponent);
-    innerControl = signal(new FormControl('', { nonNullable: true }));
+    control = input.required({ ...(ngDevMode ? { debugName: "control" } : {}) });
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    direction = input(RadioDirection$1.horizontal, { ...(ngDevMode ? { debugName: "direction" } : {}) });
+    radioButtonChildren = contentChildren(RadioButtonComponent, { ...(ngDevMode ? { debugName: "radioButtonChildren" } : {}) });
+    innerControl = signal(new FormControl('', { nonNullable: true }), { ...(ngDevMode ? { debugName: "innerControl" } : {}) });
+    hasValidators = signal({
+        required: false,
+    }, { ...(ngDevMode ? { debugName: "hasValidators" } : {}) });
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onChange = (value) => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -942,9 +1468,15 @@ class RadioGroupComponent {
         });
     }
     ngOnInit() {
+        // Initialize validators cache
+        this.#updateHasValidators();
+        // Update validators when then changed in control
+        this.control()
+            .statusChanges.pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#updateHasValidators());
         // Subscribes to the form control's events and triggers change detection to update the view accordingly.
         this.control()
-            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(100))
+            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(10))
             .subscribe(() => {
             this.updateErrorInChildren(this.control().invalid && (this.control().dirty || this.control().touched));
             this.#changeDetectorRef.detectChanges();
@@ -991,30 +1523,47 @@ class RadioGroupComponent {
     #updateDisabledInChildren(disabled) {
         this.radioButtonChildren().map((radioButton) => radioButton.disabled.set(disabled));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: RadioGroupComponent, isStandalone: true, selector: "gld-radio-group", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    #updateHasValidators() {
+        const control = this.control();
+        const validatorFn = control.validator;
+        // It isn't validators
+        if (validatorFn === null) {
+            this.hasValidators.set({
+                required: false,
+            });
+            return;
+        }
+        // Detect all validators
+        const requiredErrors = validatorFn(new FormControl(''));
+        this.hasValidators.set({
+            required: Boolean(requiredErrors?.['required']),
+        });
+        // console.log('hasValidators', this.hasValidators())
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RadioGroupComponent, isStandalone: true, selector: "gld-radio-group", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioGroupComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" [attr.name]=\"name()\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label [for]=\"name()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n  <section class=\"radio__items radio__items--{{ direction() }}\">\r\n    <ng-content select=\"gld-radio-button\" />\r\n  </section>\r\n</article>\r\n<!-- Errors -->\r\n@if (errors) {\r\n  <ng-content select=\"gld-input-error\">\r\n    <gld-input-error border [errors]=\"control().errors\" />\r\n  </ng-content>\r\n} @else {\r\n  <!-- Hint -->\r\n  <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "radioButtonChildren", predicate: RadioButtonComponent, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n  <section class=\"radio__items radio__items--{{ direction() }}\">\n    <ng-content select=\"gld-radio-button\" />\n  </section>\n</article>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error border [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"], dependencies: [{ kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: RadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-radio-group', standalone: true, imports: [...components$2], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'gld-radio-group', standalone: true, imports: [...components$3], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => RadioGroupComponent),
                             multi: true,
                         },
-                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" [attr.name]=\"name()\">\r\n  <!-- Label -->\r\n  @if (label()) {\r\n    <label [for]=\"name()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n  <section class=\"radio__items radio__items--{{ direction() }}\">\r\n    <ng-content select=\"gld-radio-button\" />\r\n  </section>\r\n</article>\r\n<!-- Errors -->\r\n@if (errors) {\r\n  <ng-content select=\"gld-input-error\">\r\n    <gld-input-error border [errors]=\"control().errors\" />\r\n  </ng-content>\r\n} @else {\r\n  <!-- Hint -->\r\n  <ng-content select=\"gld-input-hint\" />\r\n}\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<article class=\"radio\" [class.radio--disabled]=\"disabled\" id=\"{{ id() }}\" [attr.name]=\"name()\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n  <section class=\"radio__items radio__items--{{ direction() }}\">\n    <ng-content select=\"gld-radio-button\" />\n  </section>\n</article>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error border [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n", styles: [".radio{--gld-color: var(--gld-foreground-color);--gld-label-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);margin-bottom:var(--gld-spacing--xxxs)}.radio label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:var(--gld-line-height);color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text;margin-bottom:var(--gld-spacing--xxxs)}.radio label:first-letter{text-transform:uppercase}.radio--disabled .radio__label{--gld-color: var(--gld-color--disabled);pointer-events:none}.radio__items{display:flex;gap:var(--gld-spacing--xxs)}.radio__items--horizontal{align-items:center}.radio__items--vertical{flex-direction:column}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], radioButtonChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RadioButtonComponent), { isSignal: true }] }] } });
 
 // Angular Imports
 class SelectOptionComponent {
-    value = input.required();
-    disabled = input(false, { transform: booleanAttribute });
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
     selected = output();
     changeFocus = output();
     select() {
@@ -1030,29 +1579,37 @@ class SelectOptionComponent {
     onBlur() {
         this.changeFocus.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: SelectOptionComponent, isStandalone: true, selector: "gld-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\r\n  [tabindex]=\"disabled() ? '-1' : '0'\"\r\n  (keyup.enter)=\"keyup()\"\r\n  (click)=\"select()\"\r\n  (focus)=\"onFocus()\"\r\n  (blur)=\"onBlur()\"\r\n  (keyup.escape)=\"onBlur()\">\r\n  <span><ng-content> an option </ng-content></span>\r\n</button>\r\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: SelectOptionComponent, isStandalone: true, selector: "gld-select-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", changeFocus: "changeFocus" }, ngImport: i0, template: "<button\r\n  [tabindex]=\"disabled() ? '-1' : '0'\"\r\n  (keyup.enter)=\"keyup()\"\r\n  (click)=\"select()\"\r\n  (focus)=\"onFocus()\"\r\n  (blur)=\"onBlur()\"\r\n  (keyup.escape)=\"onBlur()\">\r\n  <span><ng-content> an option </ng-content></span>\r\n</button>\r\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gld-select-option', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  [tabindex]=\"disabled() ? '-1' : '0'\"\r\n  (keyup.enter)=\"keyup()\"\r\n  (click)=\"select()\"\r\n  (focus)=\"onFocus()\"\r\n  (blur)=\"onBlur()\"\r\n  (keyup.escape)=\"onBlur()\">\r\n  <span><ng-content> an option </ng-content></span>\r\n</button>\r\n", styles: [":host{height:var(--gld-height)}button{--gld-background: transparent;--gld-background--hover: var(--gld-gray-transparent--010);--gld-color: var(--gld-foreground-color);--gld-color--hover: var(--gld-blue);--gld-radius: var(--gld-radius--xxxs);padding:var(--gld-spacing--xs) var(--gld-spacing--s);width:100%;height:100%;max-width:100%;background:var(--gld-background);color:var(--gld-color);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;display:flex;align-items:center;-webkit-user-select:none;user-select:none;outline:none;border:none;border-radius:var(--gld-radius);cursor:pointer}button:hover,button:focus{--gld-background: var(--gld-background--hover);--gld-color: var(--gld-color--hover)}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
-        }] });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], changeFocus: [{ type: i0.Output, args: ["changeFocus"] }] } });
 
 // Angular Imports
-const components$1 = [IconComponent, InputErrorComponent];
+const components$2 = [IconComponent, InputErrorComponent];
 class SelectComponent {
     #destroyRef = inject(DestroyRef);
     #changeDetectorRef = inject(ChangeDetectorRef);
-    Icons = Icons;
-    control = input.required();
-    name = input.required();
-    label = input('');
-    placeholder = input('');
-    transform = input((value) => String(value));
-    selectElement = viewChild('selectElement');
-    selectOptionChildren = contentChildren(SelectOptionComponent);
-    innerControl = signal(new FormControl('', { nonNullable: true }));
-    isMenuOpen = signal(false);
+    Icons = Icons$1;
+    control = input.required({ ...(ngDevMode ? { debugName: "control" } : {}) });
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    mask = input('', { ...(ngDevMode ? { debugName: "mask" } : {}) });
+    transform = input((value) => String(value), { ...(ngDevMode ? { debugName: "transform" } : {}) });
+    selectElement = viewChild('selectElement', { ...(ngDevMode ? { debugName: "selectElement" } : {}) });
+    selectOptionChildren = contentChildren(SelectOptionComponent, { ...(ngDevMode ? { debugName: "selectOptionChildren" } : {}) });
+    innerControl = signal(new FormControl('', { nonNullable: true }), { ...(ngDevMode ? { debugName: "innerControl" } : {}) });
+    hasValidators = signal({
+        required: false,
+        naturalNumber: false,
+        string: false,
+        maxLength: null,
+    }, { ...(ngDevMode ? { debugName: "hasValidators" } : {}) });
+    isMenuOpen = signal(false, { ...(ngDevMode ? { debugName: "isMenuOpen" } : {}) });
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onChange = (value) => { };
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1065,17 +1622,43 @@ class SelectComponent {
         this.innerControl()
             .valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe((value) => {
-            this.onChange(value);
-            if (value) {
-                const valueTransformed = this.#transformValue(value);
+            let _value = value;
+            /**
+             * Removes all non-letter and non-space characters from the input value string.
+             * This sanitizes the value input by keeping only letters (a-z, A-Z, with accents like á, é, í, ó, ú, ñ) and spaces.
+             * Numbers, special characters, and symbols are removed.
+             *
+             * @example
+             * // Input: "Juan123@García#456 Pérez$"
+             * // Output: "JuanGarcía Pérez"
+             */
+            if (String(value) && this.hasValidators().string) {
+                _value = String(value).replaceAll(STRING_REGEX_TO_CLEAN$1, '');
+                this.innerControl().markAsUntouched();
+            }
+            // Apply mask depends on the mask input
+            const valueTransformed = this.#transformValue(_value) ?? '';
+            if (value && Boolean(this.mask())) {
+                const mask = updateValueWithMask$1({ value: valueTransformed, mask: this.mask() });
+                this.innerControl().setValue(mask, { emitEvent: false });
+            }
+            else {
                 this.innerControl().setValue(valueTransformed, { emitEvent: false });
             }
+            // Emit value
+            this.onChange(value);
         });
     }
     ngOnInit() {
+        // Initialize validators cache
+        this.#updateHasValidators();
+        // Update validators when then changed in control
+        this.control()
+            .statusChanges.pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#updateHasValidators());
         // Subscribes to the form control's events and triggers change detection to update the view accordingly.
         this.control()
-            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(100))
+            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(10))
             .subscribe(() => this.#changeDetectorRef.detectChanges());
     }
     ngAfterContentInit() {
@@ -1150,69 +1733,233 @@ class SelectComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: SelectComponent, isStandalone: true, selector: "gld-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    #updateHasValidators() {
+        const control = this.control();
+        const validatorFn = control.validator;
+        const maskSpacers = this.mask()
+            .split('')
+            .filter((char) => char !== '0').length;
+        // It isn't validators
+        if (validatorFn === null) {
+            this.hasValidators.set({
+                required: false,
+                naturalNumber: false,
+                string: false,
+                maxLength: null,
+            });
+            return;
+        }
+        // Detect all validators
+        const requiredErrors = validatorFn(new FormControl(''));
+        const typeErrors = validatorFn(new FormControl('abc123'));
+        const maxLengthErrors = validatorFn(new FormControl({ length: Infinity }));
+        const maxLength = maxLengthErrors?.['maxlength']?.['requiredLength'];
+        this.hasValidators.set({
+            required: Boolean(requiredErrors?.['required']),
+            naturalNumber: Boolean(typeErrors?.['isNaturalNumber']),
+            string: Boolean(typeErrors?.['isString']),
+            maxLength: maxLength ? maxLength + maskSpacers : null,
+        });
+        // console.log('hasValidators', this.hasValidators())
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: SelectComponent, isStandalone: true, selector: "gld-select", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "selectOptionChildren", predicate: SelectOptionComponent, isSignal: true }], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n  <section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n    <!-- Label -->\n    @if (label()) {\n      <label for=\"{{ id() }}\">\n        <span>{{ label() }}</span>\n        @if (hasValidators().required) {\n          <span>*</span>\n        }\n      </label>\n    }\n    <!-- Input -->\n    <input\n      type=\"text\"\n      id=\"{{ id() }}\"\n      name=\"{{ name() }}\"\n      [tabindex]=\"disabled ? '-1' : '0'\"\n      [placeholder]=\"placeholder()\"\n      [formControl]=\"innerControl()\"\n      [attr.maxlength]=\"hasValidators().maxLength\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keyup.escape)=\"onBlur()\" />\n\n    <!-- Suffix -->\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n    <!-- Menu -->\n    <ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n  </section>\n  <!-- Errors -->\n  @if (errors) {\n    <ng-content select=\"gld-input-error\">\n      <gld-input-error [errors]=\"control().errors\" />\n    </ng-content>\n  } @else {\n    <!-- Hint -->\n    <ng-content select=\"gld-input-hint\" />\n  }\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n  <section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n    <ng-content select=\"gld-select-option\" />\n  </section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n  @if (control().pending) {\n    <gld-icon\n      size=\"small\"\n      class=\"input-icon input-icon--animated\"\n      [class.input-icon--error]=\"errors\"\n      [icon]=\"Icons.loader4Fill\"\n      [disabled]=\"disabled\" />\n  } @else {\n    <gld-icon\n      size=\"small\"\n      class=\"input-icon\"\n      [class.input-icon--rotated]=\"isMenuOpen()\"\n      [class.input-icon--error]=\"errors\"\n      [icon]=\"Icons.arrowDownSLine\"\n      [disabled]=\"disabled\"\n      (clicked)=\"arrowIconClicked()\" />\n  }\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n<!-- FIXME: Verify why this element is here -->\n<!-- Suffix Template -->\n<!-- <ng-template #suffixTemplate>\n  <gld-icon\n    size=\"small\"\n    class=\"input-icon\"\n    [class.input-icon--error]=\"errors\"\n    [icon]=\"Icons.arrowDownSLine\" />\n</ng-template> -->\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "gld-icon", inputs: ["icon", "size", "space", "moveTopToBottom", "moveLeftToRight", "disabled"], outputs: ["clicked"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-select', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$1], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'gld-select', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$2], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "\r\n@let errors = control().invalid && (control().dirty || control().touched);\r\n@let disabled = control().disabled || (control().pending && control().disabled);\r\n\r\n<section #selectElement class=\"select\">\r\n\t<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\r\n\t\t<!-- Label -->\r\n\t\t@if (label()) {\r\n\t\t\t<label [for]=\"name()\">\r\n\t\t\t\t{{ label() }}\r\n\t\t\t</label>\r\n\t\t}\r\n\t\t<!-- Input -->\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tid=\"input-select-{{ name() }}\"\r\n\t\t\t[tabindex]=\"disabled ? '-1' : '0'\"\r\n\t\t\t[name]=\"name()\"\r\n\t\t\t[placeholder]=\"placeholder()\"\r\n\t\t\t[formControl]=\"innerControl()\"\r\n\t\t\t(focus)=\"onFocus()\"\r\n\t\t\t(blur)=\"onBlur()\"\r\n\t\t\t(keyup.escape)=\"onBlur()\" />\r\n\r\n\t\t<!-- Suffix -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\r\n\r\n\t\t<!-- Menu -->\r\n\t\t<ng-container [ngTemplateOutlet]=\"menuTemplate\" />\r\n\t</section>\r\n\t<!-- Errors -->\r\n\t@if (errors) {\r\n\t\t<ng-content select=\"gld-input-error\">\r\n\t\t\t<gld-input-error [errors]=\"control().errors\" />\r\n\t\t</ng-content>\r\n\t} @else {\r\n\t\t<!-- Hint -->\r\n\t\t<ng-content select=\"gld-input-hint\" />\r\n\t}\r\n</section>\r\n\r\n<!-- Menu Template -->\r\n<ng-template #menuTemplate>\r\n\t<section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\r\n\t\t<ng-content select=\"gld-select-option\" />\r\n\t</section>\r\n</ng-template>\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t@if (control().pending) {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon input-icon--animated\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.loader4Fill\"\r\n\t\t\t[disabled]=\"disabled\" />\r\n\t} @else {\r\n\t\t<gld-icon\r\n\t\t\tsize=\"small\"\r\n\t\t\tclass=\"input-icon\"\r\n\t\t\t[class.input-icon--rotated]=\"isMenuOpen()\"\r\n\t\t\t[class.input-icon--error]=\"errors\"\r\n\t\t\t[icon]=\"Icons.arrowDownSLine\"\r\n\t\t\t[disabled]=\"disabled\"\r\n\t\t\t(clicked)=\"arrowIconClicked()\" />\r\n\t}\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n<!-- <section>status: {{ control().status }}</section> -->\r\n\r\n<!-- Suffix Template -->\r\n<ng-template #suffixTemplate>\r\n\t<gld-icon\r\n\t\tsize=\"small\"\r\n\t\tclass=\"input-icon\"\r\n\t\t[class.input-icon--error]=\"errors\"\r\n\t\t[icon]=\"Icons.arrowDownSLine\" />\r\n</ng-template>\r\n\r\n<!-- <h3>Debugging</h3> -->\r\n<!-- <section>errors: {{ control().errors | json }}</section> -->\r\n<!-- <section>errors: {{ errors }}</section> -->\r\n<!-- <section>invalid: {{ control().invalid }}</section> -->\r\n<!-- <section>dirty: {{ control().dirty }}</section> -->\r\n<!-- <section>touched: {{ control().touched }}</section> -->\r\n<!-- <section>disable: {{ control().disabled }}</section> -->\r\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}.input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.select-menu::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.select-menu::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section #selectElement class=\"select\">\n  <section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n    <!-- Label -->\n    @if (label()) {\n      <label for=\"{{ id() }}\">\n        <span>{{ label() }}</span>\n        @if (hasValidators().required) {\n          <span>*</span>\n        }\n      </label>\n    }\n    <!-- Input -->\n    <input\n      type=\"text\"\n      id=\"{{ id() }}\"\n      name=\"{{ name() }}\"\n      [tabindex]=\"disabled ? '-1' : '0'\"\n      [placeholder]=\"placeholder()\"\n      [formControl]=\"innerControl()\"\n      [attr.maxlength]=\"hasValidators().maxLength\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keyup.escape)=\"onBlur()\" />\n\n    <!-- Suffix -->\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n\n    <!-- Menu -->\n    <ng-container [ngTemplateOutlet]=\"menuTemplate\" />\n  </section>\n  <!-- Errors -->\n  @if (errors) {\n    <ng-content select=\"gld-input-error\">\n      <gld-input-error [errors]=\"control().errors\" />\n    </ng-content>\n  } @else {\n    <!-- Hint -->\n    <ng-content select=\"gld-input-hint\" />\n  }\n</section>\n\n<!-- Menu Template -->\n<ng-template #menuTemplate>\n  <section class=\"select-menu\" [class.select-menu--opened]=\"isMenuOpen()\">\n    <ng-content select=\"gld-select-option\" />\n  </section>\n</ng-template>\n\n<!-- Suffix Template -->\n<ng-template #suffixTemplate>\n  @if (control().pending) {\n    <gld-icon\n      size=\"small\"\n      class=\"input-icon input-icon--animated\"\n      [class.input-icon--error]=\"errors\"\n      [icon]=\"Icons.loader4Fill\"\n      [disabled]=\"disabled\" />\n  } @else {\n    <gld-icon\n      size=\"small\"\n      class=\"input-icon\"\n      [class.input-icon--rotated]=\"isMenuOpen()\"\n      [class.input-icon--error]=\"errors\"\n      [icon]=\"Icons.arrowDownSLine\"\n      [disabled]=\"disabled\"\n      (clicked)=\"arrowIconClicked()\" />\n  }\n</ng-template>\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n<!-- <section>status: {{ control().status }}</section> -->\n\n<!-- FIXME: Verify why this element is here -->\n<!-- Suffix Template -->\n<!-- <ng-template #suffixTemplate>\n  <gld-icon\n    size=\"small\"\n    class=\"input-icon\"\n    [class.input-icon--error]=\"errors\"\n    [icon]=\"Icons.arrowDownSLine\" />\n</ng-template> -->\n\n<!-- <h3>Debugging</h3> -->\n<!-- <section>errors: {{ control().errors | json }}</section> -->\n<!-- <section>errors: {{ errors }}</section> -->\n<!-- <section>invalid: {{ control().invalid }}</section> -->\n<!-- <section>dirty: {{ control().dirty }}</section> -->\n<!-- <section>touched: {{ control().touched }}</section> -->\n<!-- <section>disable: {{ control().disabled }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-height: 40px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input input{width:100%;min-width:var(--gld-min-with);height:var(--gld-height);padding:var(--gld-spacing--xxs);padding-right:var(--gld-spacing--m);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input input:focus{--gld-border-color: var(--gld-blue)}.input input::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:var(--gld-spacing--xxs);color:var(--gld-color);-webkit-user-select:none;user-select:none;will-change:transform,color;transition:transform var(--gld-animation-time) ease,color var(--gld-animation-time) ease-in-out;cursor:pointer}.input-icon--animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.input-icon--rotated{transform:rotate(180deg)}.select{--gld-background: light-dark(var(--gld-whitelight), var(--gld-darkblue));--gld-shadow: light-dark(var(--gld-gray-transparent--040), var(--gld-gray-transparent--020));--gld-height: 40px;--gld-option-items: 0;--gld-option-height: 40px;--gld-animation-time: var(--gld-animation-time--150);--gld-padding: var(--gld-spacing--xxxs);--gld-radius: var(--gld-radius--xxs);position:relative;background:transparent}.select-menu{position:absolute;z-index:1;top:calc(var(--gld-height) + 22px);left:0;height:0;padding:0;display:grid;grid-template-columns:1fr;background:var(--gld-background);box-shadow:inset 0 0 0 var(--gld-border-size) var(--gld-shadow);border-radius:var(--gld-radius);min-width:100%;max-width:100%;max-height:calc(var(--gld-option-height) * 5);overflow-y:auto;will-change:height,padding;transition:var(--gld-animation-time) height ease-in-out,var(--gld-animation-time) padding ease-in-out}.select-menu--opened{height:calc(var(--gld-option-height) * var(--gld-option-items) + var(--gld-padding) * 2);padding:var(--gld-padding)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], selectElement: [{ type: i0.ViewChild, args: ['selectElement', { isSignal: true }] }], selectOptionChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SelectOptionComponent), { isSignal: true }] }] } });
+
+// Angular Imports
+const components$1 = [InputErrorComponent];
+class TextareaComponent {
+    #destroyRef = inject(DestroyRef);
+    #changeDetectorRef = inject(ChangeDetectorRef);
+    control = input.required({ ...(ngDevMode ? { debugName: "control" } : {}) });
+    id = input.required({ ...(ngDevMode ? { debugName: "id" } : {}), transform: (value) => `input-id-${value.trim().split(' ').join('-')}` });
+    name = input.required({ ...(ngDevMode ? { debugName: "name" } : {}), transform: (value) => `input-name-${value.trim().split(' ').join('-')}` });
+    label = input('', { ...(ngDevMode ? { debugName: "label" } : {}) });
+    placeholder = input('', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
+    suffix = input(false, { ...(ngDevMode ? { debugName: "suffix" } : {}), transform: booleanAttribute });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    onChange = (value) => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    innerControl = signal(new FormControl('', { nonNullable: true }), { ...(ngDevMode ? { debugName: "innerControl" } : {}) });
+    hasValidators = signal({
+        required: false,
+        naturalNumber: false,
+        string: false,
+        maxLength: null,
+    }, { ...(ngDevMode ? { debugName: "hasValidators" } : {}) });
+    constructor() {
+        this.innerControl()
+            .valueChanges.pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((value) => {
+            let _value = value;
+            /**
+             * Removes all non-digit characters from the input value string.
+             * This sanitizes the value input by keeping only numbers (0-9)
+             *
+             * @example
+             * // Input: "12/34/abcd2023!@_"
+             * // Output: "12342023"
+             */
+            if (String(value) && this.hasValidators().naturalNumber) {
+                _value = String(value).replaceAll(NATURAL_NUMBER_REGEX_TO_CLEAN$1, '');
+                this.innerControl().markAsUntouched();
+            }
+            /**
+             * Removes all non-letter and non-space characters from the input value string.
+             * This sanitizes the value input by keeping only letters (a-z, A-Z, with accents like á, é, í, ó, ú, ñ) and spaces.
+             * Numbers, special characters, and symbols are removed.
+             *
+             * @example
+             * // Input: "Juan123@García#456 Pérez$"
+             * // Output: "JuanGarcía Pérez"
+             */
+            if (String(value) && this.hasValidators().string) {
+                _value = String(value).replaceAll(STRING_REGEX_TO_CLEAN$1, '');
+                this.innerControl().markAsUntouched();
+            }
+            // Emit value
+            this.onChange(_value);
+        });
+    }
+    ngOnInit() {
+        // Initialize validators cache
+        this.#updateHasValidators();
+        // Update validators when then changed in control
+        this.control()
+            .statusChanges.pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.#updateHasValidators());
+        // Subscribes to the form control's events and triggers change detection to update the view accordingly.
+        this.control()
+            .events.pipe(takeUntilDestroyed(this.#destroyRef), debounceTime(10))
+            .subscribe(() => this.#changeDetectorRef.detectChanges());
+    }
+    writeValue(value) {
+        // console.log('writeValue')
+        if (value !== this.innerControl().value)
+            this.innerControl().setValue(value);
+    }
+    registerOnChange(onChange) {
+        // console.log('registerOnChange')
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        // console.log('registerOnTouched')
+        this.onTouched = onTouched;
+    }
+    onFocus() {
+        // this.isMenuOpen.set(true)
+    }
+    onBlur() {
+        this.onTouched();
+        // this.isMenuOpen.set(false)
+    }
+    #updateHasValidators() {
+        const control = this.control();
+        const validatorFn = control.validator;
+        // It isn't validators
+        if (validatorFn === null) {
+            this.hasValidators.set({
+                required: false,
+                naturalNumber: false,
+                string: false,
+                maxLength: null,
+            });
+            return;
+        }
+        // Detect all validators
+        const requiredErrors = validatorFn(new FormControl(''));
+        const typeErrors = validatorFn(new FormControl('abc123'));
+        const maxLengthErrors = validatorFn(new FormControl({ length: Infinity }));
+        const maxLength = maxLengthErrors?.['maxlength']?.['requiredLength'];
+        this.hasValidators.set({
+            required: Boolean(requiredErrors?.['required']),
+            naturalNumber: Boolean(typeErrors?.['isNaturalNumber']),
+            string: Boolean(typeErrors?.['isString']),
+            maxLength: maxLength ? maxLength : null,
+        });
+        // console.log('hasValidators', this.hasValidators())
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TextareaComponent, isStandalone: true, selector: "gld-textarea", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n\n  <!-- Input -->\n  <textarea\n    id=\"{{ id() }}\"\n    name=\"{{ name() }}\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    [placeholder]=\"placeholder()\"\n    [formControl]=\"innerControl()\"\n    [attr.maxlength]=\"hasValidators().maxLength\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onTouched()\"\n    (keyup.escape)=\"onBlur()\"></textarea>\n\n  <!-- Suffix -->\n  @if (suffix()) {\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n  }\n</section>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix emplate -->\n<ng-template #suffixTemplate>\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n    <ng-content select=\"[inputSuffix]\" />\n  </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3>\n<section>errors: {{ errors }}</section>\n<section>invalid: {{ control().invalid }}</section>\n<section>dirty: {{ control().dirty }}</section>\n<section>touched: {{ control().touched }}</section>\n<section>disable: {{ control().disabled }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputErrorComponent, selector: "gld-input-error", inputs: ["errors", "border"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gld-textarea', standalone: true, imports: [ReactiveFormsModule, NgTemplateOutlet, ...components$1], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true,
+                        },
+                    ], template: "@let errors = control().invalid && (control().dirty || control().touched);\n@let disabled = control().disabled || (control().pending && control().disabled);\n\n<section class=\"input\" [class.input--disabled]=\"disabled\" [class.input--error]=\"errors\">\n  <!-- Label -->\n  @if (label()) {\n    <label for=\"{{ id() }}\">\n      <span>{{ label() }}</span>\n      @if (hasValidators().required) {\n        <span>*</span>\n      }\n    </label>\n  }\n\n  <!-- Input -->\n  <textarea\n    id=\"{{ id() }}\"\n    name=\"{{ name() }}\"\n    [tabindex]=\"disabled ? '-1' : '0'\"\n    [placeholder]=\"placeholder()\"\n    [formControl]=\"innerControl()\"\n    [attr.maxlength]=\"hasValidators().maxLength\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onTouched()\"\n    (keyup.escape)=\"onBlur()\"></textarea>\n\n  <!-- Suffix -->\n  @if (suffix()) {\n    <ng-container [ngTemplateOutlet]=\"suffixTemplate\" />\n  }\n</section>\n<!-- Errors -->\n@if (errors) {\n  <ng-content select=\"gld-input-error\">\n    <gld-input-error [errors]=\"control().errors\" />\n  </ng-content>\n} @else {\n  <!-- Hint -->\n  <ng-content select=\"gld-input-hint\" />\n}\n\n<!-- Suffix emplate -->\n<ng-template #suffixTemplate>\n  <span tabindex=\"-1\" class=\"input-icon\" [class.input-icon--error]=\"errors\">\n    <ng-content select=\"[inputSuffix]\" />\n  </span>\n</ng-template>\n\n<!-- <h3>Debugging</h3>\n<section>errors: {{ errors }}</section>\n<section>invalid: {{ control().invalid }}</section>\n<section>dirty: {{ control().dirty }}</section>\n<section>touched: {{ control().touched }}</section>\n<section>disable: {{ control().disabled }}</section> -->\n", styles: [".input{--gld-color: var(--gld-foreground-color);--gld-color--disabled: var(--gld-gray-transparent--060);--gld-color--error: var(--gld-red);--gld-placeholder-color: var(--gld-gray-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-label-color: var(--gld-foreground-color);--gld-min-height: 120px;--gld-max-height: 240px;--gld-min-with: 50px;--gld-animation-time: var(--gld-animation-time--150);position:relative;background:transparent}.input label{padding:0;font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;color:var(--gld-label-color);will-change:color;transition:color var(--gld-animation-time) ease;cursor:text}.input textarea{display:flex;width:100%;min-width:var(--gld-min-with);min-height:var(--gld-min-height);max-height:var(--gld-max-height);padding:var(--gld-spacing--xxs);font-family:var(--gld-font--poppins);font-size:var(--gld-font-size--normal);font-weight:400;line-height:1.25;border:none;outline:none;border-bottom:var(--gld-border-size) solid var(--gld-border-color);color:var(--gld-color);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;resize:vertical;form-sizing:content;will-change:color;transition:color var(--gld-animation-time) ease-in-out}.input textarea:focus{--gld-border-color: var(--gld-blue)}.input textarea::placeholder{color:var(--gld-placeholder-color)}.input--error{--gld-color: var(--gld-color--error);--gld-label-color: var(--gld-color--error);--gld-border-color: var(--gld-color--error);--gld-placeholder-color: var(--gld-color--error)}.input--disabled{--gld-color: var(--gld-color--disabled);--gld-border-color: var(--gld-color--disabled);--gld-label-color: var(--gld-color--disabled);--gld-placeholder-color: var(--gld-color--disabled);pointer-events:none;cursor:not-allowed}.input-icon{position:absolute;right:var(--gld-spacing--xxs);bottom:0;display:inline-block;color:var(--gld-color);will-change:transform,color;transition:color var(--gld-animation-time) ease;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 
 // Angular Imports
 class ImageComponent {
-    src = input.required();
-    alt = input.required();
+    src = input.required({ ...(ngDevMode ? { debugName: "src" } : {}) });
+    alt = input.required({ ...(ngDevMode ? { debugName: "alt" } : {}) });
     // srcset = input<string>('')
     // sizes = input<string>('')
-    priority = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: ImageComponent, isStandalone: true, selector: "gld-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- @if (srcset() && sizes()) {\r\n  @if (priority()) {\r\n    <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\r\n  } @else {\r\n    <img\r\n      fill\r\n      alt=\"{{ alt() }}\"\r\n      [ngSrc]=\"src()\"\r\n      [ngSrcset]=\"srcset()\"\r\n      [sizes]=\"sizes()\"\r\n      loading=\"lazy\" />\r\n  }\r\n} @else {\r\n  @if (priority()) {\r\n    <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n  } @else {\r\n    <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n  }\r\n} -->\r\n\r\n@if (priority()) {\r\n  <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n} @else {\r\n  <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n}\r\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    priority = input(false, { ...(ngDevMode ? { debugName: "priority" } : {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ImageComponent, isStandalone: true, selector: "gld-image", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: true, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- @if (srcset() && sizes()) {\r\n  @if (priority()) {\r\n    <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\r\n  } @else {\r\n    <img\r\n      fill\r\n      alt=\"{{ alt() }}\"\r\n      [ngSrc]=\"src()\"\r\n      [ngSrcset]=\"srcset()\"\r\n      [sizes]=\"sizes()\"\r\n      loading=\"lazy\" />\r\n  }\r\n} @else {\r\n  @if (priority()) {\r\n    <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n  } @else {\r\n    <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n  }\r\n} -->\r\n\r\n@if (priority()) {\r\n  <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n} @else {\r\n  <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n}\r\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gld-image', standalone: true, imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- @if (srcset() && sizes()) {\r\n  @if (priority()) {\r\n    <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" [ngSrcset]=\"srcset()\" [sizes]=\"sizes()\" />\r\n  } @else {\r\n    <img\r\n      fill\r\n      alt=\"{{ alt() }}\"\r\n      [ngSrc]=\"src()\"\r\n      [ngSrcset]=\"srcset()\"\r\n      [sizes]=\"sizes()\"\r\n      loading=\"lazy\" />\r\n  }\r\n} @else {\r\n  @if (priority()) {\r\n    <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n  } @else {\r\n    <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n  }\r\n} -->\r\n\r\n@if (priority()) {\r\n  <img fill priority alt=\"{{ alt() }}\" [ngSrc]=\"src()\" />\r\n} @else {\r\n  <img fill alt=\"{{ alt() }}\" [ngSrc]=\"src()\" loading=\"lazy\" />\r\n}\r\n", styles: [":host{position:relative;aspect-ratio:1/1;overflow:hidden;display:inline-block;object-fit:inherit;width:inherit;height:inherit}img{width:inherit;height:inherit;max-width:100%;max-height:100%;display:inherit;aspect-ratio:inherit;z-index:inherit;object-fit:inherit;border-radius:inherit;border:inherit;background-color:inherit;-webkit-user-select:none;user-select:none;pointer-events:none}\n"] }]
-        }] });
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: true }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }] } });
 
 // Angular Imports
-class LoaderComponent {
-    loading = input(false, { transform: booleanAttribute });
-    background = input(false, { transform: booleanAttribute });
-    radius = input(false, { transform: booleanAttribute });
-    minHeight = input('auto');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: LoaderComponent, isStandalone: true, selector: "gld-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n  class=\"loader\"\n  [class.loader--loading]=\"loading()\"\n  [class.loader--background]=\"background()\"\n  [class.loader--radius]=\"radius()\"\n  [style.minHeight]=\"minHeight()\">\n  <!-- Content -->\n  <ng-content />\n\n  <!-- Loader -->\n  @if (loading()) {\n    <section class=\"loader-loading\">\n      <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n        <circle\n          class=\"track\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"17.5\"\n          pathlength=\"100\"\n          stroke-width=\"5px\"\n          fill=\"none\" />\n        <circle\n          class=\"car\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"17.5\"\n          pathlength=\"100\"\n          stroke-width=\"5px\"\n          fill=\"none\" />\n      </svg>\n    </section>\n  }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class CircleLoaderComponent {
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
+    radius = input(false, { ...(ngDevMode ? { debugName: "radius" } : {}), transform: booleanAttribute });
+    minHeight = input('auto', { ...(ngDevMode ? { debugName: "minHeight" } : {}) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CircleLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: CircleLoaderComponent, isStandalone: true, selector: "gld-circle-loader", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\r\n  class=\"loader\"\r\n  [class.loader--loading]=\"loading()\"\r\n  [class.loader--background]=\"background()\"\r\n  [class.loader--radius]=\"radius()\"\r\n  [style.minHeight]=\"minHeight()\">\r\n  <!-- Content -->\r\n  <ng-content />\r\n\r\n  <!-- Loader -->\r\n  @if (loading()) {\r\n    <section class=\"loader-loading\">\r\n      <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\r\n        <circle\r\n          class=\"track\"\r\n          cx=\"20\"\r\n          cy=\"20\"\r\n          r=\"17.5\"\r\n          pathlength=\"100\"\r\n          stroke-width=\"5px\"\r\n          fill=\"none\" />\r\n        <circle\r\n          class=\"car\"\r\n          cx=\"20\"\r\n          cy=\"20\"\r\n          r=\"17.5\"\r\n          pathlength=\"100\"\r\n          stroke-width=\"5px\"\r\n          fill=\"none\" />\r\n      </svg>\r\n    </section>\r\n  }\r\n</article>\r\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CircleLoaderComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'gld-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n  class=\"loader\"\n  [class.loader--loading]=\"loading()\"\n  [class.loader--background]=\"background()\"\n  [class.loader--radius]=\"radius()\"\n  [style.minHeight]=\"minHeight()\">\n  <!-- Content -->\n  <ng-content />\n\n  <!-- Loader -->\n  @if (loading()) {\n    <section class=\"loader-loading\">\n      <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\n        <circle\n          class=\"track\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"17.5\"\n          pathlength=\"100\"\n          stroke-width=\"5px\"\n          fill=\"none\" />\n        <circle\n          class=\"car\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"17.5\"\n          pathlength=\"100\"\n          stroke-width=\"5px\"\n          fill=\"none\" />\n      </svg>\n    </section>\n  }\n</article>\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"] }]
-        }] });
+            args: [{ standalone: true, selector: 'gld-circle-loader', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\r\n  class=\"loader\"\r\n  [class.loader--loading]=\"loading()\"\r\n  [class.loader--background]=\"background()\"\r\n  [class.loader--radius]=\"radius()\"\r\n  [style.minHeight]=\"minHeight()\">\r\n  <!-- Content -->\r\n  <ng-content />\r\n\r\n  <!-- Loader -->\r\n  @if (loading()) {\r\n    <section class=\"loader-loading\">\r\n      <svg class=\"container\" viewBox=\"0 0 40 40\" height=\"40\" width=\"40\">\r\n        <circle\r\n          class=\"track\"\r\n          cx=\"20\"\r\n          cy=\"20\"\r\n          r=\"17.5\"\r\n          pathlength=\"100\"\r\n          stroke-width=\"5px\"\r\n          fill=\"none\" />\r\n        <circle\r\n          class=\"car\"\r\n          cx=\"20\"\r\n          cy=\"20\"\r\n          r=\"17.5\"\r\n          pathlength=\"100\"\r\n          stroke-width=\"5px\"\r\n          fill=\"none\" />\r\n      </svg>\r\n    </section>\r\n  }\r\n</article>\r\n", styles: [":host{width:100%}.loader{--gld-color: var(--gld-foreground-color);--gld-background: light-dark( var(--gld-whitelight-transparent--080), var(--gld-darkblue-transparent--080) );position:relative;color:var(--color)}.loader--radius{border-radius:var(--gld-spacing--xxxs)}.loader-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:1}.loader--background .loader-loading{background:var(--gld-background)}.container{--uib-size: 40px;--uib-color: var(--gld-orange);--uib-speed: .8s;--uib-bg-opacity: .1;width:var(--uib-size);height:var(--uib-size);transform-origin:center;animation:rotate var(--uib-speed) linear infinite;will-change:transform;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:25,75;stroke-dashoffset:0;stroke-linecap:round;transition:stroke .5s ease}.track{fill:none;stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s ease}@keyframes rotate{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }] } });
 
 // Angular Imports
 class TablePaginationComponent {
-    Icons = Icons;
-    pagination = input.required();
+    Icons = Icons$1;
+    pagination = input.required({ ...(ngDevMode ? { debugName: "pagination" } : {}) });
     page = output();
     changeToNext = output();
     changeToPrevious = output();
-    currentPage = signal(0);
+    currentPage = signal(0, { ...(ngDevMode ? { debugName: "currentPage" } : {}) });
     maxPages = computed(() => {
         if (this.pagination().itemsPerPage > this.pagination().maxItems)
             return 1;
         else
             return Math.ceil(this.pagination().maxItems / this.pagination().itemsPerPage);
-    });
+    }, { ...(ngDevMode ? { debugName: "maxPages" } : {}) });
     constructor() {
         effect(() => this.page.emit(this.currentPage()));
         effect(() => {
@@ -1239,28 +1986,28 @@ class TablePaginationComponent {
         }
         this.changeToPrevious.emit(this.currentPage());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: TablePaginationComponent, isStandalone: true, selector: "gld-table-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "page", changeToNext: "changeToNext", changeToPrevious: "changeToPrevious" }, ngImport: i0, template: "<article class=\"Pagination\" >\n  <section class=\"Pagination-info\">\n    <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\n  </section>\n  <section class=\"Pagination-actions\">\n    <!-- <gld-icon-button\n      class=\"\"\n      name=\"button-next\"\n      iconSize=\"small\"\n      [icon]=\"Icons.arrowLeftSLine\"\n      (clicked)=\"previousPage()\" />\n    <gld-icon-button\n      class=\"\"\n      name=\"button-previous\"\n      iconSize=\"small\"\n      [icon]=\"Icons.arrowRightSLine\"\n      (clicked)=\"nextPage()\" /> -->\n  </section>\n</article>\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: TablePaginationComponent, isStandalone: true, selector: "gld-table-pagination", inputs: { pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { page: "page", changeToNext: "changeToNext", changeToPrevious: "changeToPrevious" }, ngImport: i0, template: "<article class=\"Pagination\">\r\n  <section class=\"Pagination-info\">\r\n    <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\r\n  </section>\r\n  <section class=\"Pagination-actions\">\r\n    <!-- <gld-icon-button\r\n      class=\"\"\r\n      name=\"button-next\"\r\n      iconSize=\"small\"\r\n      [icon]=\"Icons.arrowLeftSLine\"\r\n      (clicked)=\"previousPage()\" />\r\n    <gld-icon-button\r\n      class=\"\"\r\n      name=\"button-previous\"\r\n      iconSize=\"small\"\r\n      [icon]=\"Icons.arrowRightSLine\"\r\n      (clicked)=\"nextPage()\" /> -->\r\n  </section>\r\n</article>\r\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TablePaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TablePaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-table-pagination', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Pagination\" >\n  <section class=\"Pagination-info\">\n    <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\n  </section>\n  <section class=\"Pagination-actions\">\n    <!-- <gld-icon-button\n      class=\"\"\n      name=\"button-next\"\n      iconSize=\"small\"\n      [icon]=\"Icons.arrowLeftSLine\"\n      (clicked)=\"previousPage()\" />\n    <gld-icon-button\n      class=\"\"\n      name=\"button-previous\"\n      iconSize=\"small\"\n      [icon]=\"Icons.arrowRightSLine\"\n      (clicked)=\"nextPage()\" /> -->\n  </section>\n</article>\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'gld-table-pagination', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Pagination\">\r\n  <section class=\"Pagination-info\">\r\n    <p class=\"Pagination-label\">P\u00E1gina {{ currentPage() }} de {{ maxPages() }}</p>\r\n  </section>\r\n  <section class=\"Pagination-actions\">\r\n    <!-- <gld-icon-button\r\n      class=\"\"\r\n      name=\"button-next\"\r\n      iconSize=\"small\"\r\n      [icon]=\"Icons.arrowLeftSLine\"\r\n      (clicked)=\"previousPage()\" />\r\n    <gld-icon-button\r\n      class=\"\"\r\n      name=\"button-previous\"\r\n      iconSize=\"small\"\r\n      [icon]=\"Icons.arrowRightSLine\"\r\n      (clicked)=\"nextPage()\" /> -->\r\n  </section>\r\n</article>\r\n", styles: [".Pagination{--color: var(--darkblue);--height: 40px;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing--s);margin:var(--spacing--s) 0;height:var(--height);padding-left:var(--spacing--s)}.Pagination.Theme--dark{--color: var(--whitelight)}.Pagination-label{margin:0;font:600 var(--font-size--normal) var(--font--poppins);color:var(--color)}.Pagination-actions{display:flex;gap:var(--spacing--xxxs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], page: [{ type: i0.Output, args: ["page"] }], changeToNext: [{ type: i0.Output, args: ["changeToNext"] }], changeToPrevious: [{ type: i0.Output, args: ["changeToPrevious"] }] } });
 
 // Angular Imports
 class TableSearchComponent {
     #formBuilder = inject(FormBuilder);
-    Icons = Icons;
-    placeholder = input('buscar');
-    width = input('auto');
-    debounceTime = input(250);
+    Icons = Icons$1;
+    placeholder = input('buscar', { ...(ngDevMode ? { debugName: "placeholder" } : {}) });
+    width = input('auto', { ...(ngDevMode ? { debugName: "width" } : {}) });
+    debounceTime = input(250, { ...(ngDevMode ? { debugName: "debounceTime" } : {}) });
     searching = output();
     control = this.#formBuilder.control('');
     constructor() {
         this.control.valueChanges
             .pipe(debounceTime(this.debounceTime()))
             .subscribe((value) => {
-            const action = value?.length ? TableSearchAction.searching : TableSearchAction.cleared;
+            const action = value?.length ? TableSearchAction$1.searching : TableSearchAction$1.cleared;
             const searching = value?.length ? value : '';
             this.searching.emit({
                 action,
@@ -1268,29 +2015,29 @@ class TableSearchComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: TableSearchComponent, isStandalone: true, selector: "gld-table-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searching: "searching" }, ngImport: i0, template: "<article class=\"Search\">\n  <section class=\"Input\" [style.width]=\"width()\">\n    <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\n\n    <input\n      id=\"search\"\n      name=\"search\"\n      type=\"search\"\n      [placeholder]=\"placeholder()\"\n      [formControl]=\"control\" />\n  </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: TableSearchComponent, isStandalone: true, selector: "gld-table-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searching: "searching" }, ngImport: i0, template: "<article class=\"Search\">\r\n  <section class=\"Input\" [style.width]=\"width()\">\r\n    <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\r\n\r\n    <input\r\n      id=\"search\"\r\n      name=\"search\"\r\n      type=\"search\"\r\n      [placeholder]=\"placeholder()\"\r\n      [formControl]=\"control\" />\r\n  </section>\r\n</article>\r\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TableSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-table-search', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Search\">\n  <section class=\"Input\" [style.width]=\"width()\">\n    <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\n\n    <input\n      id=\"search\"\n      name=\"search\"\n      type=\"search\"\n      [placeholder]=\"placeholder()\"\n      [formControl]=\"control\" />\n  </section>\n</article>\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'gld-table-search', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Search\">\r\n  <section class=\"Input\" [style.width]=\"width()\">\r\n    <!-- <gld-icon [icon]=\"Icons.search2Line\" /> -->\r\n\r\n    <input\r\n      id=\"search\"\r\n      name=\"search\"\r\n      type=\"search\"\r\n      [placeholder]=\"placeholder()\"\r\n      [formControl]=\"control\" />\r\n  </section>\r\n</article>\r\n", styles: [".Search{margin-bottom:24px}.Input{--radius: 100px;--background: var(--whitelight);--color: var(--darkblue);--placeholder-color: var(--gray);--border-color: var(--gray);--outline-color: var(--blue);--label-color: var(--darkblue);--height: 40px;--min-with: 350px;--icon-size: 20px;--animation-time: var(--animation-time--150);position:relative}.Input input{position:relative;width:100%;min-width:var(--min-with);height:var(--height);padding:12px 24px 12px calc(24px + var(--icon-size) + 12px);font-size:16px;font-family:inherit;color:var(--color);background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius)}.Input input:focus{outline-color:var(--outline-color)}.Input input::placeholder{color:var(--color)}.Input gld-icon{position:absolute;left:24px;top:calc(50% - 11px);z-index:1;color:var(--border-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], searching: [{ type: i0.Output, args: ["searching"] }] } });
 
 // Angular Imports
-const components = [DropdownButtonComponent, DropdownMenuComponent, LoaderComponent];
+const components = [DropdownButtonComponent, DropdownMenuComponent, CircleLoaderComponent];
 class TableComponent {
-    Icons = Icons;
-    tableColumns = input.required();
-    emptyMessage = input('');
-    tableHeight = input('auto');
-    loading = input(true, { transform: booleanAttribute });
-    selects = input(false, { transform: booleanAttribute });
-    selectsAll = input(false, { transform: booleanAttribute });
-    search = input(false, { transform: booleanAttribute });
-    pagination = input(false, { transform: booleanAttribute });
+    Icons = Icons$1;
+    tableColumns = input.required({ ...(ngDevMode ? { debugName: "tableColumns" } : {}) });
+    emptyMessage = input('', { ...(ngDevMode ? { debugName: "emptyMessage" } : {}) });
+    tableHeight = input('auto', { ...(ngDevMode ? { debugName: "tableHeight" } : {}) });
+    loading = input(true, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    selects = input(false, { ...(ngDevMode ? { debugName: "selects" } : {}), transform: booleanAttribute });
+    selectsAll = input(false, { ...(ngDevMode ? { debugName: "selectsAll" } : {}), transform: booleanAttribute });
+    search = input(false, { ...(ngDevMode ? { debugName: "search" } : {}), transform: booleanAttribute });
+    pagination = input(false, { ...(ngDevMode ? { debugName: "pagination" } : {}), transform: booleanAttribute });
     tableColumnAction = output();
-    tableColumnsToShow = computed(() => this.tableColumns().filter((column) => !column.hide));
-    tableColumnActions = signal([]);
+    tableColumnsToShow = computed(() => this.tableColumns().filter((column) => !column.hide), { ...(ngDevMode ? { debugName: "tableColumnsToShow" } : {}) });
+    tableColumnActions = signal([], { ...(ngDevMode ? { debugName: "tableColumnActions" } : {}) });
     tableActionFunction({ tableColumnActionAsEvent, tableColumns, index }) {
         const tableColumnAction = tableColumnActionAsEvent;
         const object = this.#buildObjectFromTableColumn({ tableColumns, index });
@@ -1300,8 +2047,9 @@ class TableComponent {
         };
         this.tableColumnAction.emit(event);
     }
-    changeValue(event) {
-        console.log('event', event);
+    changeValue() {
+        // event: unknown
+        // console.log('event', event)
     }
     // We build each column and in case it doesn't exist or update it in case it already exists
     buildTableColumns({ tableColumnStructures, tableColumnActions, dataStructures, }) {
@@ -1407,37 +2155,31 @@ class TableComponent {
             return { ...previous, [current.name]: current.values[index] };
         }, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: LoaderComponent, selector: "gld-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: TableComponent, isStandalone: true, selector: "gld-table", inputs: { tableColumns: { classPropertyName: "tableColumns", publicName: "tableColumns", isSignal: true, isRequired: true, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, selects: { classPropertyName: "selects", publicName: "selects", isSignal: true, isRequired: false, transformFunction: null }, selectsAll: { classPropertyName: "selectsAll", publicName: "selectsAll", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableColumnAction: "tableColumnAction" }, ngImport: i0, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-circle-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              id=\"more button of table cell\"\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "gld-dropdown-button", inputs: ["value", "icon", "iconSize", "iconSpace", "moveTopToBottom", "moveLeftToRight", "direction"], outputs: ["changeValue"] }, { kind: "component", type: DropdownMenuComponent, selector: "gld-dropdown-menu", inputs: ["id", "name", "type", "color", "size", "icon", "iconSize", "moveTopToBottom", "moveLeftToRight", "disabled", "full", "direction", "background", "selected", "initialValue"], outputs: ["changeValue", "changeFocus"] }, { kind: "component", type: CircleLoaderComponent, selector: "gld-circle-loader", inputs: ["loading", "background", "radius", "minHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n\n", styles: ["@charset \"UTF-8\";:root{--gld-break-point--zero: 0;--gld-break-point--mobile: 320px;--gld-break-point--landscape: 576px;--gld-break-point--tablet: 768px;--gld-break-point--desktop: 1080px;--gld-break-point--extra-desktop: 1280px;--gld-font-size--heading-one: 36px;--gld-font-size--heading-two: 26px;--gld-font-size--heading-three: 20px;--gld-font-size--normal: 16px;--gld-font-size--small: 12px;--gld-font-size--tiny: 8px;--gld-font--poppins: \"Poppins\", sans-serif;--gld-radius--z: 0;--gld-radius--xxxs: 4px;--gld-radius--xxs: 6px;--gld-radius--xs: 8px;--gld-radius--s: 12px;--gld-radius--m: 16px;--gld-radius--l: 24px;--gld-radius--xl: 32px;--gld-radius--xxl: 40px;--gld-spacing--z: 0;--gld-spacing--xxxs: 4px;--gld-spacing--xxs: 8px;--gld-spacing--xs: 12px;--gld-spacing--s: 16px;--gld-spacing--m: 24px;--gld-spacing--l: 32px;--gld-spacing--xl: 48px;--gld-spacing--xxl: 70px;--gld-zindex--one: 1000;--gld-zindex--two: 2000;--gld-zindex--three: 3000;--gld-zindex--four: 4000;--gld-zindex--five: 5000;--gld-icon-size--large: 48px;--gld-icon-size--medium: 40px;--gld-icon-size--normal: 32px;--gld-icon-size--small: 24px;--gld-icon-size--tiny: 16px;--gld-red: #ef4444;--gld-red-transparent--005: rgba(239, 68, 68, .05);--gld-red-transparent--010: rgba(239, 68, 68, .1);--gld-red-transparent--020: rgba(239, 68, 68, .2);--gld-red-transparent--030: rgba(239, 68, 68, .3);--gld-red-transparent--040: rgba(239, 68, 68, .4);--gld-red-transparent--050: rgba(239, 68, 68, .5);--gld-red-transparent--060: rgba(239, 68, 68, .6);--gld-red-transparent--070: rgba(239, 68, 68, .7);--gld-red-transparent--080: rgba(239, 68, 68, .8);--gld-red-transparent--090: rgba(239, 68, 68, .9);--gld-blue: #3c82f6;--gld-blue-transparent--005: rgba(60, 130, 246, .05);--gld-blue-transparent--010: rgba(60, 130, 246, .1);--gld-blue-transparent--020: rgba(60, 130, 246, .2);--gld-blue-transparent--030: rgba(60, 130, 246, .3);--gld-blue-transparent--040: rgba(60, 130, 246, .4);--gld-blue-transparent--050: rgba(60, 130, 246, .5);--gld-blue-transparent--060: rgba(60, 130, 246, .6);--gld-blue-transparent--070: rgba(60, 130, 246, .7);--gld-blue-transparent--080: rgba(60, 130, 246, .8);--gld-blue-transparent--090: rgba(60, 130, 246, .9);--gld-green: #12b981;--gld-green-transparent--005: rgba(18, 185, 129, .05);--gld-green-transparent--010: rgba(18, 185, 129, .1);--gld-green-transparent--020: rgba(18, 185, 129, .2);--gld-green-transparent--030: rgba(18, 185, 129, .3);--gld-green-transparent--040: rgba(18, 185, 129, .4);--gld-green-transparent--050: rgba(18, 185, 129, .5);--gld-green-transparent--060: rgba(18, 185, 129, .6);--gld-green-transparent--070: rgba(18, 185, 129, .7);--gld-green-transparent--080: rgba(18, 185, 129, .8);--gld-green-transparent--090: rgba(18, 185, 129, .9);--gld-purple: #a855f7;--gld-purple-transparent--005: rgba(168, 85, 247, .05);--gld-purple-transparent--010: rgba(168, 85, 247, .1);--gld-purple-transparent--020: rgba(168, 85, 247, .2);--gld-purple-transparent--030: rgba(168, 85, 247, .3);--gld-purple-transparent--040: rgba(168, 85, 247, .4);--gld-purple-transparent--050: rgba(168, 85, 247, .5);--gld-purple-transparent--060: rgba(168, 85, 247, .6);--gld-purple-transparent--070: rgba(168, 85, 247, .7);--gld-purple-transparent--080: rgba(168, 85, 247, .8);--gld-purple-transparent--090: rgba(168, 85, 247, .9);--gld-mustard: #ebb305;--gld-mustard-transparent--005: rgba(235, 179, 5, .05);--gld-mustard-transparent--010: rgba(235, 179, 5, .1);--gld-mustard-transparent--020: rgba(235, 179, 5, .2);--gld-mustard-transparent--030: rgba(235, 179, 5, .3);--gld-mustard-transparent--040: rgba(235, 179, 5, .4);--gld-mustard-transparent--050: rgba(235, 179, 5, .5);--gld-mustard-transparent--060: rgba(235, 179, 5, .6);--gld-mustard-transparent--070: rgba(235, 179, 5, .7);--gld-mustard-transparent--080: rgba(235, 179, 5, .8);--gld-mustard-transparent--090: rgba(235, 179, 5, .9);--gld-orange: #f97315;--gld-orange-transparent--005: rgba(249, 115, 21, .05);--gld-orange-transparent--010: rgba(249, 115, 21, .1);--gld-orange-transparent--020: rgba(249, 115, 21, .2);--gld-orange-transparent--030: rgba(249, 115, 21, .3);--gld-orange-transparent--040: rgba(249, 115, 21, .4);--gld-orange-transparent--050: rgba(249, 115, 21, .5);--gld-orange-transparent--060: rgba(249, 115, 21, .6);--gld-orange-transparent--070: rgba(249, 115, 21, .7);--gld-orange-transparent--080: rgba(249, 115, 21, .8);--gld-orange-transparent--090: rgba(249, 115, 21, .9);--gld-pink: #ec4899;--gld-pink-transparent--005: rgba(236, 72, 153, .05);--gld-pink-transparent--010: rgba(236, 72, 153, .1);--gld-pink-transparent--020: rgba(236, 72, 153, .2);--gld-pink-transparent--030: rgba(236, 72, 153, .3);--gld-pink-transparent--040: rgba(236, 72, 153, .4);--gld-pink-transparent--050: rgba(236, 72, 153, .5);--gld-pink-transparent--060: rgba(236, 72, 153, .6);--gld-pink-transparent--070: rgba(236, 72, 153, .7);--gld-pink-transparent--080: rgba(236, 72, 153, .8);--gld-pink-transparent--090: rgba(236, 72, 153, .9);--gld-gray: #c1c7e1;--gld-gray-transparent--010: rgba(193, 199, 225, .1);--gld-gray-transparent--020: rgba(193, 199, 225, .2);--gld-gray-transparent--030: rgba(193, 199, 225, .3);--gld-gray-transparent--040: rgba(193, 199, 225, .4);--gld-gray-transparent--050: rgba(193, 199, 225, .5);--gld-gray-transparent--060: rgba(193, 199, 225, .6);--gld-gray-transparent--070: rgba(193, 199, 225, .7);--gld-gray-transparent--080: rgba(193, 199, 225, .8);--gld-gray-transparent--090: rgba(193, 199, 225, .9);--gld-white: #fff;--gld-whitelight: #f9fafb;--gld-whitelight-transparent--010: rgba(249, 250, 251, .1);--gld-whitelight-transparent--020: rgba(249, 250, 251, .2);--gld-whitelight-transparent--030: rgba(249, 250, 251, .3);--gld-whitelight-transparent--040: rgba(249, 250, 251, .4);--gld-whitelight-transparent--050: rgba(249, 250, 251, .5);--gld-whitelight-transparent--060: rgba(249, 250, 251, .6);--gld-whitelight-transparent--070: rgba(249, 250, 251, .7);--gld-whitelight-transparent--080: rgba(249, 250, 251, .8);--gld-whitelight-transparent--090: rgba(249, 250, 251, .9);--gld-darkblue: #101827;--gld-darkblue-transparent--010: rgba(16, 24, 39, .1);--gld-darkblue-transparent--020: rgba(16, 24, 39, .2);--gld-darkblue-transparent--030: rgba(16, 24, 39, .3);--gld-darkblue-transparent--040: rgba(16, 24, 39, .4);--gld-darkblue-transparent--050: rgba(16, 24, 39, .5);--gld-darkblue-transparent--060: rgba(16, 24, 39, .6);--gld-darkblue-transparent--070: rgba(16, 24, 39, .7);--gld-darkblue-transparent--080: rgba(16, 24, 39, .8);--gld-darkblue-transparent--090: rgba(16, 24, 39, .9);--gld-border-size: 1px;--gld-animation-time--150: .15s;--gld-animation-time--250: .25s;--gld-animation-time--10s: 10s;--gld-line-height: 1.2;--gld-max-width: 1280px;--gld-navbar-height: 50px;--gld-sidebar-width: 250px}*,*:before,*:after{box-sizing:border-box;min-width:0}html,body{font-family:var(--gld-font--poppins)}body{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin:0}p{text-wrap:pretty;margin:0}body.theme--light{color-scheme:light;--gld-foreground-color: var(--gld-darkblue);--gld-background-color: var(--gld-whitelight)}body.theme--dark{color-scheme:dark;--gld-foreground-color: var(--gld-whitelight);--gld-background-color: var(--gld-darkblue)}body.theme--system{color-scheme:light dark;--gld-foreground-color: light-dark(var(--gld-darkblue), var(--gld-whitelight));--gld-background-color: light-dark(var(--gld-whitelight), var(--gld-darkblue))}:host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-background--with-transparent: light-dark( var(--gld-gray-transparent--020), var(--gld-gray-transparent--010) );--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table::-webkit-scrollbar-track{background:transparent}.table::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-content{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;scrollbar-color:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020)) transparent;scroll-behavior:smooth}.table-content::-webkit-scrollbar{width:var(--gld-spacing--xxs);height:var(--gld-spacing--xxs)}.table-content::-webkit-scrollbar-track{background:transparent}.table-content::-webkit-scrollbar-thumb{background:light-dark(var(--gld-gray-transparent--040),var(--gld-gray-transparent--020));will-change:background;transition:background var(--gld-animation-time--150) ease;border-radius:var(--gld-radius--s)}.table-content::-webkit-scrollbar-thumb:hover{background:light-dark(var(--gld-gray-transparent--060),var(--gld-gray-transparent--040))}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height);background:var(--gld-background--with-transparent)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0;background:var(--gld-background--with-transparent)}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);background:var(--gld-background--with-transparent);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
-        }] });
+            args: [{ selector: 'gld-table', standalone: true, imports: [NgTemplateOutlet, ...components], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Search -->\n@if (search()) {\n  <section class=\"table-search\">\n    <ng-content select=\"gld-table-search\" />\n  </section>\n}\n\n<!-- Table -->\n<article\n  class=\"table\"\n  [class.table--empty]=\"!tableColumnsToShow().length\"\n  [style.height]=\"tableHeight()\">\n  <!-- Table Content -->\n  <section\n    class=\"table-content\"\n    [class.table-content--actions]=\"tableColumnActions().length\"\n    [class.table-content--selects]=\"selects()\">\n    <!-- Loading -->\n    @if (loading()) {\n      <gld-circle-loader loading background minHeight=\"100px\" />\n    } @else {\n      <!-- Table Columns -->\n      @for (tableColumn of tableColumnsToShow(); track tableColumn) {\n        <section\n          class=\"table-column\"\n          [style.flexBasis]=\"tableColumn.width\"\n          [style.flexShrink]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.flexGrow]=\"tableColumn.width === 'auto' ? '1' : '0'\"\n          [style.minWidth]=\"tableColumn.minWidth\"\n          [style.maxWidth]=\"tableColumn.maxWidth\">\n          <section class=\"table-header\">\n            <span class=\"table-header-ellipsis\">{{ tableColumn.label }}</span>\n          </section>\n          @for (value of tableColumn.values; track $index) {\n            <section\n              class=\"table-cell\"\n              [style.justifyContent]=\"tableColumn.justify\"\n              [style.textAlign]=\"tableColumn.justify\">\n              @if (tableColumn.transform(value) !== undefined) {\n                @switch (true) {\n                  @case (tableColumn.template !== undefined) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableColumn.template\"\n                      [ngTemplateOutletContext]=\"{ value: tableColumn.transform(value) }\" />\n                  }\n                  @default {\n                    <span class=\"table-cell-ellipsis\">{{ tableColumn.transform(value) }}</span>\n                  }\n                }\n              } @else {\n                <span>-</span>\n              }\n            </section>\n          }\n        </section>\n      } @empty {\n        <!-- Empty -->\n        <section class=\"table-empty\">\n          <p>{{ emptyMessage() ? emptyMessage() : 'We have not data to show yet!' }}</p>\n        </section>\n      }\n    }\n  </section>\n\n  <!-- Table Actions -->\n  @if ((tableColumnActions().length || selects()) && !loading() && tableColumnsToShow().length) {\n    <section\n      class=\"table-column\"\n      [class.table-column--actions]=\"tableColumnActions().length\"\n      [class.table-column--selects]=\"selects()\">\n      <!-- Header -->\n      <section\n        class=\"table-header\"\n        [class.table-header--actions]=\"tableColumnActions().length\"\n        [class.table-header--selects]=\"selects()\">\n        <!-- Select All Checkbox -->\n        @if (selectsAll()) {\n          <!-- <mat-checkbox\n              color=\"primary\"\n              matTooltip=\"Todo\"\n              matTooltipClass=\"Tooltip\"\n              class=\"Checkbox\"\n              [checked]=\"\n                dragAndDropColumnSelected().length === dragAndDropColumns().at(0)?.values?.length\n              \"\n              [indeterminate]=\"\n                !!dragAndDropColumnSelected().length &&\n                dragAndDropColumnSelected().length !== dragAndDropColumns().at(0)?.values?.length\n              \"\n              (change)=\"onSelectOrUnselectAll($event, dragAndDropColumns())\"\n            /> -->\n        }\n      </section>\n      @for (value of tableColumnsToShow().at(0)?.values; track $index; let index = $index) {\n        <!-- Cell -->\n        <section class=\"table-cell table-cell--actions\">\n          <!-- Select Checkbox -->\n          @if (selects()) {\n            <!-- <mat-checkbox\n            color=\"primary\"\n            class=\"Checkbox\"\n            matTooltip=\"Seleccionar\"\n            matTooltipClass=\"Tooltip\"\n            [checked]=\"isSelected(dragAndDropColumns(), index)\"\n            (change)=\"onSelect($event, dragAndDropColumns(), index)\" /> -->\n          }\n          @if (tableColumnActions()) {\n            <!-- Dropdown Menu -->\n            <gld-dropdown-menu\n              background\n              id=\"more button of table cell\"\n              name=\"more button of table cell\"\n              type=\"iconButton\"\n              color=\"blue\"\n              iconSize=\"small\"\n              direction=\"left\"\n              [icon]=\"Icons.more2Fill\"\n              (changeValue)=\"\n                tableActionFunction({\n                  tableColumnActionAsEvent: $event,\n                  tableColumns: tableColumns(),\n                  index,\n                })\n              \">\n              @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                <gld-dropdown-button\n                  [value]=\"tableColumnAction\"\n                  [icon]=\"tableColumnAction.icon\"\n                  iconSize=\"tiny\">\n                  {{ tableColumnAction.label }}\n                </gld-dropdown-button>\n              }\n            </gld-dropdown-menu>\n            <!-- <gld-icon-button\n              background\n              name=\"more button of table cell\"\n              iconSize=\"small\"\n              [icon]=\"Icons.more2Fill\"> -->\n            <!-- <gld-tile color=\"blue-to-green\"  class=\"Menu\">\n                  <section class=\"Menu-content\">\n                    @for (tableColumnAction of tableColumnActions(); track tableColumnAction.type) {\n                      <button\n                        class=\"Menu-button {{ tableColumnAction?.classToHover ?? '' }}\"\n                        [class.Menu-button--hidden]=\"\n                          !tableColumnAction.showWhen(buildDataStructure({ index }))\n                        \"\n                        (click)=\"\n                          tableActionFunction({\n                            tableColumnAction,\n                            tableColumns: tableColumns(),\n                            index,\n                          })\n                        \">\n                        <gld-icon size=\"tiny\" [icon]=\"tableColumnAction.icon\" />\n                        <span class=\"Menu-button-ellipsis\">{{ tableColumnAction.label }}</span>\n                      </button>\n                    }\n                  </section>\n                </gld-tile> -->\n            <!-- </gld-icon-button> -->\n          }\n        </section>\n      }\n    </section>\n  }\n</article>\n\n<!-- Pagination -->\n@if (pagination()) {\n  <section class=\"table-pagination\">\n    <ng-content select=\"gld-table-pagination\" />\n  </section>\n}\n", styles: [":host{width:100%}.table{--gld-color: var(--gld-foreground-color);--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) );--gld-border-radius: var(--gld-radius--xxs);--gld-background: var(--gld-background-color);--gld-column-actions-or-selects-width: 40px;--gld-column-actions-and-selects-width: 80px;--gld-header-height: 40px;--gld-cell-height: 40px;--gld-min-height: 100px;min-height:var(--gld-min-height);display:grid;grid-template-columns:1fr;position:relative;border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-border-radius);background:var(--gld-background);overflow:hidden}.table-content{display:flex;flex-wrap:nowrap}.table-header,.table-cell{color:var(--color);font-family:var(--gld-font--poppins);padding:var(--gld-spacing--xxs) var(--gld-spacing--s);border-bottom:var(--gld-border-size) solid var(--gld-border-color)}.table-header-ellipsis,.table-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.table-header-ellipsis--hover,.table-cell-ellipsis--hover{cursor:pointer}.table-header{display:flex;align-items:center;font:600 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins);height:var(--gld-header-height)}.table-header.table-header--actions,.table-header.table-header--selects{justify-content:center}.table-header.table-header--actions.table-header--selects{justify-content:flex-start}.table-header--actions{background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-header--actions:before{content:\"\";position:absolute;inset:0}.table-cell{display:flex;align-items:center;height:var(--gld-cell-height);font:400 var(--gld-font-size--small)/var(--gld-line-height) var(--gld-font--poppins)}.table-cell:last-of-type{margin-bottom:0;border-bottom:none}.table-cell.table-cell--actions,.table-cell.table-cell--selects{justify-content:center;padding:0}.table-cell--actions{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--gld-spacing--xxxs);background:var(--gld-background);border-left:var(--gld-border-size) solid var(--gld-border-color)}.table-column{flex:1 1 auto}.table-column--actions,.table-column--selects,.table-column--actions.table-column--selects{position:absolute;top:0;right:0}.table-column--actions.table-column--selects{width:var(--gld-column-actions-and-selects-width)}.table-column--actions,.table-column--selects{width:var(--gld-column-actions-or-selects-width)}.table-empty{width:100%;display:flex;color:var(--gld-color);padding:var(--gld-spacing--xs)}.table-empty p{font:400 var(--gld-font-size--normal)/var(--gld-line-height) var(--gld-font--poppins);text-transform:lowercase;margin:auto}.table-empty p:first-letter{text-transform:uppercase}\n"] }]
+        }], propDecorators: { tableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableColumns", required: true }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], tableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableHeight", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], selects: [{ type: i0.Input, args: [{ isSignal: true, alias: "selects", required: false }] }], selectsAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectsAll", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], tableColumnAction: [{ type: i0.Output, args: ["tableColumnAction"] }] } });
 
 // Angular Imports
 class TileComponent {
-    color = input(TileColor.default);
-    paddingSize = input(TilePaddingSize.zero);
-    background = input(false, { transform: booleanAttribute });
-    hover = input(false, { transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", type: TileComponent, isStandalone: true, selector: "gld-tile", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, paddingSize: { classPropertyName: "paddingSize", publicName: "paddingSize", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n  class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n  [class.tile--background]=\"background()\"\n  [class.tile--hover]=\"hover()\">\n  <section class=\"tile-content\">\n    <ng-content />\n  </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    color = input(TileColor$1.default, { ...(ngDevMode ? { debugName: "color" } : {}) });
+    paddingSize = input(TilePaddingSize$1.zero, { ...(ngDevMode ? { debugName: "paddingSize" } : {}) });
+    background = input(false, { ...(ngDevMode ? { debugName: "background" } : {}), transform: booleanAttribute });
+    hover = input(false, { ...(ngDevMode ? { debugName: "hover" } : {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: TileComponent, isStandalone: true, selector: "gld-tile", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, paddingSize: { classPropertyName: "paddingSize", publicName: "paddingSize", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\r\n  class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\r\n  [class.tile--background]=\"background()\"\r\n  [class.tile--hover]=\"hover()\">\r\n  <section class=\"tile-content\">\r\n    <ng-content />\r\n  </section>\r\n</article>\r\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n  class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\n  [class.tile--background]=\"background()\"\n  [class.tile--hover]=\"hover()\">\n  <section class=\"tile-content\">\n    <ng-content />\n  </section>\n</article>\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"] }]
-        }] });
-
-// Always first
-
-/*
- * Public API Surface of iamgld-ui
- */
+            args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\r\n  class=\"tile tile--{{ color() }} tile--padding-{{ paddingSize() }}\"\r\n  [class.tile--background]=\"background()\"\r\n  [class.tile--hover]=\"hover()\">\r\n  <section class=\"tile-content\">\r\n    <ng-content />\r\n  </section>\r\n</article>\r\n", styles: [":host{width:100%;height:auto;position:relative;z-index:1}.tile{--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: 0;--gld-radius: var(--gld-radius--xxs);width:inherit;height:inherit;position:relative;padding:var(--gld-padding-size);background:var(--gld-background);border:var(--gld-border-size) solid var(--gld-border-color);border-radius:var(--gld-radius);overflow:hidden;will-change:background;transition:background var(--gld-animation-time--150)}.tile--hover:hover,.tile--hover:focus{background:var(--gld-background--hover)}.tile.tile--hover{cursor:pointer}.tile--default{--gld-border-color: light-dark( var(--gld-gray-transparent--040), var(--gld-gray-transparent--020) )}.tile--default.tile--background{--gld-background: var(--gld-gray-transparent--010)}.tile--default.tile--hover{--gld-background--hover: var(--gld-gray-transparent--020)}.tile--blue{--gld-border-color: var(--gld-blue-transparent--020)}.tile--blue.tile--background{--gld-background: var(--gld-blue-transparent--005)}.tile--blue.tile--hover{--gld-background--hover: var(--gld-blue-transparent--010)}.tile--green{--gld-border-color: var(--gld-green-transparent--020)}.tile--green.tile--background{--gld-background: var(--gld-green-transparent--005)}.tile--green.tile--hover{--gld-background--hover: var(--gld-green-transparent--010)}.tile--purple{--gld-border-color: var(--gld-purple-transparent--020)}.tile--purple.tile--background{--gld-background: var(--gld-purple-transparent--005)}.tile--purple.tile--hover{--gld-background--hover: var(--gld-purple-transparent--010)}.tile--mustard{--gld-border-color: var(--gld-mustard-transparent--020)}.tile--mustard.tile--background{--gld-background: var(--gld-mustard-transparent--005)}.tile--mustard.tile--hover{--gld-background--hover: var(--gld-mustard-transparent--010)}.tile--orange{--gld-border-color: var(--gld-orange-transparent--020)}.tile--orange.tile--background{--gld-background: var(--gld-orange-transparent--005)}.tile--orange.tile--hover{--gld-background--hover: var(--gld-orange-transparent--010)}.tile--pink{--gld-border-color: var(--gld-pink-transparent--020)}.tile--pink.tile--background{--gld-background: var(--gld-pink-transparent--005)}.tile--pink.tile--hover{--gld-background--hover: var(--gld-pink-transparent--010)}.tile--red{--gld-border-color: var(--gld-red-transparent--020)}.tile--red.tile--background{--gld-background: var(--gld-red-transparent--005)}.tile--red.tile--hover{--gld-background--hover: var(--gld-red-transparent--010)}.tile--padding-tiny{--gld-padding-size: var(--gld-spacing--xxxs)}.tile--padding-small{--gld-padding-size: var(--gld-spacing--xs)}.tile--padding-normal{--gld-padding-size: var(--gld-spacing--s)}.tile--padding-medium{--gld-padding-size: var(--gld-spacing--l)}.tile--padding-large{--gld-padding-size: var(--gld-spacing--xl)}\n"] }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], paddingSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingSize", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonColor, ButtonComponent, ButtonSize, DropdownButtonComponent, DropdownDirection, DropdownMenuComponent, DropdownMenuTemplateDirective, DropdownType, IconButtonComponent, IconComponent, Icons, IconsSize, IconsSpace, ImageComponent, InputComponent, InputDateComponent, InputErrorComponent, InputErrorMessageDirective, InputHintComponent, LinkAlign, LinkComponent, LinkType, LoaderComponent, RadioButtonComponent, RadioDirection, RadioGroupComponent, SelectComponent, SelectOptionComponent, SelectType, TableColumnActionType, TableComponent, TablePaginationComponent, TableSearchAction, TableSearchComponent, TextareaComponent, TileColor, TileComponent, TilePaddingSize, ToggleButtonComponent, ToggleGroupComponent, capitalizeFirstLetter, formatDateFromISOToDDMMYYYY, formatDateFromISOToYYYYMMDD, formatDateToISO, getDateWithOffsetInYears, isDateValidator, isDocumentValidator, isEmailValidator, isFormSelectItemValidator, isLicensePlateValidator, isNaturalNumberValidator, minimumAgeValidator, mustMatchValidator, mustUnmatchValidator };
+export { AuthService, AuthStore, ButtonColor, ButtonComponent, ButtonSize, CircleLoaderComponent, CookiesKeys, CustomPreloadingStrategyService, DropdownButtonComponent, DropdownDirection, DropdownMenuComponent, DropdownMenuTemplateDirective, DropdownType, EnvironmentType, EnvironmentsService, IconButtonComponent, IconComponent, Icons, IconsSize, IconsSpace, ImageComponent, InputComponent, InputDateComponent, InputErrorComponent, InputErrorMessageDirective, InputHintComponent, LinkAlign, LinkComponent, LinkType, MAX_DAY, MAX_MONTH, MIN_DAY, MIN_MONTH, NATURAL_NUMBER_REGEX, NATURAL_NUMBER_REGEX_TO_CLEAN, RadioButtonComponent, RadioDirection, RadioGroupComponent, SERVICES_ENVIRONMENT, STORES_ENVIRONMENT, STRING_REGEX, STRING_REGEX_TO_CLEAN, SelectComponent, SelectOptionComponent, SelectType, TableColumnActionType, TableComponent, TablePaginationComponent, TableSearchAction, TableSearchComponent, TextareaComponent, TileColor, TileComponent, TilePaddingSize, ToggleButtonComponent, ToggleGroupComponent, TranslocoHttpLoader, TranslocoLanguageKey, TranslocoLanguageName, TranslocoService, UiService, UiStore, UiTheme, YEAR_LENGTH, addDaysToISODate, addTokenInterceptor, addYearsToISODate, capitalizeFirstLetter, changeLanguageInterceptor, formatDDMMYYYYToISODate, formatDateToISODate, formatISODateToDDMMYYYY, formatISODateToDate, initialAuthState, initialUiState, isDateValidator, isDocumentValidator, isEmailValidator, isFormSelectItemValidator, isLoggedGuard, isNaturalNumberValidator, isStringValidator, minimumAgeValidator, mustMatchValidator, mustUnmatchValidator, refreshTokenInterceptor, updateValueWithMask };
 //# sourceMappingURL=iamgld-ui.mjs.map