@vsn-ux/ngx-gaia 0.9.1 → 0.9.3

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -1,23 +1,23 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, Directive, linkedSignal, signal, Injector, DestroyRef, effect, isSignal, forwardRef, model, HostListener, viewChild, TemplateRef, contentChildren, NgZone, HostBinding, Input, DOCUMENT, afterNextRender, Renderer2, afterEveryRender } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, ElementRef, HostAttributeToken, input, numberAttribute, computed, ViewEncapsulation, Component, NgModule, Injectable, booleanAttribute, ChangeDetectionStrategy, output, contentChild, Directive, linkedSignal, signal, Injector, DestroyRef, effect, isSignal, forwardRef, LOCALE_ID, model, Renderer2, Attribute, untracked, HostListener, viewChild, TemplateRef, contentChildren, NgZone, HostBinding, Input, DOCUMENT, afterNextRender, afterEveryRender } from '@angular/core';
 import * as i1 from 'lucide-angular';
-import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronUp, ChevronDown, CircleX } from 'lucide-angular';
+import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info, Check, Minus, ChevronDown, ChevronUp, ChevronRight, ChevronLeft, CalendarDays, CircleX } from 'lucide-angular';
 import { NgForm, ControlContainer, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, createRepositionScrollStrategy, OverlayModule, Overlay, OverlayRef, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
-import * as i1$5 from '@angular/cdk/overlay';
-import { Overlay, createRepositionScrollStrategy, OverlayRef, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject, takeUntil, map, merge, filter, Observable, isObservable } from 'rxjs';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import * as i1$1 from '@angular/cdk/menu';
+import * as i1$2 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger, MENU_SCROLL_STRATEGY } from '@angular/cdk/menu';
 import { Router, ResolveStart } from '@angular/router';
-import * as i1$2 from '@angular/cdk/a11y';
+import * as i1$3 from '@angular/cdk/a11y';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
-import * as i1$3 from '@angular/cdk/scrolling';
+import * as i1$4 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import * as i1$4 from '@angular/cdk/listbox';
+import * as i1$5 from '@angular/cdk/listbox';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
 
 /**
@@ -802,6 +802,1095 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
+function isClass(value) {
+    return (typeof value === 'function' &&
+        value.prototype &&
+        value.prototype.constructor === value);
+}
+
+function GA_DATEPICKER_I18N_FACTORY() {
+    return new GaDatepickerI18nDefault();
+}
+class GaDatepickerI18n {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerI18n, providedIn: 'root', useFactory: GA_DATEPICKER_I18N_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerI18n, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_DATEPICKER_I18N_FACTORY,
+                }]
+        }] });
+class GaDatepickerI18nDefault extends GaDatepickerI18n {
+    localeId = inject(LOCALE_ID);
+    selectMonthLabel = 'Select month';
+    selectYearLabel = 'Select year';
+    previousLabel = 'Previous';
+    nextLabel = 'Next';
+    openCalendarLabel = 'Open calendar';
+    todayButtonLabel = 'Today';
+    monthNames;
+    monthNamesShort;
+    weekDays;
+    constructor() {
+        super();
+        // Generate month names using Intl API
+        const monthFormatter = new Intl.DateTimeFormat(this.localeId, {
+            month: 'long',
+        });
+        const monthShortFormatter = new Intl.DateTimeFormat(this.localeId, {
+            month: 'short',
+        });
+        this.monthNames = Array.from({ length: 12 }, (_, i) => {
+            const date = new Date(2024, i, 1);
+            return monthFormatter.format(date);
+        });
+        this.monthNamesShort = Array.from({ length: 12 }, (_, i) => {
+            const date = new Date(2024, i, 1);
+            return monthShortFormatter.format(date);
+        });
+        // Generate weekday names using Intl API (starting from Monday)
+        const weekdayFormatter = new Intl.DateTimeFormat(this.localeId, {
+            weekday: 'short',
+        });
+        const weekDayDates = Array.from({ length: 7 }, (_, i) => {
+            // January 2024 starts on Monday, so we can use dates 1-7
+            return new Date(2024, 0, i + 1);
+        });
+        this.weekDays = weekDayDates.map((date) => {
+            return weekdayFormatter.format(date);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerI18nDefault, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerI18nDefault, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerI18nDefault, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+function provideGaDatepickerI18n(value) {
+    if (isClass(value)) {
+        return makeEnvironmentProviders([
+            { provide: GaDatepickerI18n, useClass: value },
+        ]);
+    }
+    return makeEnvironmentProviders([
+        {
+            provide: GaDatepickerI18n,
+            useFactory: () => {
+                const defaultI18n = inject(GaDatepickerI18nDefault);
+                const i18n = {
+                    monthNames: defaultI18n.monthNames,
+                    monthNamesShort: defaultI18n.monthNamesShort,
+                    weekDays: defaultI18n.weekDays,
+                    ...(typeof value === 'function' ? value() : value),
+                };
+                return i18n;
+            },
+        },
+    ]);
+}
+
+function GA_DATEPICKER_VALUE_ADAPTER_FACTORY() {
+    return new GaDatepickerStructValueAdapter();
+}
+class GaDatepickerValueAdapter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerValueAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerValueAdapter, providedIn: 'root', useFactory: GA_DATEPICKER_VALUE_ADAPTER_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerValueAdapter, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_DATEPICKER_VALUE_ADAPTER_FACTORY,
+                }]
+        }] });
+class GaDatepickerStructValueAdapter extends GaDatepickerValueAdapter {
+    /**
+     * Checks if a value is a valid GaDatepickerStruct
+     */
+    isStruct(value) {
+        return (value &&
+            typeof value === 'object' &&
+            typeof value.year === 'number' &&
+            typeof value.month === 'number' &&
+            typeof value.day === 'number');
+    }
+    /**
+     * Handles GaDatepickerStruct natively - pass through as-is
+     */
+    toStruct(value) {
+        if (!value)
+            return null;
+        if (this.isStruct(value))
+            return value;
+        return null; // Invalid input
+    }
+    /**
+     * Returns struct as-is (no conversion needed)
+     */
+    fromStruct(struct) {
+        return struct;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerStructValueAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerStructValueAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerStructValueAdapter, decorators: [{
+            type: Injectable
+        }] });
+function provideGaDatepickerValueAdapter(value) {
+    return { provide: GaDatepickerValueAdapter, useClass: value };
+}
+/**
+ * Compares two structs for equality
+ */
+function compareStructs(structA, structB) {
+    if (!structA && !structB)
+        return 0;
+    if (!structA)
+        return -1;
+    if (!structB)
+        return 1;
+    const dateA = new Date(Date.UTC(structA.year, structA.month - 1, structA.day));
+    const dateB = new Date(Date.UTC(structB.year, structB.month - 1, structB.day));
+    return dateA.getTime() - dateB.getTime() < 0
+        ? -1
+        : dateA.getTime() - dateB.getTime() > 0
+            ? 1
+            : 0;
+}
+
+class GaDatepickerComponent {
+    i18n = inject(GaDatepickerI18n);
+    valueAdapter = inject(GaDatepickerValueAdapter);
+    icons = {
+        ChevronLeft,
+        ChevronRight,
+        ChevronUp,
+        ChevronDown,
+    };
+    value = model(null);
+    min = input(null);
+    max = input(null);
+    // Internal struct representation
+    internalValue = computed(() => {
+        return this.valueAdapter.toStruct(this.value());
+    });
+    internalMinDate = computed(() => {
+        return this.valueAdapter.toStruct(this.min());
+    });
+    internalMaxDate = computed(() => {
+        return this.valueAdapter.toStruct(this.max());
+    });
+    viewMode = signal('day');
+    viewDate = signal(this.getInitialViewDate());
+    ngOnInit() {
+        // Initialize view date based on the initial value or today's date
+        this.viewDate.set(this.getInitialViewDate());
+    }
+    getInitialViewDate() {
+        // Try to use the initial value if available
+        const initialValue = this.valueAdapter.toStruct(this.value());
+        if (initialValue) {
+            return {
+                year: initialValue.year,
+                month: initialValue.month,
+            };
+        }
+        // Fallback to today's date, but respect min/max constraints
+        const today = new Date();
+        const todayStruct = {
+            year: today.getFullYear(),
+            month: today.getMonth() + 1, // Convert from 0-11 to 1-12
+            day: today.getDate(),
+        };
+        const minStruct = this.valueAdapter.toStruct(this.min());
+        const maxStruct = this.valueAdapter.toStruct(this.max());
+        let targetDate = todayStruct;
+        // If today is before min date, use min date
+        if (minStruct) {
+            const todayValue = todayStruct.year * 10000 + todayStruct.month * 100 + todayStruct.day;
+            const minValue = minStruct.year * 10000 + minStruct.month * 100 + minStruct.day;
+            if (todayValue < minValue) {
+                targetDate = minStruct;
+            }
+        }
+        // If today is after max date, use max date
+        if (maxStruct) {
+            const todayValue = todayStruct.year * 10000 + todayStruct.month * 100 + todayStruct.day;
+            const maxValue = maxStruct.year * 10000 + maxStruct.month * 100 + maxStruct.day;
+            if (todayValue > maxValue) {
+                targetDate = maxStruct;
+            }
+        }
+        return {
+            year: targetDate.year,
+            month: targetDate.month,
+        };
+    }
+    weekDays = computed(() => this.i18n.weekDays);
+    calendarDays = computed(() => {
+        const viewStruct = this.viewDate();
+        const year = viewStruct.year;
+        const month = viewStruct.month;
+        const firstDay = new Date(year, month - 1, 1); // Convert from 1-12 to 0-11
+        const lastDay = new Date(year, month, 0); // month is already 1-12, so this gives us last day of month-1
+        const startDate = new Date(firstDay);
+        const startDayOfWeek = (firstDay.getDay() + 6) % 7;
+        startDate.setDate(startDate.getDate() - startDayOfWeek);
+        const days = [];
+        const current = new Date(startDate);
+        while (current <= lastDay || days.length % 7 !== 0) {
+            days.push({
+                year: current.getFullYear(),
+                month: current.getMonth() + 1, // Convert from 0-11 to 1-12
+                day: current.getDate(),
+            });
+            current.setDate(current.getDate() + 1);
+        }
+        return days;
+    });
+    months = computed(() => {
+        return Array.from({ length: 12 }, (_, i) => ({
+            index: i + 1, // Use 1-12 indexing
+            name: this.i18n.monthNames[i],
+            shortName: this.i18n.monthNamesShort[i],
+        }));
+    });
+    years = computed(() => {
+        const currentYear = this.viewDate().year;
+        const startYear = Math.floor(currentYear / 10) * 10;
+        return Array.from({ length: 25 }, (_, i) => startYear + i - 1);
+    });
+    selectDate(dateStruct) {
+        if (this.isDateDisabled(dateStruct)) {
+            return;
+        }
+        const externalValue = this.valueAdapter.fromStruct(dateStruct);
+        this.value.set(externalValue);
+    }
+    selectMonth(monthIndex) {
+        const currentView = this.viewDate();
+        const newView = {
+            year: currentView.year,
+            month: monthIndex, // monthIndex is already 1-12 from months array
+        };
+        this.viewDate.set(newView);
+        this.viewMode.set('day');
+    }
+    selectYear(year) {
+        const currentView = this.viewDate();
+        const newView = {
+            year,
+            month: currentView.month,
+        };
+        this.viewDate.set(newView);
+        this.viewMode.set('month');
+    }
+    navigatePrevious() {
+        const currentView = this.viewDate();
+        let newView;
+        switch (this.viewMode()) {
+            case 'day': {
+                const prevMonth = currentView.month === 1 ? 12 : currentView.month - 1; // Handle 1-12 indexing
+                const prevYear = currentView.month === 1 ? currentView.year - 1 : currentView.year;
+                newView = {
+                    year: prevYear,
+                    month: prevMonth,
+                };
+                break;
+            }
+            case 'month':
+                newView = {
+                    year: currentView.year - 1,
+                    month: currentView.month,
+                };
+                break;
+            case 'year':
+                newView = {
+                    year: currentView.year - 10,
+                    month: currentView.month,
+                };
+                break;
+        }
+        this.viewDate.set(newView);
+    }
+    navigateNext() {
+        const currentView = this.viewDate();
+        let newView;
+        switch (this.viewMode()) {
+            case 'day': {
+                const nextMonth = currentView.month === 12 ? 1 : currentView.month + 1; // Handle 1-12 indexing
+                const nextYear = currentView.month === 12 ? currentView.year + 1 : currentView.year;
+                newView = {
+                    year: nextYear,
+                    month: nextMonth,
+                };
+                break;
+            }
+            case 'month':
+                newView = {
+                    year: currentView.year + 1,
+                    month: currentView.month,
+                };
+                break;
+            case 'year':
+                newView = {
+                    year: currentView.year + 10,
+                    month: currentView.month,
+                };
+                break;
+        }
+        this.viewDate.set(newView);
+    }
+    toggleMonthView() {
+        this.viewMode.set(this.viewMode() === 'month' ? 'day' : 'month');
+    }
+    toggleYearView() {
+        this.viewMode.set(this.viewMode() === 'year' ? 'day' : 'year');
+    }
+    isToday(dateStruct) {
+        const today = new Date();
+        const todayStruct = {
+            year: today.getFullYear(),
+            month: today.getMonth() + 1, // Convert from 0-11 to 1-12
+            day: today.getDate(),
+        };
+        return compareStructs(dateStruct, todayStruct) === 0;
+    }
+    isSelected(dateStruct) {
+        const selectedStruct = this.internalValue();
+        return compareStructs(dateStruct, selectedStruct) === 0;
+    }
+    isCurrentMonth(dateStruct) {
+        return dateStruct.month === this.viewDate().month;
+    }
+    isWeekend(dateStruct) {
+        // Convert struct to Date to get day of week (convert month from 1-12 to 0-11)
+        const date = new Date(dateStruct.year, dateStruct.month - 1, dateStruct.day);
+        const day = date.getDay();
+        return day === 0 || day === 6;
+    }
+    isDateDisabled(dateStruct) {
+        const minStruct = this.internalMinDate();
+        const maxStruct = this.internalMaxDate();
+        if (minStruct) {
+            const dateValue = dateStruct.year * 10000 + dateStruct.month * 100 + dateStruct.day;
+            const minValue = minStruct.year * 10000 + minStruct.month * 100 + minStruct.day;
+            if (dateValue < minValue) {
+                return true;
+            }
+        }
+        if (maxStruct) {
+            const dateValue = dateStruct.year * 10000 + dateStruct.month * 100 + dateStruct.day;
+            const maxValue = maxStruct.year * 10000 + maxStruct.month * 100 + maxStruct.day;
+            if (dateValue > maxValue) {
+                return true;
+            }
+        }
+        return false;
+    }
+    isMonthDisabled(monthIndex) {
+        const minStruct = this.internalMinDate();
+        const maxStruct = this.internalMaxDate();
+        const year = this.viewDate().year;
+        if (minStruct) {
+            if (year < minStruct.year ||
+                (year === minStruct.year && monthIndex < minStruct.month)) {
+                return true;
+            }
+        }
+        if (maxStruct) {
+            if (year > maxStruct.year ||
+                (year === maxStruct.year && monthIndex > maxStruct.month)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    isYearDisabled(year) {
+        const minStruct = this.internalMinDate();
+        const maxStruct = this.internalMaxDate();
+        if (minStruct && year < minStruct.year) {
+            return true;
+        }
+        if (maxStruct && year > maxStruct.year) {
+            return true;
+        }
+        return false;
+    }
+    isSelectedMonth(monthIndex) {
+        const selectedStruct = this.internalValue();
+        if (!selectedStruct)
+            return false;
+        return (selectedStruct.month === monthIndex &&
+            selectedStruct.year === this.viewDate().year);
+    }
+    isSelectedYear(year) {
+        const selectedStruct = this.internalValue();
+        return selectedStruct ? selectedStruct.year === year : false;
+    }
+    getMonthName(monthIndex) {
+        return this.i18n.monthNames[monthIndex - 1]; // Convert from 1-12 to 0-11 for array access
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaDatepickerComponent, isStandalone: true, selector: "ga-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "ga-calendar" }, ngImport: i0, template: "<div class=\"ga-calendar__header\">\n  <div class=\"ga-calendar__month-year\">\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleMonthView()\"\n      [attr.aria-label]=\"i18n.selectMonthLabel\"\n    >\n      {{ getMonthName(viewDate().month) }}\n      <ga-icon\n        [icon]=\"viewMode() === 'month' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleYearView()\"\n      [attr.aria-label]=\"i18n.selectYearLabel\"\n    >\n      {{ viewDate().year }}\n      <ga-icon\n        [icon]=\"viewMode() === 'year' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n  </div>\n  @if (viewMode() !== 'month') {\n    <div class=\"ga-calendar__navigation\">\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigatePrevious()\"\n        [attr.aria-label]=\"i18n.previousLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronLeft\" size=\"24\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigateNext()\"\n        [attr.aria-label]=\"i18n.nextLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronRight\" size=\"24\" />\n      </button>\n    </div>\n  }\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\n    <div class=\"ga-calendar__weekdays\">\n      @for (day of weekDays(); track day) {\n        <div class=\"ga-calendar__weekday\">{{ day }}</div>\n      }\n    </div>\n    <div class=\"ga-calendar__selection ga-calendar__selection--day\">\n      @for (\n        dateStruct of calendarDays();\n        track dateStruct.year + '-' + dateStruct.month + '-' + dateStruct.day\n      ) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__day\"\n          [class.ga-calendar__day--selected]=\"isSelected(dateStruct)\"\n          [class.ga-calendar__day--current]=\"isToday(dateStruct)\"\n          [class.ga-calendar__day--disabled]=\"isDateDisabled(dateStruct)\"\n          [class.ga-calendar__day--weekend]=\"isWeekend(dateStruct)\"\n          [disabled]=\"isDateDisabled(dateStruct)\"\n          (click)=\"selectDate(dateStruct)\"\n        >\n          {{ dateStruct.day }}\n        </button>\n      }\n    </div>\n  }\n  @case ('month') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--month\">\n      @for (month of months(); track month.index) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__month\"\n          [class.ga-calendar__month--selected]=\"isSelectedMonth(month.index)\"\n          [class.ga-calendar__month--disabled]=\"isMonthDisabled(month.index)\"\n          [disabled]=\"isMonthDisabled(month.index)\"\n          (click)=\"selectMonth(month.index)\"\n        >\n          {{ month.shortName }}\n        </button>\n      }\n    </div>\n  }\n  @case ('year') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--year\">\n      @for (year of years(); track year) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__year\"\n          [class.ga-calendar__year--selected]=\"isSelectedYear(year)\"\n          [class.ga-calendar__year--disabled]=\"isYearDisabled(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          (click)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-datepicker', imports: [GaIconModule], host: {
+                        class: 'ga-calendar',
+                    }, template: "<div class=\"ga-calendar__header\">\n  <div class=\"ga-calendar__month-year\">\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleMonthView()\"\n      [attr.aria-label]=\"i18n.selectMonthLabel\"\n    >\n      {{ getMonthName(viewDate().month) }}\n      <ga-icon\n        [icon]=\"viewMode() === 'month' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleYearView()\"\n      [attr.aria-label]=\"i18n.selectYearLabel\"\n    >\n      {{ viewDate().year }}\n      <ga-icon\n        [icon]=\"viewMode() === 'year' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n  </div>\n  @if (viewMode() !== 'month') {\n    <div class=\"ga-calendar__navigation\">\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigatePrevious()\"\n        [attr.aria-label]=\"i18n.previousLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronLeft\" size=\"24\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigateNext()\"\n        [attr.aria-label]=\"i18n.nextLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronRight\" size=\"24\" />\n      </button>\n    </div>\n  }\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\n    <div class=\"ga-calendar__weekdays\">\n      @for (day of weekDays(); track day) {\n        <div class=\"ga-calendar__weekday\">{{ day }}</div>\n      }\n    </div>\n    <div class=\"ga-calendar__selection ga-calendar__selection--day\">\n      @for (\n        dateStruct of calendarDays();\n        track dateStruct.year + '-' + dateStruct.month + '-' + dateStruct.day\n      ) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__day\"\n          [class.ga-calendar__day--selected]=\"isSelected(dateStruct)\"\n          [class.ga-calendar__day--current]=\"isToday(dateStruct)\"\n          [class.ga-calendar__day--disabled]=\"isDateDisabled(dateStruct)\"\n          [class.ga-calendar__day--weekend]=\"isWeekend(dateStruct)\"\n          [disabled]=\"isDateDisabled(dateStruct)\"\n          (click)=\"selectDate(dateStruct)\"\n        >\n          {{ dateStruct.day }}\n        </button>\n      }\n    </div>\n  }\n  @case ('month') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--month\">\n      @for (month of months(); track month.index) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__month\"\n          [class.ga-calendar__month--selected]=\"isSelectedMonth(month.index)\"\n          [class.ga-calendar__month--disabled]=\"isMonthDisabled(month.index)\"\n          [disabled]=\"isMonthDisabled(month.index)\"\n          (click)=\"selectMonth(month.index)\"\n        >\n          {{ month.shortName }}\n        </button>\n      }\n    </div>\n  }\n  @case ('year') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--year\">\n      @for (year of years(); track year) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__year\"\n          [class.ga-calendar__year--selected]=\"isSelectedYear(year)\"\n          [class.ga-calendar__year--disabled]=\"isYearDisabled(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          (click)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class GaFormFieldConnector {
+    controlDisabled = signal(false);
+    controlId = signal(null);
+    labelId = signal(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldConnector });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldConnector, decorators: [{
+            type: Injectable
+        }] });
+
+let nextUniqueId$7 = 0;
+class GaInputDirective {
+    uniqueId = `ga-input-${++nextUniqueId$7}`;
+    formFieldConnector = inject(GaFormFieldConnector, {
+        optional: true,
+    });
+    hasWrapper = inject(GaInputComponent, { optional: true });
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    implicitNgControlState = injectNgControlState();
+    invalidInput = input(null, {
+        alias: 'invalid',
+        transform: booleanAttribute,
+    });
+    idInput = input(undefined, { alias: 'id' });
+    disabledInput = input(undefined, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    invalid = computed(() => {
+        return this.invalidInput() ?? this.implicitNgControlState.inError();
+    });
+    id = computed(() => {
+        return this.idInput() ?? this.uniqueId;
+    });
+    disabled = computed(() => {
+        return this.disabledInput() ?? this.implicitNgControlState.disabled();
+    });
+    constructor(placeholder) {
+        const formFieldConnector = this.formFieldConnector;
+        if (formFieldConnector) {
+            effect(() => formFieldConnector.controlDisabled.set(this.disabled()));
+            effect(() => formFieldConnector.controlId.set(this.id()));
+        }
+        if (!placeholder) {
+            // a workaround till https://github.com/visma-software-nordic/gaia-styles/issues/108 is fixed
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'placeholder', '');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputDirective, deps: [{ token: 'placeholder', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaInputDirective, isStandalone: true, selector: "[gaInput]", inputs: { invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class.ga-input": "!hasWrapper", "class.ga-input--invalid": "!hasWrapper && invalid()", "attr.disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputDirective, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[gaInput]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.id]': 'id()',
+                        '[class.ga-input]': '!hasWrapper',
+                        '[class.ga-input--invalid]': '!hasWrapper && invalid()',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['placeholder']
+                }] }] });
+
+class GaInputComponent {
+    gaInput = contentChild.required(GaInputDirective);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaInputComponent, isStandalone: true, selector: "ga-input", host: { properties: { "class.ga-input--invalid": "gaInput().invalid()" }, classAttribute: "ga-input" }, queries: [{ propertyName: "gaInput", first: true, predicate: GaInputDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ga-input',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [CdkOverlayOrigin],
+                    host: {
+                        class: 'ga-input',
+                        '[class.ga-input--invalid]': 'gaInput().invalid()',
+                    },
+                }]
+        }] });
+
+class GaDatepickerToggleComponent {
+    icons = { CalendarDays };
+    i18n = inject(GaDatepickerI18n);
+    gaInput = inject(GaInputComponent);
+    valueAdapter = inject(GaDatepickerValueAdapter);
+    injector = inject(Injector);
+    overlayOrigin = inject(CdkOverlayOrigin);
+    repositionScrollStrategy = createRepositionScrollStrategy(this.injector);
+    positions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: 8,
+        },
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -8,
+        },
+    ];
+    _isOpen = signal(false);
+    isOpen = this._isOpen.asReadonly();
+    for = input.required();
+    toggle() {
+        if (this._isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.for().disabled() || this._isOpen()) {
+            return;
+        }
+        this._isOpen.set(true);
+    }
+    close() {
+        if (!this._isOpen()) {
+            return;
+        }
+        this._isOpen.set(false);
+    }
+    onDatepickerValueChange(value) {
+        this.for().updateValue(value, { updateView: true, emitToNgModel: true });
+        if (value) {
+            this.close();
+        }
+    }
+    setToday() {
+        const today = new Date();
+        const todayStruct = {
+            year: today.getFullYear(),
+            month: today.getMonth() + 1,
+            day: today.getDate(),
+        };
+        const todayValue = this.valueAdapter.fromStruct(todayStruct);
+        this.for().updateValue(todayValue, {
+            updateView: true,
+            emitToNgModel: true,
+        });
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaDatepickerToggleComponent, isStandalone: true, selector: "ga-datepicker-toggle", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.escape": "close()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div class=\"ga-datepicker\">\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "component", type: GaButtonDirective, selector: "button[gaButton], a[gaButton]", inputs: ["gaButton", "gaButtonLoading", "gaButtonLoadingLabel", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDatepickerComponent, selector: "ga-datepicker", inputs: ["value", "min", "max"], outputs: ["valueChange"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ga-datepicker-toggle', imports: [GaIconModule, GaButtonModule, OverlayModule, GaDatepickerComponent], encapsulation: ViewEncapsulation.None, host: {
+                        '(keydown.escape)': 'close()',
+                    }, template: "<button\n  type=\"button\"\n  class=\"ga-datepicker-toggle\"\n  [disabled]=\"for().disabled()\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-haspopup]=\"true\"\n  [attr.aria-label]=\"i18n.openCalendarLabel\"\n  tabindex=\"-1\"\n>\n  <ga-icon [icon]=\"icons.CalendarDays\" size=\"24\" />\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (overlayKeydown)=\"$event.code === 'Escape' && close()\"\n>\n  <div class=\"ga-datepicker\">\n    <ga-datepicker\n      [value]=\"for().value()\"\n      (valueChange)=\"onDatepickerValueChange($event)\"\n      [min]=\"for().min()\"\n      [max]=\"for().max()\"\n    />\n    <div class=\"ga-datepicker__footer\">\n      <button type=\"button\" gaButton (click)=\"setToday()\">\n        {{ i18n.todayButtonLabel }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".ga-datepicker__footer{text-align:center}\n"] }]
+        }] });
+
+function GA_DATEPICKER_PARSER_FORMATTER_FACTORY() {
+    return new GaDatepickerParserFormatterDefault();
+}
+/**
+ * Converts between the internal `GaDatepickerStruct` model presentation and a `string` that is displayed in the input element.
+ */
+class GaDatepickerParserFormatter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerParserFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerParserFormatter, providedIn: 'root', useFactory: GA_DATEPICKER_PARSER_FORMATTER_FACTORY });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerParserFormatter, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useFactory: GA_DATEPICKER_PARSER_FORMATTER_FACTORY,
+                }]
+        }] });
+const GA_DEFAULT_DATEPICKER_FORMATS = {
+    'en-US': {
+        input: [
+            'yyyy-MM-dd',
+            'M d yy',
+            'M d yyyy',
+            'M/d/yy',
+            'M/d/yyyy',
+            'M.d.yy',
+            'M.d.yyyy',
+            'M-d-yy',
+            'M-d-yyyy',
+        ],
+        output: 'MM/dd/yyyy',
+    },
+    'en-GB': {
+        input: [
+            'yyyy-MM-dd',
+            'd M yy',
+            'd M yyyy',
+            'd/M/yy',
+            'd/M/yyyy',
+            'd.M.yy',
+            'd.M.yyyy',
+            'd-M-yy',
+            'd-M-yyyy',
+        ],
+        output: 'dd/MM/yyyy',
+    },
+    'da-dK': {
+        input: [
+            'yyyy-MM-dd',
+            'd M yyyy',
+            'd M yy',
+            'd.M.yy',
+            'd.M.yyyy',
+            'd/M/yy',
+            'd/M/yyyy',
+            'd-M-yy',
+            'd-M-yyyy',
+        ],
+        output: 'dd.MM.yyyy',
+    },
+    'fi-FI': {
+        input: [
+            'yyyy-MM-dd',
+            'd M yy',
+            'd M yyyy',
+            'd.M.yy',
+            'd.M.yyyy',
+            'd/M/yy',
+            'd/M/yyyy',
+            'd-M-yy',
+            'd-M-yyyy',
+        ],
+        output: 'dd.MM.yyyy',
+    },
+    'nb-NO': {
+        input: [
+            'yyyy-MM-dd',
+            'd M yy',
+            'd M yyyy',
+            'd.M.yy',
+            'd.M.yyyy',
+            'd/M/yy',
+            'd/M/yyyy',
+            'd-M-yy',
+            'd-M-yyyy',
+        ],
+        output: 'dd.MM.yyyy',
+    },
+    'nn-NO': {
+        input: [
+            'yyyy-MM-dd',
+            'd M yy',
+            'd M yyyy',
+            'd.M.yy',
+            'd.M.yyyy',
+            'd/M/yy',
+            'd/M/yyyy',
+            'd-M-yy',
+            'd-M-yyyy',
+        ],
+        output: 'dd.MM.yyyy',
+    },
+    'sv-SE': {
+        input: [
+            'yyyy-MM-dd',
+            'yy M d',
+            'yyyy M d',
+            'yy-M-d',
+            'yyyy-M-d',
+            'yy/M/d',
+            'yyyy/M/d',
+            'yy.M.d',
+            'yyyy.M.d',
+            'yyMMdd',
+            'yyyyMMdd',
+        ],
+        output: 'yyyy-MM-dd',
+    },
+};
+const GA_DATE_PARSER_FORMATTER_CONFIG = new InjectionToken('GA_DATE_PARSER_FORMATTER_CONFIG', { providedIn: 'root', factory: () => GA_DEFAULT_DATEPICKER_FORMATS });
+function extendGaDateParserFormatter(formats) {
+    return {
+        provide: GA_DATE_PARSER_FORMATTER_CONFIG,
+        useValue: { ...GA_DEFAULT_DATEPICKER_FORMATS, ...formats },
+    };
+}
+class GaDatepickerParserFormatterDefault extends GaDatepickerParserFormatter {
+    /** @ignore */
+    locale = inject(LOCALE_ID);
+    /** @ignore */
+    formats = inject(GA_DATE_PARSER_FORMATTER_CONFIG);
+    parse(value) {
+        if (!value || typeof value !== 'string') {
+            return null;
+        }
+        const trimmedValue = value.trim();
+        if (!trimmedValue) {
+            return null;
+        }
+        let config = this.formats[this.locale];
+        if (!config) {
+            this.printUnknownLocaleWarning();
+            config = GA_DEFAULT_DATEPICKER_FORMATS['en-GB'];
+        }
+        for (const format of config.input) {
+            const regexp = this.dateFormatToRegexp(format);
+            const match = trimmedValue.match(regexp);
+            if (match) {
+                const yearIndex = format.indexOf('y');
+                const monthIndex = format.indexOf('M');
+                const dayIndex = format.indexOf('d');
+                const sortedIndexes = [yearIndex, monthIndex, dayIndex].sort();
+                const yearGroup = sortedIndexes.indexOf(yearIndex) + 1;
+                const monthGroup = sortedIndexes.indexOf(monthIndex) + 1;
+                const dayGroup = sortedIndexes.indexOf(dayIndex) + 1;
+                const year = this.addYearPadding(+match[yearGroup]);
+                const month = +match[monthGroup];
+                const day = +match[dayGroup];
+                if (month <= 0 || month > 12) {
+                    // invalid month
+                    return null;
+                }
+                const daysInMonth = new Date(year, month, 0).getDate();
+                if (day <= 0 || day > daysInMonth) {
+                    // invalid day
+                    return null;
+                }
+                return { year, month, day };
+            }
+        }
+        return null;
+    }
+    format(date) {
+        if (!date) {
+            return '';
+        }
+        let format = this.formats[this.locale];
+        if (!format) {
+            this.printUnknownLocaleWarning();
+            format = GA_DEFAULT_DATEPICKER_FORMATS['en-GB'];
+        }
+        return this.formatDate(date, format.output);
+    }
+    formatDate(date, format) {
+        const year = date.year.toString();
+        const month = date.month.toString().padStart(2, '0');
+        const day = date.day.toString().padStart(2, '0');
+        return format
+            .replace(/yyyy/g, year)
+            .replace(/MM/g, month)
+            .replace(/dd/g, day);
+    }
+    dateFormatToRegexp(format) {
+        const pattern = '^' +
+            format
+                // / to \/
+                .replace(/\//g, '\\/')
+                // . to \.
+                .replace(/\./g, '\\.')
+                .replace(/(d+)/, '(\\d{1,2})')
+                .replace(/(yyyy)/, '(\\d{4})')
+                .replace(/(yy)/, '(\\d{2})')
+                .replace(/(M+)/, '(\\d{1,2})') +
+            '$';
+        return new RegExp(pattern);
+    }
+    addYearPadding(year) {
+        if (year < 100) {
+            return 2000 + year;
+        }
+        return year;
+    }
+    printUnknownLocaleWarning() {
+        console.warn(`Default datepicker parser-formatter does not have predefined formats for "${this.locale}" locale. Please provide custom 'GaDatepickerParserFormatter' class. Now defaults to "en-GB".`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerParserFormatterDefault, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerParserFormatterDefault });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerParserFormatterDefault, decorators: [{
+            type: Injectable
+        }] });
+function provideGaDatepickerParserFormatter(value) {
+    if (isClass(value)) {
+        return { provide: GaDatepickerParserFormatter, useClass: value };
+    }
+    return typeof value === 'function'
+        ? { provide: GaDatepickerParserFormatter, useFactory: value }
+        : { provide: GaDatepickerParserFormatter, useValue: value };
+}
+
+class GaDatepickerInputDirective {
+    inputElRef = inject(ElementRef, { self: true });
+    parserFormatter = inject(GaDatepickerParserFormatter);
+    valueAdapter = inject(GaDatepickerValueAdapter);
+    // Native value control (alternative to Angular forms)
+    valueInput = input(null, { alias: 'value' });
+    disabledInput = input(null, {
+        alias: 'disabled',
+        transform: booleanAttribute,
+    });
+    min = input(null);
+    max = input(null);
+    dateInput = output();
+    dateChange = output();
+    value = linkedSignal(() => this.valueInput());
+    dateStruct = computed(() => this.valueAdapter.toStruct(this.value()));
+    disabled = linkedSignal(() => !!this.disabledInput());
+    lastEmittedStruct = signal(null);
+    lastValueValid = signal(false);
+    onNgChangeFn;
+    onNgTouchedFn;
+    constructor() {
+        effect(() => {
+            this.valueInput(); // explicit call to track value input changes
+            this.lastValueValid.set(true);
+            untracked(() => this.formatValue());
+        });
+    }
+    onInput(event) {
+        const target = event.target;
+        // Parse the input value
+        const parsedStruct = this.parserFormatter.parse(target.value);
+        const newValue = this.valueAdapter.fromStruct(parsedStruct);
+        this.lastValueValid.set(!target.value || parsedStruct !== null);
+        // Only update if the parsed value is different from current value
+        if (compareStructs(parsedStruct, this.dateStruct()) !== 0) {
+            this.value.set(newValue);
+            this.dateInput.emit(newValue);
+        }
+        this.onNgChangeFn?.(newValue);
+    }
+    onBlur() {
+        if (this.dateStruct()) {
+            this.formatValue();
+        }
+        if (compareStructs(this.dateStruct(), this.lastEmittedStruct()) !== 0) {
+            this.dateChange.emit(this.value());
+            this.lastEmittedStruct.set(this.dateStruct());
+        }
+        this.onNgTouchedFn?.();
+    }
+    formatValue() {
+        const value = this.dateStruct();
+        const formattedValue = this.parserFormatter.format(value);
+        this.inputElRef.nativeElement.value = formattedValue;
+    }
+    updateValue(value, { updateView, emitToNgModel, } = {}) {
+        this.value.set(value);
+        this.lastValueValid.set(true);
+        if (updateView) {
+            this.formatValue();
+        }
+        if (emitToNgModel) {
+            this.onNgTouchedFn?.();
+            this.onNgChangeFn?.(value);
+        }
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.updateValue(value, { updateView: true });
+    }
+    registerOnChange(fn) {
+        this.onNgChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onNgTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    validate(control) {
+        const { value } = control;
+        if (!this.lastValueValid()) {
+            return { dateFormat: { actual: this.inputElRef.nativeElement.value } };
+        }
+        if (value === null) {
+            return null;
+        }
+        const valueStruct = this.valueAdapter.toStruct(value);
+        if (this.min()) {
+            const minDateStruct = this.valueAdapter.toStruct(this.min());
+            if (minDateStruct && compareStructs(valueStruct, minDateStruct) === -1) {
+                return { minDate: { actual: value, min: this.min() } };
+            }
+        }
+        if (this.max()) {
+            const maxDateStruct = this.valueAdapter.toStruct(this.max());
+            if (maxDateStruct && compareStructs(valueStruct, maxDateStruct) === 1) {
+                return { maxDate: { actual: value, max: this.max() } };
+            }
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaDatepickerInputDirective, isStandalone: true, selector: "input[gaDatepickerInput]", inputs: { valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateInput: "dateInput", dateChange: "dateChange" }, host: { listeners: { "blur": "onBlur()", "input": "onInput($event)" }, properties: { "disabled": "disabled()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GaDatepickerInputDirective),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => GaDatepickerInputDirective),
+                multi: true,
+            },
+        ], exportAs: ["gaDatepickerInput"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[gaDatepickerInput]',
+                    exportAs: 'gaDatepickerInput',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GaDatepickerInputDirective),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => GaDatepickerInputDirective),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        '[disabled]': 'disabled()',
+                        '(blur)': 'onBlur()',
+                        '(input)': 'onInput($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class GaDatepickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerModule, imports: [GaDatepickerComponent,
+            GaDatepickerToggleComponent,
+            GaDatepickerInputDirective], exports: [GaDatepickerComponent,
+            GaDatepickerToggleComponent,
+            GaDatepickerInputDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerModule, imports: [GaDatepickerComponent,
+            GaDatepickerToggleComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        GaDatepickerComponent,
+                        GaDatepickerToggleComponent,
+                        GaDatepickerInputDirective,
+                    ],
+                    exports: [
+                        GaDatepickerComponent,
+                        GaDatepickerToggleComponent,
+                        GaDatepickerInputDirective,
+                    ],
+                }]
+        }] });
+
+class GaDatepickerNativeUtcValueAdapter extends GaDatepickerValueAdapter {
+    /**
+     * Converts Date to internal struct representation
+     * Uses UTC to avoid timezone issues and normalizes to midnight
+     */
+    toStruct(value) {
+        if (!value)
+            return null;
+        // Create UTC date at midnight to avoid timezone issues
+        const utcDate = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
+        return {
+            year: utcDate.getUTCFullYear(),
+            month: utcDate.getUTCMonth() + 1, // Convert from 0-11 to 1-12
+            day: utcDate.getUTCDate(),
+        };
+    }
+    /**
+     * Converts internal struct to Date representation
+     * Creates UTC Date at midnight (00:00:00)
+     */
+    fromStruct(struct) {
+        if (!struct)
+            return null;
+        // Create UTC date at midnight (convert month from 1-12 to 0-11)
+        return new Date(Date.UTC(struct.year, struct.month - 1, struct.day, 0, 0, 0, 0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerNativeUtcValueAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerNativeUtcValueAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerNativeUtcValueAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+class GaDatepickerNativeUtcIsoValueAdapter extends GaDatepickerValueAdapter {
+    /**
+     * Converts ISO Date to internal struct representation
+     * Uses UTC to avoid timezone issues and normalizes to midnight
+     */
+    toStruct(value) {
+        if (!value)
+            return null;
+        const date = new Date(value);
+        if (isNaN(date.getTime())) {
+            return null;
+        }
+        return {
+            year: date.getUTCFullYear(),
+            month: date.getUTCMonth() + 1,
+            day: date.getUTCDate(),
+        };
+    }
+    /**
+     * Converts internal struct to ISO Date representation
+     * Creates UTC Date at midnight (00:00:00)
+     */
+    fromStruct(struct) {
+        if (!struct)
+            return null;
+        return new Date(Date.UTC(struct.year, struct.month - 1, struct.day, 0, 0, 0, 0)).toISOString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerNativeUtcIsoValueAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerNativeUtcIsoValueAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaDatepickerNativeUtcIsoValueAdapter, decorators: [{
+            type: Injectable
+        }] });
+
 class GaSegmentedControlComponent {
     selected = model();
     change = output();
@@ -929,87 +2018,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 }]
         }] });
 
-class GaFormFieldConnector {
-    controlDisabled = signal(false);
-    controlId = signal(null);
-    labelId = signal(null);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldConnector, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldConnector });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaFormFieldConnector, decorators: [{
-            type: Injectable
-        }] });
-
-let nextUniqueId$7 = 0;
-class GaInputDirective {
-    uniqueId = `ga-input-${++nextUniqueId$7}`;
-    formFieldConnector = inject(GaFormFieldConnector, {
-        optional: true,
-    });
-    hasWrapper = inject(GaInputComponent, { optional: true });
-    implicitNgControlState = injectNgControlState();
-    invalidInput = input(null, {
-        alias: 'invalid',
-        transform: booleanAttribute,
-    });
-    idInput = input(undefined, { alias: 'id' });
-    disabledInput = input(undefined, {
-        alias: 'disabled',
-        transform: booleanAttribute,
-    });
-    invalid = computed(() => {
-        return this.invalidInput() ?? this.implicitNgControlState.inError();
-    });
-    id = computed(() => {
-        return this.idInput() ?? this.uniqueId;
-    });
-    disabled = computed(() => {
-        return this.disabledInput() ?? this.implicitNgControlState.disabled();
-    });
-    constructor() {
-        const formFieldConnector = this.formFieldConnector;
-        if (formFieldConnector) {
-            effect(() => formFieldConnector.controlDisabled.set(this.disabled()));
-            effect(() => formFieldConnector.controlId.set(this.id()));
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.4", type: GaInputDirective, isStandalone: true, selector: "[gaInput]", inputs: { invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "class.ga-input": "!hasWrapper", "class.ga-input--invalid": "!hasWrapper && invalid()", "attr.disabled": "disabled() ? \"\" : null" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputDirective, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[gaInput]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[attr.id]': 'id()',
-                        '[class.ga-input]': '!hasWrapper',
-                        '[class.ga-input--invalid]': '!hasWrapper && invalid()',
-                        '[attr.disabled]': 'disabled() ? "" : null',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-
-class GaInputComponent {
-    gaInput = contentChild.required(GaInputDirective);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: GaInputComponent, isStandalone: true, selector: "ga-input", host: { properties: { "class.ga-input--invalid": "gaInput().invalid()" }, classAttribute: "ga-input" }, queries: [{ propertyName: "gaInput", first: true, predicate: GaInputDirective, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ga-input',
-                    template: `<ng-content />`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'ga-input',
-                        '[class.ga-input--invalid]': 'gaInput().invalid()',
-                    },
-                }]
-        }] });
-
 class GaInputModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: GaInputModule, imports: [GaInputComponent, GaInputDirective], exports: [GaInputComponent, GaInputDirective] });
@@ -1678,7 +2686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class GaMenuComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$1.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaMenuComponent, isStandalone: true, selector: "ga-menu", host: { classAttribute: "ga-menu" }, hostDirectives: [{ directive: i1$2.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{margin-top:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1));margin-bottom:calc(var(--ga-size-spacing-03) * var(--ga-base-scaling-factor, 1))}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaMenuComponent, decorators: [{
             type: Component,
@@ -1694,7 +2702,7 @@ class GaMenuItemComponent {
     description = input('', { alias: 'gaMenuItemDescription' });
     shortcut = input('', { alias: 'gaMenuItemShortcut' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", inputs: { icon: { classPropertyName: "icon", publicName: "gaMenuItemIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "gaMenuItemDescription", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "gaMenuItemShortcut", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$1.CdkMenuItem }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n  <div class=\"ga-menu__item-title\">\n    <div class=\"ga-menu__item-label\"><ng-content /></div>\n    @if (shortcut()) {\n      <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n    }\n  </div>\n  @if (description()) {\n    <div class=\"ga-menu__item-description\">{{ description() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaMenuItemComponent, isStandalone: true, selector: "[gaMenuItem]", inputs: { icon: { classPropertyName: "icon", publicName: "gaMenuItemIcon", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "gaMenuItemDescription", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "gaMenuItemShortcut", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-menu__item" }, hostDirectives: [{ directive: i1$2.CdkMenuItem }], ngImport: i0, template: "@if (icon()) {\n  <ga-icon [icon]=\"icon()!\" class=\"ga-menu__item-icon\" size=\"16\" />\n}\n<div class=\"ga-menu__item-content\">\n  <div class=\"ga-menu__item-title\">\n    <div class=\"ga-menu__item-label\"><ng-content /></div>\n    @if (shortcut()) {\n      <span class=\"ga-menu__item-shortcut\">{{ shortcut() }}</span>\n    }\n  </div>\n  @if (description()) {\n    <div class=\"ga-menu__item-description\">{{ description() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaMenuItemComponent, decorators: [{
             type: Component,
@@ -1738,7 +2746,7 @@ class GaMenuTriggerDirective {
                     return () => createRepositionScrollStrategy(injector);
                 },
             },
-        ], exportAs: ["gaMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger, outputs: ["cdkMenuOpened", "gaMenuOpened", "cdkMenuClosed", "gaMenuClosed"] }], ngImport: i0 });
+        ], exportAs: ["gaMenuTrigger"], hostDirectives: [{ directive: i1$2.CdkMenuTrigger, outputs: ["cdkMenuOpened", "gaMenuOpened", "cdkMenuClosed", "gaMenuClosed"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaMenuTriggerDirective, decorators: [{
             type: Directive,
@@ -2075,7 +3083,7 @@ class GaModalComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaModalComponent, isStandalone: true, selector: "ng-component", host: { properties: { "attr.role": "options.role", "attr.aria-labelledby": "options.labelledBy ?? labelledBy()", "attr.aria-describedby": "options.describedBy ?? describedBy()", "class.ga-modal--small": "options.size === 'sm'", "class.ga-modal--medium": "options.size === 'md'", "class.ga-modal--large": "options.size === 'lg'", "class.ga-modal--information": "options.type === 'info'", "class.ga-modal--danger": "options.type === 'danger'", "class.ga-modal--warning": "options.type === 'warning'", "class.ga-modal--success": "options.type === 'success'" }, classAttribute: "ga-modal" }, hostDirectives: [{ directive: i1$2.CdkTrapFocus }], ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaModalComponent, isStandalone: true, selector: "ng-component", host: { properties: { "attr.role": "options.role", "attr.aria-labelledby": "options.labelledBy ?? labelledBy()", "attr.aria-describedby": "options.describedBy ?? describedBy()", "class.ga-modal--small": "options.size === 'sm'", "class.ga-modal--medium": "options.size === 'md'", "class.ga-modal--large": "options.size === 'lg'", "class.ga-modal--information": "options.type === 'info'", "class.ga-modal--danger": "options.type === 'danger'", "class.ga-modal--warning": "options.type === 'warning'", "class.ga-modal--success": "options.type === 'success'" }, classAttribute: "ga-modal" }, hostDirectives: [{ directive: i1$3.CdkTrapFocus }], ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalComponent, decorators: [{
             type: Component,
@@ -2224,7 +3232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 
 class GaModalContentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaModalContentComponent, isStandalone: true, selector: "ga-modal-content", host: { classAttribute: "ga-modal__content" }, hostDirectives: [{ directive: i1$3.CdkScrollable }], ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: GaModalContentComponent, isStandalone: true, selector: "ga-modal-content", host: { classAttribute: "ga-modal__content" }, hostDirectives: [{ directive: i1$4.CdkScrollable }], ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaModalContentComponent, decorators: [{
             type: Component,
@@ -2631,7 +3639,7 @@ class GaOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled", "attr.hidden": "hidden() ? '' : null" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$4.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaOptionComponent, isStandalone: true, selector: "ga-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, withInput: { classPropertyName: "withInput", publicName: "withInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "class.ga-dropdown__item--selected": "selected()", "class.ga-dropdown__item--disabled": "cdkOption.disabled", "class.ga-dropdown__item--active": "active() && !cdkOption.disabled", "attr.hidden": "hidden() ? '' : null" }, classAttribute: "ga-dropdown__item" }, hostDirectives: [{ directive: i1$5.CdkOption, inputs: ["cdkOption", "value", "cdkOptionDisabled", "disabled", "cdkOptionTypeaheadLabel", "typeaheadLabel"] }], ngImport: i0, template: "@if (withInput()) {\n  @if (selectComponent.multiple()) {\n    <ga-checkbox\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  } @else {\n    <ga-radio-button\n      [checked]=\"selected()\"\n      [disabled]=\"disabled()\"\n      aria-hidden=\"true\"\n      style=\"pointer-events: none\"\n      tabindex=\"-1\"\n    />\n  }\n}\n<div class=\"ga-dropdown__item-label\"><ng-content /></div>\n", dependencies: [{ kind: "ngmodule", type: GaCheckboxModule }, { kind: "component", type: GaCheckboxComponent, selector: "ga-checkbox", inputs: ["value", "disabled", "checked", "name", "id", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "required"], outputs: ["change", "indeterminateChange"] }, { kind: "ngmodule", type: GaRadioModule }, { kind: "component", type: GaRadioButtonComponent, selector: "ga-radio-button", inputs: ["value", "id", "name", "checked", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], outputs: ["change"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaOptionComponent, decorators: [{
             type: Component,
@@ -2799,6 +3807,7 @@ class GaSelectComponent {
     customSelectValue = contentChild(GaSelectValueComponent);
     inputSearch = viewChild('inputSearch');
     content = viewChild('ngContent', { read: ElementRef });
+    connectedOverlay = viewChild(CdkConnectedOverlay);
     id = computed(() => {
         return this.idInput() ?? this._uniqueId;
     });
@@ -2838,6 +3847,10 @@ class GaSelectComponent {
         if (formFieldConnector) {
             effect(() => formFieldConnector.controlDisabled.set(this.disabled()));
         }
+        effect(() => {
+            this.gaOptions(); // explicit call to track the option changes
+            untracked(() => this.connectedOverlay()?.overlayRef?.updatePosition());
+        });
     }
     ngAfterContentInit() {
         effect(() => {
@@ -3029,7 +4042,7 @@ class GaSelectComponent {
                 useExisting: forwardRef(() => GaSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$5.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
+        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -3072,7 +4085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '(keydown.space)': 'open(); $event.preventDefault()',
                         '(keydown.enter)': 'open(); $event.preventDefault()',
                         '(keydown.backspace)': 'clearValue(); $event.preventDefault()',
-                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayLockPosition\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
+                    }, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class GaOptgroupComponent {
@@ -3133,7 +4146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
 class GaSelectDropdownComponent {
     loading = input(false, { transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$4.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownSpinnerComponent, selector: "ga-select-dropdown-spinner" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: GaSelectDropdownComponent, isStandalone: true, selector: "ga-select-dropdown", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ga-dropdown ga-dropdown__content" }, hostDirectives: [{ directive: i1$5.CdkListbox }], ngImport: i0, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n", dependencies: [{ kind: "component", type: GaSelectDropdownSpinnerComponent, selector: "ga-select-dropdown-spinner" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectDropdownComponent, decorators: [{
             type: Component,
@@ -3412,6 +4425,8 @@ class GaTextAreaDirective {
     formFieldConnector = inject(GaFormFieldConnector, {
         optional: true,
     });
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
     uniqueId = `ga-text-area-${++nextUniqueId}`;
     idInput = input(undefined, { alias: 'id' });
     disabledInput = input(false, {
@@ -3425,14 +4440,18 @@ class GaTextAreaDirective {
     disabled = computed(() => this.disabledInput() ?? this.implicitNgControlState.disabled());
     invalid = computed(() => this.invalidInput() ?? this.implicitNgControlState.inError());
     id = computed(() => this.idInput() ?? this.uniqueId);
-    constructor() {
+    constructor(placeholder) {
         const formFieldConnector = this.formFieldConnector;
         if (formFieldConnector) {
             effect(() => formFieldConnector.controlDisabled.set(this.disabled()));
             effect(() => formFieldConnector.controlId.set(this.id()));
         }
+        if (!placeholder) {
+            // a workaround till https://github.com/visma-software-nordic/gaia-styles/issues/108 is fixed
+            this.renderer.setAttribute(this.elementRef.nativeElement, 'placeholder', '');
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTextAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTextAreaDirective, deps: [{ token: 'placeholder', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.4", type: GaTextAreaDirective, isStandalone: true, selector: "[gaTextArea]", inputs: { idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ga-text-area--invalid": "invalid()", "attr.id": "id()", "attr.disabled": "disabled() ? true : null" }, classAttribute: "ga-text-area" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTextAreaDirective, decorators: [{
@@ -3446,7 +4465,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         '[attr.disabled]': 'disabled() ? true : null',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['placeholder']
+                }] }] });
 
 class GaTextAreaModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaTextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3469,5 +4491,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_FORM_CONTROL_ADAPTER, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
+export { CHECKBOX_CONTROL_VALUE_ACCESSOR, DEFAULT_MODAL_OPTIONS, GA_ALERT_I18N_FACTORY, GA_BASE_FONT_SIZE, GA_BUTTON_I18N_FACTORY, GA_CHECKBOX_REQUIRED_VALIDATOR, GA_DATEPICKER_I18N_FACTORY, GA_DATEPICKER_PARSER_FORMATTER_FACTORY, GA_DATEPICKER_VALUE_ADAPTER_FACTORY, GA_DATE_PARSER_FORMATTER_CONFIG, GA_DEFAULT_DATEPICKER_FORMATS, GA_FORM_CONTROL_ADAPTER, GA_ICON_DEFAULT_SIZE, GA_MODAL_DATA, GA_MODAL_I18N_FACTORY, GA_SELECT_I18N_FACTORY, GA_SELECT_REQUIRED_VALIDATOR, GA_TOOLTIP_DEFAULT_OFFSET, GaAlertComponent, GaAlertI18n, GaAlertI18nDefault, GaAlertModule, GaAlertTitleActionsComponent, GaAlertTitleComponent, GaBadgeComponent, GaBadgeModule, GaButtonDirective, GaButtonI18n, GaButtonI18nDefault, GaButtonModule, GaCardComponent, GaCardModule, GaCheckboxComponent, GaCheckboxModule, GaCheckboxRequiredValidator, GaDatepickerComponent, GaDatepickerI18n, GaDatepickerI18nDefault, GaDatepickerInputDirective, GaDatepickerModule, GaDatepickerNativeUtcIsoValueAdapter, GaDatepickerNativeUtcValueAdapter, GaDatepickerParserFormatter, GaDatepickerParserFormatterDefault, GaDatepickerStructValueAdapter, GaDatepickerToggleComponent, GaDatepickerValueAdapter, GaFieldErrorDirective, GaFieldInfoComponent, GaFieldLabelComponent, GaFormControlDirective, GaFormControlErrorsDirective, GaFormFieldComponent, GaFormFieldConnector, GaFormFieldModule, GaIconButtonDirective, GaIconComponent, GaIconModule, GaInputComponent, GaInputDirective, GaInputModule, GaLabelledByFormFieldDirective, GaLinkDirective, GaLinkModule, GaMenuComponent, GaMenuItemComponent, GaMenuModule, GaMenuSeparatorComponent, GaMenuTitleComponent, GaMenuTriggerDirective, GaMenuTriggerIconComponent, GaModalActionsComponent, GaModalCloseDirective, GaModalComponent, GaModalContentComponent, GaModalDescriptionComponent, GaModalDescriptionDirective, GaModalHeaderComponent, GaModalI18n, GaModalI18nDefault, GaModalLabelDirective, GaModalModule, GaModalOptions, GaModalRef, GaModalService, GaModalTitleDirective, GaOptgroupComponent, GaOptionComponent, GaRadioButtonComponent, GaRadioGroupComponent, GaRadioModule, GaSegmentedControlButtonDirective, GaSegmentedControlComponent, GaSegmentedControlIconButtonComponent, GaSegmentedControlModule, GaSegmentedControlTextButtonComponent, GaSelectComponent, GaSelectDropdownComponent, GaSelectDropdownSpinnerComponent, GaSelectI18n, GaSelectI18nDefault, GaSelectModule, GaSelectRequiredValidator, GaSelectValueComponent, GaSpinnerComponent, GaSpinnerModule, GaSwitchComponent, GaSwitchModule, GaTextAreaDirective, GaTextAreaModule, GaTooltipComponent, GaTooltipDirective, GaTooltipModule, RADIO_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, compareStructs, extendGaDateParserFormatter, injectNgControlState, provideGaAlertI18n, provideGaBaseFontSize, provideGaButtonI18n, provideGaDatepickerI18n, provideGaDatepickerParserFormatter, provideGaDatepickerValueAdapter, provideGaModalI18n, provideGaModalOptions, provideGaSelectI18n };
 //# sourceMappingURL=vsn-ux-ngx-gaia.mjs.map