@iamgld/ui 1.1.3 → 1.4.3

package/fesm2022/iamgld-ui.mjs

@@ -1,68 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, Component, ChangeDetectionStrategy, Directive, contentChildren, signal, effect, inject, DestroyRef, ChangeDetectorRef, forwardRef, computed, numberAttribute, viewChild } from '@angular/core';
+import { Directive, input, numberAttribute, booleanAttribute, output, Component, ChangeDetectionStrategy, contentChildren, signal, effect, inject, DestroyRef, ChangeDetectorRef, forwardRef, computed, viewChild } from '@angular/core';
+import { NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
 import { debounceTime } from 'rxjs';
 
-// Angular Imports
-class ButtonComponent {
-    name = input.required();
-    disabled = input(false, { transform: booleanAttribute });
-    // hasIcon = input<boolean, string | boolean>(false, { transform: booleanAttribute })
-    // icon = input<Icons>(Icons.addLine)
-    // iconSize = input<keyof typeof IconsSize>(IconsSize.small)
-    // iconMoveTopToBottom = input<number, string | number>(0, { transform: numberAttribute })
-    // iconMoveLeftToRight = input<number, string | number>(0, { transform: numberAttribute })
-    color = input('pink');
-    size = input('normal');
-    clicked = output();
-    emitClick() {
-        if (!this.disabled())
-            this.clicked.emit();
-    }
-    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.1.0", version: "19.0.1", type: ButtonComponent, isStandalone: true, selector: "gld-button", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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  (click)=\"emitClick()\">\r\n  <span>\r\n    <ng-content />\r\n  </span>\r\n</button>\r\n", styles: [".Button{--gld-color: initial;--gld-border-color: initial;--gld-border: var(--gld-border-size) solid var(--gld-border-color);--gld-background: initial;--gld-background--hover: initial;--gld-box-shadow-size: 2px;--gld-box-shadow-size--hover: 0;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:var(--gld-border);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);box-shadow:0 var(--gld-box-shadow-size) 0 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,color;transition:background var(--gld-animation-time--150),box-shadow var(--gld-animation-time--150),color var(--gld-animation-time--150)}.Button:hover,.Button:focus{--gld-background: var(--gld-background--hover);--gld-box-shadow-size: var(--gld-box-shadow-size--hover)}.Button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.Button--pink{--gld-color: var(--gld-pink);--gld-border-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-border-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-border-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-border-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-border-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-border-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-border-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-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-background: var(--gld-gray-transparent--010);--gld-background--hover: var(--gld-gray-transparent--010);pointer-events:none;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gld-button', imports: [], 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  (click)=\"emitClick()\">\r\n  <span>\r\n    <ng-content />\r\n  </span>\r\n</button>\r\n", styles: [".Button{--gld-color: initial;--gld-border-color: initial;--gld-border: var(--gld-border-size) solid var(--gld-border-color);--gld-background: initial;--gld-background--hover: initial;--gld-box-shadow-size: 2px;--gld-box-shadow-size--hover: 0;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:var(--gld-border);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);box-shadow:0 var(--gld-box-shadow-size) 0 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,color;transition:background var(--gld-animation-time--150),box-shadow var(--gld-animation-time--150),color var(--gld-animation-time--150)}.Button:hover,.Button:focus{--gld-background: var(--gld-background--hover);--gld-box-shadow-size: var(--gld-box-shadow-size--hover)}.Button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.Button--pink{--gld-color: var(--gld-pink);--gld-border-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-border-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-border-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-border-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-border-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-border-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-border-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-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-background: var(--gld-gray-transparent--010);--gld-background--hover: var(--gld-gray-transparent--010);pointer-events:none;cursor:not-allowed}\n"] }]
-        }] });
-
-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: "[gldErrorMessage]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputErrorMessageDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[gldErrorMessage]',
-                }]
-        }] });
-
-// Angular Imports
-class InputErrorComponent {
-    Boolean = Boolean;
-    errors = input.required();
-    border = input(false, { transform: booleanAttribute });
-    content = contentChildren(InputErrorMessageDirective, {
-        descendants: true,
-    });
-    hasContent = signal(false);
-    constructor() {
-        effect(() => this.hasContent.set(this.content()?.length ? true : false), {
-            allowSignalWrites: true,
-        });
-    }
-    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--xxxs);--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: [{
-            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--xxxs);--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: () => [] });
-
 function formatDateToISO(outerDate) {
     const date = new Date(outerDate);
     if (!isNaN(date.getTime()))
@@ -96,6 +39,354 @@ function capitalizeFirstLetter(str) {
     return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 }
 
+var RadioDirection;
+(function (RadioDirection) {
+    RadioDirection["horizontal"] = "horizontal";
+    RadioDirection["vertical"] = "vertical";
+})(RadioDirection || (RadioDirection = {}));
+
+var SelectType;
+(function (SelectType) {
+    SelectType["default"] = "default";
+    SelectType["inline"] = "inline";
+})(SelectType || (SelectType = {}));
+
+var Icons;
+(function (Icons) {
+    Icons["arrowDownSLine"] = "arrow-down-s-line";
+    Icons["arrowUpSLine"] = "arrow-up-s-line";
+    Icons["checkboxCircleLine"] = "checkbox-circle-line";
+    Icons["checkboxBlankCircleLine"] = "checkbox-blank-circle-line";
+    Icons["loader4Fill"] = "loader-4-fill";
+    Icons["logoutCircleLine"] = " ri-logout-circle-line";
+    Icons["loginCircleLine"] = " ri-login-circle-line";
+    Icons["gitRepositoryLine"] = " ri-git-repository-line";
+    Icons["fileList3Line"] = " ri-file-list-3-line";
+    Icons["menuLine"] = " ri-menu-line";
+})(Icons || (Icons = {}));
+var IconsSize;
+(function (IconsSize) {
+    IconsSize["tiny"] = "tiny";
+    IconsSize["small"] = "small";
+    IconsSize["normal"] = "normal";
+    IconsSize["medium"] = "medium";
+    IconsSize["large"] = "large";
+})(IconsSize || (IconsSize = {}));
+var IconsSpace;
+(function (IconsSpace) {
+    IconsSpace["left"] = "left";
+    IconsSpace["right"] = "right";
+    IconsSpace["none"] = "none";
+})(IconsSpace || (IconsSpace = {}));
+
+// Shared Imports
+// 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);
+        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!' };
+        // Verify if the date is valid (additional logic)
+        const [year, month, day] = value.split('-').map(Number);
+        const date = new Date(year, month - 1, day);
+        // Verify if the date is logical and corresponds to the format
+        if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day)
+            return null;
+        return { isDate: 'This field must be a valid date!' };
+    };
+}
+
+function isDocumentValidator({ documentType }) {
+    return (control) => {
+        const value = control.value;
+        // Definir los patrones de acuerdo al tipo de vehículo
+        const patterns = {
+            DNI: [
+                {
+                    regex: /^\d+$/,
+                    message: 'Este campo debe contener solo números!',
+                },
+                {
+                    regex: /^.{7,8}$/,
+                    message: 'Este campo debe contener entre 7 y 8 dígitos!',
+                },
+            ],
+            CT: [
+                {
+                    regex: /^\d+$/,
+                    message: 'Este campo debe contener solo números!',
+                },
+                {
+                    regex: /^.{11}$/,
+                    message: 'Este campo debe contener 11 dígitos!',
+                },
+            ],
+            CL: [
+                {
+                    regex: /^\d+$/,
+                    message: 'Este campo debe contener solo números!',
+                },
+                {
+                    regex: /^.{11}$/,
+                    message: 'Este campo debe contener 11 dígitos!',
+                },
+            ],
+        };
+        const patternsToValid = patterns[documentType];
+        if (!value)
+            return null;
+        const pattern = patternsToValid.find((pattern) => !pattern.regex.test(value));
+        return pattern ? { isDocument: pattern.message } : null;
+    };
+}
+
+// Regex para validar emails
+const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+function isEmailValidator() {
+    return (control) => {
+        const value = control.value;
+        if (!value)
+            return null;
+        if (EMAIL_REGEX.test(value))
+            return null;
+        return { email: 'This field must be a valid email!' };
+    };
+}
+
+function isFormSelectItemValidator() {
+    return (control) => {
+        const value = control.value;
+        if (!value)
+            return null;
+        if (typeof value === 'string')
+            return { isFormSelectItem: 'Este campo debe ser una opción valida!' };
+        if (typeof value === 'object') {
+            if ('value' in value && 'label' in value)
+                return null;
+        }
+        return { isFormSelectItem: 'Este campo debe ser una opción valida!' };
+    };
+}
+
+function isLicensePlateValidator({ vehicleType, }) {
+    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];
+        if (!value)
+            return null;
+        const isValid = patternsToValid.some((pattern) => pattern.test(value));
+        return isValid ? null : { isLicensePlate: 'El campo debe ser una patente valida!' };
+    };
+}
+
+// Regex para validar números naturales (0, 1, 2, 3, ...)
+const NATURAL_NUMBER_REGEX = /^[0-9]+$/;
+function isNaturalNumberValidator() {
+    return (control) => {
+        const value = control.value;
+        if (!value)
+            return null;
+        if (NATURAL_NUMBER_REGEX.test(value))
+            return null;
+        return { naturalNumber: 'This field must contain only valid numbers!' };
+    };
+}
+
+// Shared Imports
+function minimumAgeValidator({ minAge }) {
+    return (control) => {
+        const value = formatDateFromISOToYYYYMMDD(control.value);
+        if (!value)
+            return null;
+        // Verify if the date is valid (additional logic)
+        const [year, month, day] = value.split('-').map(Number);
+        const birthDay = new Date(year, month - 1, day);
+        // Get the current date and calculate the difference in years
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const age = today.getFullYear() - birthDay.getFullYear();
+        const isMonthPast = today.getMonth() > birthDay.getMonth();
+        const isSameMonthDayPast = today.getMonth() === birthDay.getMonth() && today.getDate() >= birthDay.getDate();
+        const isValidAge = age > minAge || (age === minAge && (isMonthPast || isSameMonthDayPast));
+        // Retornar el error si la edad es menor al mínimo
+        return isValidAge ? null : { minimumAge: { requiredAge: minAge, actualAge: age } };
+    };
+}
+
+function mustMatchValidator({ controlName, mustMatchControlName, errorMessage, }) {
+    return (formGroup) => {
+        const firstControl = formGroup.get(controlName);
+        const mustMatchControl = formGroup.get(mustMatchControlName);
+        // Validar que ambos controles existan
+        if (!firstControl || !mustMatchControl)
+            return null;
+        // Verificar si los valores coinciden
+        if (firstControl.value && firstControl.value !== mustMatchControl.value) {
+            mustMatchControl.setErrors({ ...mustMatchControl.errors, mustMatch: errorMessage ?? true });
+            return { mustMatch: errorMessage ?? true };
+        }
+        return null; // Es válido si no hay errores
+    };
+}
+
+function mustUnmatchValidator({ controlName, mustUnmatchControlName, errorMessage, }) {
+    return (formGroup) => {
+        const firstControl = formGroup.get(controlName);
+        const mustUnmatchControl = formGroup.get(mustUnmatchControlName);
+        // Validar que ambos controles existan
+        if (!firstControl || !mustUnmatchControl)
+            return null;
+        // Verificar si los valores coinciden
+        if (firstControl.value && firstControl.value === mustUnmatchControl.value) {
+            mustUnmatchControl.setErrors({
+                ...mustUnmatchControl.errors,
+                mustUnmatch: errorMessage ?? true,
+            });
+            return { mustUnmatch: errorMessage ?? true };
+        }
+        return null; // Es válido si no hay errores
+    };
+}
+
+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: "[gldErrorMessage]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: InputErrorMessageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gldErrorMessage]',
+                }]
+        }] });
+
+// 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();
+    }
+    keyup() {
+        this.emitClick();
+    }
+    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  }\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: 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  }\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"] }]
+        }] });
+
+// Angular Imports
+class ImageComponent {
+    src = input.required();
+    alt = input.required();
+    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 (priority()) {\r\n\t<img priority=\"true\" [ngSrc]=\"src()\" [alt]=\"alt()\" [fill]=\"true\" />\r\n} @else {\r\n\t<img loading=\"lazy\" [ngSrc]=\"src()\" [alt]=\"alt()\" [fill]=\"true\" />\r\n}\r\n", styles: [":host{position:relative;aspect-ratio:1;overflow:hidden;display:inline-block;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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gld-image', standalone: true, imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (priority()) {\r\n\t<img priority=\"true\" [ngSrc]=\"src()\" [alt]=\"alt()\" [fill]=\"true\" />\r\n} @else {\r\n\t<img loading=\"lazy\" [ngSrc]=\"src()\" [alt]=\"alt()\" [fill]=\"true\" />\r\n}\r\n", styles: [":host{position:relative;aspect-ratio:1;overflow:hidden;display:inline-block;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"] }]
+        }] });
+
+// Angular Imports
+class ButtonComponent {
+    name = input.required();
+    color = input('pink');
+    size = input('normal');
+    disabled = input(false, { transform: booleanAttribute });
+    clicked = output();
+    emitClick() {
+        if (!this.disabled())
+            this.clicked.emit();
+    }
+    keyup() {
+        this.emitClick();
+    }
+    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.1.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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\">\r\n  <span>\r\n    <ng-content />\r\n  </span>\r\n</button>\r\n", styles: [".Button{--gld-color: inherit;--gld-border-color: inherit;--gld-border: var(--gld-border-size) solid var(--gld-border-color);--gld-background: transparent;--gld-background--hover: transparent;--gld-box-shadow-size: 2px;--gld-box-shadow-size--hover: 0;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:var(--gld-border);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);box-shadow:0 var(--gld-box-shadow-size) 0 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,color;transition:background var(--gld-animation-time--150),box-shadow var(--gld-animation-time--150),color var(--gld-animation-time--150)}.Button:hover,.Button:focus{--gld-background: var(--gld-background--hover);--gld-box-shadow-size: var(--gld-box-shadow-size--hover)}.Button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.Button--pink{--gld-color: var(--gld-pink);--gld-border-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-border-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-border-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-border-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-border-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-border-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-border-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-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-background: var(--gld-gray-transparent--010);--gld-background--hover: var(--gld-gray-transparent--010);pointer-events:none;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gld-button', imports: [], 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  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\">\r\n  <span>\r\n    <ng-content />\r\n  </span>\r\n</button>\r\n", styles: [".Button{--gld-color: inherit;--gld-border-color: inherit;--gld-border: var(--gld-border-size) solid var(--gld-border-color);--gld-background: transparent;--gld-background--hover: transparent;--gld-box-shadow-size: 2px;--gld-box-shadow-size--hover: 0;--gld-padding: var(--gld-spacing--xxs) var(--gld-spacing--xs);--gld-radius: var(--gld-radius--xxxs);--gld-font-size: var(--gld-font-size--normal);outline:none;border:var(--gld-border);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);box-shadow:0 var(--gld-box-shadow-size) 0 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--gld-spacing--xxxs);will-change:background,color;transition:background var(--gld-animation-time--150),box-shadow var(--gld-animation-time--150),color var(--gld-animation-time--150)}.Button:hover,.Button:focus{--gld-background: var(--gld-background--hover);--gld-box-shadow-size: var(--gld-box-shadow-size--hover)}.Button span{text-transform:capitalize;-webkit-user-select:none;user-select:none}.Button--pink{--gld-color: var(--gld-pink);--gld-border-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-border-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-border-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-border-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-border-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-border-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-border-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-transparent--060);--gld-border-color: var(--gld-gray-transparent--060);--gld-background: var(--gld-gray-transparent--010);--gld-background--hover: var(--gld-gray-transparent--010);pointer-events:none;cursor:not-allowed}\n"] }]
+        }] });
+
+// Angular Imports
+class IconButtonComponent {
+    icon = input.required();
+    name = input.required();
+    size = 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('pink');
+    clicked = output();
+    emitClick() {
+        if (!this.disabled())
+            this.clicked.emit();
+    }
+    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 }, 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 }, 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\r\n  id=\"{{ name() }}\"\r\n  attr.aria-label=\"{{ name() }}\"\r\n  class=\"Button Button--{{ color() }}\"\r\n  [class.Button--disabled]=\"disabled()\"\r\n  [class.Button--background]=\"background()\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\">\r\n  <gld-icon\r\n    [icon]=\"icon()\"\r\n    [size]=\"size()\"\r\n    [space]=\"space()\"\r\n    [moveTopToBottom]=\"moveTopToBottom()\"\r\n    [moveLeftToRight]=\"moveLeftToRight()\"\r\n    [disabled]=\"disabled()\" />\r\n</button>\r\n", styles: [".Button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxxs);--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),color var(--gld-animation-time--150)}.Button:hover,.Button:focus{background:var(--gld-background--hover)}.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--010);--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: "19.0.1", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gld-icon-button', imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  id=\"{{ name() }}\"\r\n  attr.aria-label=\"{{ name() }}\"\r\n  class=\"Button Button--{{ color() }}\"\r\n  [class.Button--disabled]=\"disabled()\"\r\n  [class.Button--background]=\"background()\"\r\n  (click)=\"emitClick()\"\r\n  (keyup.enter)=\"keyup()\">\r\n  <gld-icon\r\n    [icon]=\"icon()\"\r\n    [size]=\"size()\"\r\n    [space]=\"space()\"\r\n    [moveTopToBottom]=\"moveTopToBottom()\"\r\n    [moveLeftToRight]=\"moveLeftToRight()\"\r\n    [disabled]=\"disabled()\" />\r\n</button>\r\n", styles: [".Button{--gld-color: inherit;--gld-background: transparent;--gld-background--hover: transparent;--gld-radius: var(--gld-radius--xxxs);--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),color var(--gld-animation-time--150)}.Button:hover,.Button:focus{background:var(--gld-background--hover)}.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--010);--gld-background--hover: var(--gld-gray-transparent--020)}\n"] }]
+        }] });
+
+// Angular Imports
+class InputErrorComponent {
+    Boolean = Boolean;
+    errors = input.required();
+    border = input(false, { transform: booleanAttribute });
+    content = contentChildren(InputErrorMessageDirective, {
+        descendants: true,
+    });
+    hasContent = signal(false);
+    constructor() {
+        effect(() => this.hasContent.set(this.content()?.length ? true : false));
+    }
+    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--xxxs);--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: [{
+            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--xxxs);--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: () => [] });
+
 // Angular Imports
 const components$4 = [InputErrorComponent];
 class InputDateComponent {
@@ -273,35 +564,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             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-darkblue);--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"] }]
         }] });
 
-var Icons;
-(function (Icons) {
-    Icons["arrowDownSLine"] = "arrow-down-s-line";
-    Icons["arrowUpSLine"] = "arrow-up-s-line";
-    Icons["checkboxCircleLine"] = "checkbox-circle-line";
-    Icons["checkboxBlankCircleLine"] = "checkbox-blank-circle-line";
-    Icons["loader4Fill"] = "loader-4-fill";
-})(Icons || (Icons = {}));
-var IconsSize;
-(function (IconsSize) {
-    IconsSize["tiny"] = "tiny";
-    IconsSize["small"] = "small";
-    IconsSize["normal"] = "normal";
-    IconsSize["medium"] = "medium";
-    IconsSize["large"] = "large";
-})(IconsSize || (IconsSize = {}));
-
-var SelectType;
-(function (SelectType) {
-    SelectType["default"] = "default";
-    SelectType["inline"] = "inline";
-})(SelectType || (SelectType = {}));
-
-var RadioDirection;
-(function (RadioDirection) {
-    RadioDirection["horizontal"] = "horizontal";
-    RadioDirection["vertical"] = "vertical";
-})(RadioDirection || (RadioDirection = {}));
-
 // Angular Imports
 const components$2 = [InputErrorComponent];
 class RadioGroupComponent {
@@ -422,38 +684,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             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-blue-transparent--010);--gld-color: var(--gld-darkblue);--gld-color--hover: var(--gld-blue);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;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"] }]
         }] });
 
-// Angular Imports
-class IconComponent {
-    IconsSpace = IconsSpace;
-    Icons = Icons;
-    icon = input(Icons.arrowDownSLine);
-    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();
-    }
-    keyup() {
-        this.emitClick();
-    }
-    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: false, 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  }\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: 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  }\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"] }]
-        }] });
-var IconsSpace;
-(function (IconsSpace) {
-    IconsSpace["left"] = "left";
-    IconsSpace["right"] = "right";
-    IconsSpace["none"] = "none";
-})(IconsSpace || (IconsSpace = {}));
-
 // Angular Imports
 const components$1 = [IconComponent, InputErrorComponent];
 class SelectComponent {
@@ -650,194 +880,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                     ], 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-darkblue);--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-darkblue);--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: () => [] });
 
-// Shared Imports
-// 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);
-        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!' };
-        // Verify if the date is valid (additional logic)
-        const [year, month, day] = value.split('-').map(Number);
-        const date = new Date(year, month - 1, day);
-        // Verify if the date is logical and corresponds to the format
-        if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day)
-            return null;
-        return { isDate: 'This field must be a valid date!' };
-    };
-}
-
-function isDocumentValidator({ documentType }) {
-    return (control) => {
-        const value = control.value;
-        // Definir los patrones de acuerdo al tipo de vehículo
-        const patterns = {
-            DNI: [
-                {
-                    regex: /^\d+$/,
-                    message: 'Este campo debe contener solo números!',
-                },
-                {
-                    regex: /^.{7,8}$/,
-                    message: 'Este campo debe contener entre 7 y 8 dígitos!',
-                },
-            ],
-            CT: [
-                {
-                    regex: /^\d+$/,
-                    message: 'Este campo debe contener solo números!',
-                },
-                {
-                    regex: /^.{11}$/,
-                    message: 'Este campo debe contener 11 dígitos!',
-                },
-            ],
-            CL: [
-                {
-                    regex: /^\d+$/,
-                    message: 'Este campo debe contener solo números!',
-                },
-                {
-                    regex: /^.{11}$/,
-                    message: 'Este campo debe contener 11 dígitos!',
-                },
-            ],
-        };
-        const patternsToValid = patterns[documentType];
-        if (!value)
-            return null;
-        const pattern = patternsToValid.find((pattern) => !pattern.regex.test(value));
-        return pattern ? { isDocument: pattern.message } : null;
-    };
-}
-
-// Regex para validar emails
-const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
-function isEmailValidator() {
-    return (control) => {
-        const value = control.value;
-        if (!value)
-            return null;
-        if (EMAIL_REGEX.test(value))
-            return null;
-        return { email: 'This field must be a valid email!' };
-    };
-}
-
-function isFormSelectItemValidator() {
-    return (control) => {
-        const value = control.value;
-        if (!value)
-            return null;
-        if (typeof value === 'string')
-            return { isFormSelectItem: 'Este campo debe ser una opción valida!' };
-        if (typeof value === 'object') {
-            if ('value' in value && 'label' in value)
-                return null;
-        }
-        return { isFormSelectItem: 'Este campo debe ser una opción valida!' };
-    };
-}
-
-function isLicensePlateValidator({ vehicleType, }) {
-    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];
-        if (!value)
-            return null;
-        const isValid = patternsToValid.some((pattern) => pattern.test(value));
-        return isValid ? null : { isLicensePlate: 'El campo debe ser una patente valida!' };
-    };
-}
-
-// Regex para validar números naturales (0, 1, 2, 3, ...)
-const NATURAL_NUMBER_REGEX = /^[0-9]+$/;
-function isNaturalNumberValidator() {
-    return (control) => {
-        const value = control.value;
-        if (!value)
-            return null;
-        if (NATURAL_NUMBER_REGEX.test(value))
-            return null;
-        return { naturalNumber: 'This field must contain only valid numbers!' };
-    };
-}
-
-// Shared Imports
-function minimumAgeValidator({ minAge }) {
-    return (control) => {
-        const value = formatDateFromISOToYYYYMMDD(control.value);
-        if (!value)
-            return null;
-        // Verify if the date is valid (additional logic)
-        const [year, month, day] = value.split('-').map(Number);
-        const birthDay = new Date(year, month - 1, day);
-        // Get the current date and calculate the difference in years
-        const today = new Date();
-        today.setHours(0, 0, 0, 0);
-        const age = today.getFullYear() - birthDay.getFullYear();
-        const isMonthPast = today.getMonth() > birthDay.getMonth();
-        const isSameMonthDayPast = today.getMonth() === birthDay.getMonth() && today.getDate() >= birthDay.getDate();
-        const isValidAge = age > minAge || (age === minAge && (isMonthPast || isSameMonthDayPast));
-        // Retornar el error si la edad es menor al mínimo
-        return isValidAge ? null : { minimumAge: { requiredAge: minAge, actualAge: age } };
-    };
-}
-
-function mustMatchValidator({ controlName, mustMatchControlName, errorMessage, }) {
-    return (formGroup) => {
-        const firstControl = formGroup.get(controlName);
-        const mustMatchControl = formGroup.get(mustMatchControlName);
-        // Validar que ambos controles existan
-        if (!firstControl || !mustMatchControl)
-            return null;
-        // Verificar si los valores coinciden
-        if (firstControl.value && firstControl.value !== mustMatchControl.value) {
-            mustMatchControl.setErrors({ ...mustMatchControl.errors, mustMatch: errorMessage ?? true });
-            return { mustMatch: errorMessage ?? true };
-        }
-        return null; // Es válido si no hay errores
-    };
-}
-
-function mustUnmatchValidator({ controlName, mustUnmatchControlName, errorMessage, }) {
-    return (formGroup) => {
-        const firstControl = formGroup.get(controlName);
-        const mustUnmatchControl = formGroup.get(mustUnmatchControlName);
-        // Validar que ambos controles existan
-        if (!firstControl || !mustUnmatchControl)
-            return null;
-        // Verificar si los valores coinciden
-        if (firstControl.value && firstControl.value === mustUnmatchControl.value) {
-            mustUnmatchControl.setErrors({
-                ...mustUnmatchControl.errors,
-                mustUnmatch: errorMessage ?? true,
-            });
-            return { mustUnmatch: errorMessage ?? true };
-        }
-        return null; // Es válido si no hay errores
-    };
+// Angular Imports
+class TileComponent {
+    color = input('blue');
+    background = 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 }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"Tile Tile--{{ color() }} \" [class.Tile--background]=\"background()\">\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-border-radius-inner: var(--gld-radius--xxs);--gld-border-radius-outer: calc(var(--gld-radius--xxs) + var(--gld-border-size));--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: var(--gld-spacing--s);--gld-radius: var(--gld-radius--xxxs);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);will-change:background;transition:background var(--gld-animation-time--150)}.Tile:hover,.Tile:focus{background:var(--gld-background--hover)}.Tile--blue{--gld-border-color: var(--gld-blue)}.Tile--blue.Tile--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.Tile--green{--gld-border-color: var(--gld-green)}.Tile--green.Tile--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.Tile--purple{--gld-border-color: var(--gld-purple)}.Tile--purple.Tile--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.Tile--mustard{--gld-border-color: var(--gld-mustard)}.Tile--mustard.Tile--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.Tile--orange{--gld-border-color: var(--gld-orange)}.Tile--orange.Tile--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.Tile--pink{--gld-border-color: var(--gld-pink)}.Tile--pink.Tile--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: TileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gld-tile', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"Tile Tile--{{ color() }} \" [class.Tile--background]=\"background()\">\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-border-radius-inner: var(--gld-radius--xxs);--gld-border-radius-outer: calc(var(--gld-radius--xxs) + var(--gld-border-size));--gld-background: initial;--gld-background--hover: initial;--gld-border-color: transparent;--gld-padding-size: var(--gld-spacing--s);--gld-radius: var(--gld-radius--xxxs);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);will-change:background;transition:background var(--gld-animation-time--150)}.Tile:hover,.Tile:focus{background:var(--gld-background--hover)}.Tile--blue{--gld-border-color: var(--gld-blue)}.Tile--blue.Tile--background{--gld-background: var(--gld-blue-transparent--010);--gld-background--hover: var(--gld-blue-transparent--020)}.Tile--green{--gld-border-color: var(--gld-green)}.Tile--green.Tile--background{--gld-background: var(--gld-green-transparent--010);--gld-background--hover: var(--gld-green-transparent--020)}.Tile--purple{--gld-border-color: var(--gld-purple)}.Tile--purple.Tile--background{--gld-background: var(--gld-purple-transparent--010);--gld-background--hover: var(--gld-purple-transparent--020)}.Tile--mustard{--gld-border-color: var(--gld-mustard)}.Tile--mustard.Tile--background{--gld-background: var(--gld-mustard-transparent--010);--gld-background--hover: var(--gld-mustard-transparent--020)}.Tile--orange{--gld-border-color: var(--gld-orange)}.Tile--orange.Tile--background{--gld-background: var(--gld-orange-transparent--010);--gld-background--hover: var(--gld-orange-transparent--020)}.Tile--pink{--gld-border-color: var(--gld-pink)}.Tile--pink.Tile--background{--gld-background: var(--gld-pink-transparent--010);--gld-background--hover: var(--gld-pink-transparent--020)}\n"] }]
+        }] });
 
 /*
  * Public API Surface of iamgld-ui
@@ -847,5 +900,5 @@ function mustUnmatchValidator({ controlName, mustUnmatchControlName, errorMessag
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, InputComponent, InputDateComponent, InputErrorComponent, InputErrorMessageDirective, InputHintComponent, RadioButtonComponent, RadioGroupComponent, SelectComponent, SelectOptionComponent, TextareaComponent, capitalizeFirstLetter, formatDateFromISOToYYYYMMDD, formatDateToISO, getDateWithOffsetInYears, isDateValidator, isDocumentValidator, isEmailValidator, isFormSelectItemValidator, isLicensePlateValidator, isNaturalNumberValidator, minimumAgeValidator, mustMatchValidator, mustUnmatchValidator };
+export { ButtonComponent, IconButtonComponent, IconComponent, Icons, IconsSize, IconsSpace, ImageComponent, InputComponent, InputDateComponent, InputErrorComponent, InputErrorMessageDirective, InputHintComponent, RadioButtonComponent, RadioDirection, RadioGroupComponent, SelectComponent, SelectOptionComponent, SelectType, TextareaComponent, TileComponent, capitalizeFirstLetter, formatDateFromISOToYYYYMMDD, formatDateToISO, getDateWithOffsetInYears, isDateValidator, isDocumentValidator, isEmailValidator, isFormSelectItemValidator, isLicensePlateValidator, isNaturalNumberValidator, minimumAgeValidator, mustMatchValidator, mustUnmatchValidator };
 //# sourceMappingURL=iamgld-ui.mjs.map